API tools faq
paste
LiterallyMeg

tumblr v.1

LiterallyMeg
Sep 13th, 2016
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.30 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3.  
  4.  
  5. theme v :: invisible
  6. solitudethemes
  7.  
  8.  
  9.  
  10. ----->
  11.  
  12. <!DOCTYPE html>
  13. <head>
  14.  
  15. <title>{Title}</title>
  16.  
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21. <!--default variables-->
  22.  
  23. <meta name="color:title" content="#000000"/>
  24. <meta name="color:text" content="#8c8a8a"/>
  25. <meta name="color:links" content="#bcbcbc"/>
  26. <meta name="color:links hover" content="#000000"/>
  27. <meta name="color:scrollbar" content="#cccccc">
  28. <meta name="color:search" content="#dad8d8"/>
  29.  
  30. <meta name="image:sidebar image" content=""/>
  31. <meta name="if:sidebar image" content="1"/>
  32.  
  33. <meta name="select:post width" content="250px" title="250px"/>
  34. <meta name="select:post width" content="300px" title="300px"/>
  35. <meta name="select:post width" content="350px" title="350px"/>
  36. <meta name="select:post width" content="400px" title="400px"/>
  37.  
  38. <meta name="select:font" content="karla, sans-serif" title="karla"/>
  39. <meta name="select:font" content="roboto,sans-serif" title="roboto"/>
  40. <meta name="select:font" content="lato, sans-serif" title="lato"/>
  41. <meta name="select:font" content="open sans, sans-serif" title="open sans"/>
  42. <meta name="select:font" content="calibri" title="calibri"/>
  43.  
  44. <meta name="text:home title" content="home">
  45. <meta name="text:about title" content="about">
  46. <meta name='text:more title' content="etc">
  47. <meta name="text:link 1" content="/">
  48. <meta name="text:link 1 title" content="one">
  49. <meta name="text:link 2" content="/">
  50. <meta name="text:link 2 title" content="two">
  51. <meta name="text:link 3" content="/">
  52. <meta name="text:link 3 title" content="three">
  53.  
  54. <!--tooltips-->
  55.  
  56. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  57.  
  58. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  59.  
  60. <script>
  61.  
  62. (function($){
  63.  
  64. $(document).ready(function(){
  65.  
  66. $("[title]").style_my_tooltips({
  67.  
  68. tip_follows_cursor:true,
  69.  
  70. tip_delay_time:90,
  71.  
  72. tip_fade_speed:600,
  73.  
  74. attribute:"title"
  75.  
  76. });
  77.  
  78. });
  79.  
  80. })(jQuery);
  81.  
  82. </script>
  83.  
  84.  
  85. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  86. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  87. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  88. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  89.  
  90. <script>
  91. $(document).ready(function(){
  92. $('.photo-slideshow').pxuPhotoset({
  93. lightbox: true,
  94. rounded: false,
  95. gutter: '1px',
  96. borderRadius: '0px',
  97. photoset: '.photo-slideshow',
  98. photoWrap: '.photo-data',
  99. photo: '.pxu-photo'
  100. });
  101. });
  102. </script>
  103.  
  104. <!--fonts-->
  105.  
  106. <link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  107.  
  108. <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic,300,300italic,700italic' rel='stylesheet' type='text/css'>
  109.  
  110. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  111.  
  112. <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  113.  
  114.  
  115. <style type="text/css">
  116.  
  117.  
  118. /*tooltips*/
  119.  
  120. .tooltip{
  121. display: inline;
  122. position: relative;
  123. }
  124.  
  125. #s-m-t-tooltip {
  126. max-width:300px;
  127. padding:5px;
  128. padding-top:3px;
  129. padding-bottom:3px;
  130. margin:5px 0px 0px 10px;
  131. background-color:#fff;
  132. font-family:{select:font};
  133. font-size:8px;
  134. font-weight:normal;
  135. letter-spacing:1px;
  136. line-height:8px;
  137. text-transform:uppercase;
  138. color:#aaa;
  139. z-index:2147483647;
  140. }
  141.  
  142.  
  143.  
  144. /*lightbox*/
  145.  
  146.  
  147. .tmblr-lightbox {background:rgba(255,255,255, .95)!important;}
  148.  
  149. .tmblr-lightbox img {opacity:0;}
  150.  
  151. .lightbox-caption {
  152. color:transparent;
  153. font-family:inherit!important;
  154. font-size:10px!important;
  155. font-weight:normal!important;
  156. text-shadow:none!important;
  157. }
  158.  
  159. .lightbox-image {
  160. -moz-box-shadow:none!important;
  161. -webkit-box-shadow:none!important;
  162. box-shadow:none!important;
  163. -moz-border-radius:0px!important;
  164. -webkit-border-radius:0px!important;
  165. border-radius:0px!important;
  166. padding:0px!important;
  167. margin:0px!important;
  168. border:0!important;
  169. opacity:1!important;
  170. }
  171.  
  172. .vignette {opacity:0!important;}
  173.  
  174.  
  175. /*tumblr controls*/
  176.  
  177.  
  178. iframe#tumblr_controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  179. -webkit-filter: invert(100%);
  180. -moz-filter: invert(100%);
  181. -o-filter: invert(100%);
  182. -ms-filter: invert(100%);
  183. filter: invert(100%);
  184. opacity:0.2;
  185. z-index:99999!important;
  186. top:10px!important;
  187. right:10px!important;
  188. }
  189.  
  190.  
  191.  
  192. /*selection*/
  193.  
  194. ::selection {
  195. color:{color:text};
  196. background:#eeeeee;
  197. }
  198.  
  199. ::-moz-selection {
  200. color:{color:text};
  201. background:#eeeeee;
  202. }
  203.  
  204. ::-webkit-selection {
  205. color:{color:text};
  206. background:#eeeeee;
  207. }
  208.  
  209. /*scrollbar*/
  210.  
  211. ::-webkit-scrollbar {
  212. background-color:#ffffff;
  213. height:9px;
  214. width:9px;
  215. }
  216.  
  217. ::-webkit-scrollbar-thumb {
  218. background-color:{color:scrollbar};
  219. border:4px solid #ffffff;
  220. }
  221.  
  222. ::-webkit-scrollbar-track {background-color:#ffffff;}
  223.  
  224.  
  225. /*basics*/
  226.  
  227. body {
  228. background:#ffffff;
  229. color:{color:text};
  230. font-family:{select:font};
  231. line-height:15px;
  232. font-size:10px;
  233. margin:0;
  234. text-align:left;
  235. overflow-x:hidden;
  236. -moz-osx-font-smoothing:grayscale;
  237. -webkit-font-smoothing:antialiased;
  238. font-smoothing:antialiased;
  239. }
  240.  
  241. blockquote {
  242. padding-left:10px;
  243. border-left:1px solid;
  244. border-color:#eeeeee;
  245. margin:10px;
  246. }
  247.  
  248. a {
  249. color:{color:links};
  250. text-decoration:none;
  251. -webkit-transition:all 0.2s;
  252. -moz-transition:all 0.2s;
  253. -ms-transition:all 0.2s;
  254. -o-transition:all 0.2s;
  255. transition:all 0.2s;
  256. }
  257.  
  258. a:hover {
  259. text-decoration:none;
  260. color: {color:links hover};
  261. cursor:help;
  262. }
  263.  
  264. img {
  265. opacity:1;
  266. max-width:100%;
  267. height:auto;
  268. text-decoration:none;
  269. }
  270.  
  271. b, strong {
  272. font-weight:normal;
  273. color:{color:title};
  274. }
  275.  
  276. h1 {
  277. font-size:11px;
  278. text-transform:uppercase;
  279. letter-spacing:1px;
  280. font-weight:normal;
  281. color:{color:title};
  282. }
  283.  
  284. h1 a {color:{color:title};}
  285. h1 a:hover {color:{color:links hover};}
  286.  
  287. pre {
  288. white-space: pre-wrap;
  289. white-space: -moz-pre-wrap;
  290. white-space: -pre-wrap;
  291. white-space: -o-pre-wrap;
  292. word-wrap: break-word;
  293. }
  294.  
  295. /*posts*/
  296.  
  297. .container {
  298. margin:0px auto;
  299. width:{select:post width};
  300. position:relative;
  301. -webkit-animation-name: fade-in;
  302. -webkit-animation-duration: 1.5s;
  303. }
  304.  
  305. .posts {
  306. {block:IndexPage}
  307. margin-bottom:80px;
  308. {/block:IndexPage}
  309. {block:PermalinkPage}
  310. margin-bottom:40px;
  311. {/block:PermalinkPage}
  312. width:{select:post width};
  313. }
  314.  
  315. .entries {
  316. margin-top:100px;
  317. margin-bottom:50px;
  318. width:{select:post width};
  319. }
  320.  
  321. .posts img, .posts li, .posts blockquote {
  322. max-width: 100%;
  323. height:auto;
  324. }
  325.  
  326. .posts ul li:before, .nav li:before {
  327. content:"��";
  328. position:relative;
  329. left:-10px;
  330. letter-spacing:-1px;
  331. color:#ddd;
  332. }
  333.  
  334. .posts ul li, .nav li{
  335. text-indent:-12px;
  336. list-style:none;
  337. }
  338.  
  339. blockquote img {max-width:100%!important;height:auto;}
  340.  
  341. .caption a, .text a{border-bottom:1px solid #eee;}
  342.  
  343. a.tumblr_blog {
  344. text-transform:lowercase;
  345. border-bottom:1px solid #eee;
  346. }
  347.  
  348.  
  349. /*post info*/
  350.  
  351. .info {
  352. padding-top:15px;
  353. margin-top:25px;
  354. text-transform:uppercase;
  355. font-size:9px;
  356. text-align:left;
  357. letter-spacing:1px;
  358. border-top:1px solid #eee;
  359. }
  360.  
  361. .info b a{color:{color:title};}
  362.  
  363. .info b a:hover {color:{color:links hover};}
  364.  
  365. .pinfo {
  366. padding-top:15px;
  367. margin-top:10px;
  368. text-transform:uppercase;
  369. font-size:8px;
  370. letter-spacing:1px;
  371. }
  372.  
  373. .posts:hover .tags {opacity:.8;}
  374.  
  375. .tags {
  376. font-style:normal;
  377. text-transform:lowercase;
  378. display:inline;
  379. opacity:0;
  380. -webkit-transition:all 0.2s;
  381. -moz-transition:all 0.2s;
  382. -ms-transition:all 0.2s;
  383. -o-transition:all 0.2s;
  384. transition:all 0.2s;
  385. }
  386.  
  387. .tags a {margin-right:8px;}
  388.  
  389.  
  390. /*sidebar*/
  391.  
  392. .sidebar {
  393. position:fixed;
  394. width:125px;
  395. margin-left:-280px;
  396. border-right:1px solid #eee;
  397. padding-right:20px;
  398. top:100px;
  399. -webkit-animation-name: fade-in;
  400. -webkit-animation-duration: 1.5s;
  401. }
  402.  
  403. .si {
  404. width:40px;
  405. height:40px;
  406. margin-left:85px;
  407. margin:bottom:10px;
  408. z-index:999;
  409. }
  410.  
  411. .si img {
  412. width:40px;
  413. height:40px;
  414. border-radius:100px;
  415. margin-bottom:10px;
  416. transition:0.4s ease-in-out;
  417. -webkit-transition:0.4s ease-in-out;
  418. -moz-transition:0.4s ease-in-out;
  419. }
  420.  
  421. .si img:hover{opacity:.4;}
  422.  
  423. .title {
  424. font-size:11px;
  425. letter-spacing:1.5px;
  426. text-transform:uppercase;
  427. font-weight:normal;
  428. width:125px;
  429. margin-bottom:5px;
  430. color:#e1efff;
  431. text-align:right;
  432. }
  433.  
  434. .title a {color:{color:title};}
  435. .title a:hover {opacity:.5;}
  436.  
  437. .description {
  438. color:{color:text};
  439. font-family:{select:font};
  440. width:125px;
  441. text-align:right;
  442. }
  443.  
  444.  
  445. .links {
  446. margin-top:15px;
  447. border-top:1px solid #eee;
  448. padding:10px 0;
  449. text-align:right;
  450. text-transform:uppercase;
  451. font-size:8px;
  452. letter-spacing:1px;
  453. color:{color:links};
  454. }
  455.  
  456. .links a {margin-left:5px;}
  457.  
  458. .links .search .query {
  459. margin-top:7px;
  460. border:0;
  461. outline:0;
  462. text-align:right;
  463. background-color: transparent;
  464. color:{color:search};
  465. font-family:{select:font};
  466. font-size:8px;
  467. text-transform:uppercase;
  468. letter-spacing:1px;
  469. -webkit-transition: all 0.3s ease-in-out;
  470. -moz-transition: all 0.3s ease-in-out;
  471. -o-transition: all 0.3s ease-in-out;
  472. -ms-transition: all 0.3s ease-in-out;
  473. transition: all 0.3s ease-in-out;
  474. }
  475.  
  476. ::-webkit-input-placeholder {color: #dad8d8;}
  477. :-moz-placeholder {color: #dad8d8; opacity:1;}
  478. ::-moz-placeholder {color: #dad8d8; opacity:1;}
  479. :-ms-input-placeholder {color: #dad8d8;}
  480. input:focus::-webkit-input-placeholder {color: transparent;}
  481. input:focus:-moz-placeholder {color: transparent;}
  482. input:focus::-moz-placeholder {color: transparent;}
  483. input:focus:-ms-input-placeholder { color: transparent;}
  484.  
  485. .lb {margin-top:5px;}
  486.  
  487.  
  488.  
  489. /*notes*/
  490.  
  491. ol.notes {
  492. padding:0px;
  493. margin:-25px 0px 0px 0px;
  494. list-style-type:none;
  495. text-transform:uppercase;
  496. font-size:8px;
  497. letter-spacing:1px;
  498. max-width:{select:post width};
  499. max-height:200px;
  500. overflow-x:hidden;
  501. overflow-y:scroll;
  502. }
  503.  
  504. ol.notes li.note {padding:1px;}
  505.  
  506. ol.notes li.note img.avatar {
  507. display:none!important;
  508. vertical-align:-4px;
  509. margin-right:10px;
  510. width:16px;
  511. height:16px;
  512. }
  513.  
  514. ol.notes li.note span.action {font-weight:none;}
  515.  
  516. ol.notes li.note .answer_content {font-weight:normal;}
  517.  
  518. ol.notes li.note blockquote {
  519. padding:5px 10px;
  520. margin:0px 5px;
  521. }
  522.  
  523. ol.notes li.note blockquote a {text-decoration:none;}
  524.  
  525. .ph {
  526. margin-top:15px;
  527. text-transform:none;
  528. font-size:10px;
  529. }
  530.  
  531. a.more_notes_link {
  532. display:block;
  533. text-align:left;
  534. border:0;
  535. }
  536.  
  537. /*quotes*/
  538.  
  539. .quote {
  540. text-transform:none;
  541. font-size:12px;
  542. font-weight:normal;
  543. text-align:left;
  544. }
  545.  
  546. .quotesource {
  547. text-align:left;
  548. text-transform:uppercase;
  549. letter-spacing:1px;
  550. font-size:8px;
  551. margin-top:10px;
  552. }
  553.  
  554. .quotesource a{
  555. text-transform:uppercase;
  556. font-size:8px;
  557. letter-spacing:1.5px;
  558. border-bottom:1px solid #eee;
  559. }
  560.  
  561. /*chats*/
  562.  
  563. .chat {
  564. line-height:20px;
  565. list-style:none;
  566. }
  567.  
  568. .line.odd {
  569. background:#ffffff;
  570. border-top:1px solid #eee;
  571. margin-bottom:2px;
  572. padding:5px;
  573. list-style:none;
  574. font-size:10px;
  575. }
  576.  
  577. .line.odd:nth-child(1) {border:none;}
  578.  
  579. .line.even {
  580. background:#ffffff;
  581. border-top:1px solid #eee;
  582. margin-bottom:2px;
  583. padding:5px;
  584. list-style:none;
  585. font-size:10px;
  586. }
  587.  
  588. .label {
  589. padding-right:1px;
  590. text-transform:uppercase;
  591. letter-spacing:1px;
  592. font-weight:normal;
  593. color:{color:title};
  594. }
  595.  
  596. /*questions*/
  597.  
  598. .question {
  599. text-transform:none;
  600. font-style:italic;
  601. font-weight:normal;
  602. text-align:left;
  603. margin-top:-10px;
  604. padding-left:5px;
  605. }
  606.  
  607. .asker {
  608. text-align:left;
  609. text-transform:uppercase;
  610. font-style:normal;
  611. letter-spacing:1px;
  612. font-size:8px;
  613. margin-top:10px;
  614. display:inline;
  615. }
  616.  
  617. .asker a, .answer a{border-bottom:1px solid #eee;}
  618. .answer {margin-top:5px};
  619.  
  620.  
  621. /*audio*/
  622.  
  623. .tumblr_audio_player {
  624. height:50px;
  625. width:{select:post width};
  626. color:#fff;
  627. color:transparent;
  628. }
  629.  
  630. .audiowrapper {
  631. position:relative;
  632. display:inline-block;
  633. }
  634.  
  635. .audio {
  636. height:100px;
  637. background:#fff;
  638. border:1px solid #eee;
  639. }
  640.  
  641. .audio-album {
  642. position:absolute;
  643. width:30px;
  644. opacity:.0;
  645. }
  646.  
  647. .audio-player {
  648. margin-left:auto;
  649. margin-right:35px;
  650. border-radius:5px 5px 5px 5px;
  651. opacity:1;
  652. filter:alpha(opacity=100);
  653. border:35px solid #fff;
  654. width:30px;
  655. height:30px;
  656. overflow:hidden;
  657. position:absolute;
  658. z-index:2;
  659. }
  660.  
  661. .audio-playerhug {
  662. position: absolute;
  663. left:2px;
  664. z-index:1;
  665. }
  666.  
  667. .audio-info {
  668. width:calc({select:post width} - 100px);
  669. margin-left:50px;
  670. height:100%;
  671. line-height:180%;
  672. padding:0px 25px 0px 25px;
  673. text-transform:lowercase;
  674. text-align:right;
  675. display: table;
  676. }
  677.  
  678. .audio-info p {
  679. display: table-cell;
  680. vertical-align: middle;
  681. text-align:right;
  682. border-left:1px solid #eee;
  683. }
  684.  
  685. .playerbutton {
  686. position:relative;
  687. width:30px;
  688. height:35px;
  689. background:transparent;
  690. overflow:hidden;
  691. }
  692.  
  693.  
  694. /*pagi*/
  695.  
  696. .pagination {
  697. width:{select:post width};
  698. text-transform:uppercase;
  699. letter-spacing:0.5px;
  700. text-align:right;
  701. }
  702.  
  703.  
  704. /*credit*/
  705.  
  706. .credit {
  707. font-size:10px;
  708. position:fixed;
  709. font-weight:normal;
  710. bottom:10px;
  711. right:10px;
  712. z-index:10;
  713. text-transform:uppercase;
  714. text-align:right;
  715. letter-spacing:1px;
  716. padding:1px 5px 1px 5px;
  717. transition:all .2s;
  718. }
  719.  
  720. .credit a {
  721. color:{color:links};
  722. text-decoration:none;
  723. }
  724.  
  725. .credit a:hover {
  726. color:{color:links hover};
  727. text-decoration:none;
  728. }
  729.  
  730.  
  731. /*fade-in*/
  732.  
  733. @-webkit-keyframes fade-in {
  734. 0% { opacity: 0; }
  735. 50% { opacity: 0; }
  736. 100% { opacity: 1; }
  737. }
  738.  
  739.  
  740. @-moz-keyframes fade-in {
  741. 0% { opacity: 0; }
  742. 50% { opacity: 0; }
  743. 100% { opacity: 1; }
  744. }
  745.  
  746.  
  747. @keyframes fade-in {
  748. 0% { opacity: 0; }
  749. 50% { opacity: 0; }
  750. 100% { opacity: 1; }
  751. }
  752.  
  753. /************** FLAGS UPDATES TAB **************/
  754. /* tutorial by deanlirium|tumblr (clarence.tk) */
  755.  
  756. #flags {
  757. position:fixed;
  758. top:-10px;
  759. left:20px; /* distance from the left of the page - adjust as you wish! */
  760. text-align:center;
  761. text-transform:uppercase; /* the text is in all caps - delete this line and it won't be */
  762. color:#8C8C8C; /* change text color: use sites like http://www.colorpicker.com/ or the tumblr thing, copy the code it gives you and paste it! remember the #! */
  763. font-size:8px; /* adjust font size */
  764. letter-spacing:1px;
  765. z-index:2147483607;
  766. font-family:calibri;}
  767.  
  768. /* okay real talk - this updates tab is currently to the top left of your page - if you want to move it to right, just change every 'left' into 'right' and 'right' into 'left'! and I mean every. single. one. Such as the left:100px; above will become right:100px; there are also a bunch of 'margin-left's here below, so change them to margin-right. look for left and right stuff and switch.
  769. On the contrary, if you want to move it to the bottom of the page, switch every 'top' with 'bottom' and vice versa. That's really it! c: */
  770.  
  771. #flag1 {
  772. border:solid 6px #666666; /* flag color */
  773. border-bottom:solid 6px transparent; /* IMPORTANT! -- to make the flag thicker increase the border and border-right value; it looks better if they both have the same number! */
  774. padding-top:20px;
  775. width:0px;
  776. height:20px; /* increase or decrease to change the lenght of the CLOSED flag */
  777. position:absolute;
  778. -moz-transition:all 0.7s ease-out;
  779. -webkit-transition:all 0.7s ease-out;
  780. -o-transition:all 0.7s ease-out;}
  781.  
  782. #flag1:hover {
  783. height:180px;} /* lenght of the OPEN flag */
  784.  
  785. #upd1 {
  786. position:absolute;
  787. width:110px;
  788. height:200px; /* adjust to fit the text if you write a lot! */
  789. padding:10px;
  790. padding-top:60px; /* adjust this if you've changed the length of the closed flag */
  791. top:-270px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  792. margin-left:6px; /* keep this number equal to the 'border' value for the flag */
  793. opacity:0;
  794. overflow:hidden;
  795. -moz-transition:all 0.7s ease-out;
  796. -webkit-transition:all 0.7s ease-out;
  797. -o-transition:all 0.7s ease-out;}
  798.  
  799. #flag1:hover #upd1{
  800. top:0px;
  801. opacity:1;}
  802.  
  803. /* following is the coding for the other flags - same as above! */
  804.  
  805. #flag2 {
  806. border:solid 6px #8C8C8C;
  807. margin-left:20px;
  808. position:absolute;
  809. border-bottom:solid 6px transparent;
  810. padding-top:20px;
  811. width:0px;
  812. height:20px;
  813. -moz-transition:all 0.7s ease-out;
  814. -webkit-transition:all 0.7s ease-out;
  815. -o-transition:all 0.7s ease-out;}
  816.  
  817. #flag2:hover {
  818. height:180px;}
  819.  
  820. #upd2 {
  821. position:absolute;
  822. width:110px;
  823. padding:10px;
  824. padding-top:60px;
  825. height:200px; /* adjust to fit the text if you write a lot! */
  826. top:-270px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  827. overflow:hidden;
  828. margin-left:6px;
  829. opacity:0;
  830. -moz-transition:all 0.7s ease-out;
  831. -webkit-transition:all 0.7s ease-out;
  832. -o-transition:all 0.7s ease-out;}
  833.  
  834. #flag2:hover #upd2{
  835. top:0px;
  836. opacity:1;}
  837.  
  838. /*if you want more flags, just copy the part of the code below and change the numbers - then increase the margin-left value for the #flag(number) adding 20px each new flag! copy from here: */
  839.  
  840. #flag3 {
  841. border:solid 6px #B3B3B3;
  842. position:absolute;
  843. margin-left:40px;
  844. border-bottom:solid 6px transparent;
  845. padding-top:20px;
  846. height:20px;
  847. width:0px;
  848. -moz-transition:all 0.7s ease-out;
  849. -webkit-transition:all 0.7s ease-out;
  850. -o-transition:all 0.7s ease-out;}
  851.  
  852. #flag3:hover {
  853. height:180px;}
  854.  
  855. #upd3 {
  856. position:absolute;
  857. width:110px;
  858. padding:10px;
  859. padding-top:60px;
  860. height:200px; /* adjust to fit the text if you write a lot! */
  861. top:-270px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  862. overflow:hidden;
  863. margin-left:6px;
  864. opacity:0;
  865. -moz-transition:all 0.7s ease-out;
  866. -webkit-transition:all 0.7s ease-out;
  867. -o-transition:all 0.7s ease-out;}
  868.  
  869. #flag3:hover #upd3{
  870. top:0px;
  871. opacity:1;}
  872.  
  873. #flag4 {
  874. border:solid 6px #D9D9D9;
  875. position:absolute;
  876. margin-left:60px;
  877. border-bottom:solid 6px transparent;
  878. padding-top:20px;
  879. height:20px;
  880. width:0px;
  881. -moz-transition:all 0.7s ease-out;
  882. -webkit-transition:all 0.7s ease-out;
  883. -o-transition:all 0.7s ease-out;}
  884.  
  885. #flag4:hover {
  886. height:180px;}
  887.  
  888. #upd4 {
  889. position:absolute;
  890. width:110px;
  891. padding:10px;
  892. padding-top:60px;
  893. height:200px; /* adjust to fit the text if you write a lot! */
  894. top:-270px; /* IMPORTANT! keep this number equal to the sum of the padding-top, padding and height values!!!! */
  895. overflow:hidden;
  896. margin-left:6px;
  897. opacity:0;
  898. -moz-transition:all 0.7s ease-out;
  899. -webkit-transition:all 0.7s ease-out;
  900. -o-transition:all 0.7s ease-out;}
  901.  
  902. #flag4:hover #upd3{
  903. top:0px;
  904. opacity:1;}
  905.  
  906. /* to here */
  907.  
  908.  
  909.  
  910. </style>
  911.  
  912.  
  913.  
  914.  
  915. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  916. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  917. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  918. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  919. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  920. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  921. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  922. <script>
  923. $(document).ready(function(){
  924. $('.photo-slideshow').pxuPhotoset({
  925. lightbox: true,
  926. rounded: false,
  927. gutter: '2px',
  928. borderRadius: '0px',
  929. photoset: '.photo-slideshow',
  930. photoWrap: '.photo-data',
  931. photo: '.pxu-photo'
  932. });
  933. });
  934. $(document).ready(function(){
  935. $(".notes").hide();
  936. $(".ph").show();$('.ph').toggle(function(){
  937. $(".notes").slideDown(function(){});
  938. },function(){
  939. $(".notes").slideUp(function(){});
  940. });
  941. });
  942.  
  943. $(document).ready(function(){
  944. $(".lb").hide();
  945. $(".lm").show();$('.lm').toggle(function(){
  946. $(".lb").slideDown(function(){});
  947. },function(){
  948. $(".lb").slideUp(function(){});
  949. });
  950. });
  951. // minimal soundcloud player � shythemes.tumblr
  952. $(document).ready(function(){
  953. var color = '{color:title}'; // color of play button (hex)
  954. $('.soundcloud_audio_player').each(function(){
  955. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  956. });
  957. });
  958.  
  959. </script>
  960.  
  961. </head>
  962.  
  963. <body>
  964.  
  965.  
  966.  
  967. <div class="container">
  968.  
  969. <div class="credit">
  970. <a title="solitudethemes" href="http://solitudethemes.tumblr.com">S;</a>
  971. </div>
  972.  
  973.  
  974. <div class="sidebar">
  975.  
  976. {block:ifsidebarimage}
  977. <a href="/" class="si"><img src="{image:sidebar image}">
  978. </a>
  979. {/block:ifsidebarimage}
  980.  
  981. <div class="title"><a href="/">{title}</a></div>
  982.  
  983. <div class="description">
  984.  
  985. {description}
  986.  
  987. </div>
  988.  
  989. <div class="links">
  990.  
  991. <a href="/">{text:home title}</a>
  992. <a href="/about">{text:about title}</a>
  993. <a href="#" class="lm">{text:more title}</a>
  994.  
  995. <div class="lb">
  996. <a href="{text:link 1}">{text:link 1 title}</a>
  997. <a href="{text:link 2}">{text:link 2 title}</a>
  998. <a href="{text:link 3}">{text:link 3 title}</a>
  999. </div>
  1000.  
  1001. <form action="/search" method="get" class="search"><input type="text" name="q" value="" class="query" placeholder="search"></form>
  1002.  
  1003. </div>
  1004.  
  1005. </div>
  1006.  
  1007.  
  1008. <div class="entries">
  1009. {block:Posts}
  1010. <div class="posts">
  1011.  
  1012. {block:Text}
  1013. <h1>{block:Title}{Title}{/block:Title}</h1>
  1014. <div class="text">
  1015. {Body}
  1016. </div>
  1017. {/block:Text}
  1018.  
  1019.  
  1020. {block:Photo}
  1021. {LinkOpenTag}<img src="{PhotoURL-highres}">{LinkCloseTag}
  1022. {/block:Photo}
  1023.  
  1024.  
  1025. {block:Photoset}
  1026. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1027. {/block:Photoset}
  1028.  
  1029.  
  1030. {block:Quote}{block:Source}<div class="quotesource">{Source}</div>
  1031. {/block:Source}</p>
  1032. <div class="quote">{Quote}</div>
  1033. {/block:Quote}
  1034.  
  1035.  
  1036. {block:Link}
  1037. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1038. {block:Description}{Description}{/block:Description}
  1039. {/block:Link}
  1040.  
  1041.  
  1042. {block:Chat}
  1043. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1044. {/block:Chat}
  1045.  
  1046.  
  1047. {block:Audio}
  1048. <div class="audio">
  1049. {block:AlbumArt}
  1050. <img class="audio-album" src="{AlbumArtURL}">
  1051. {/block:AlbumArt}
  1052.  
  1053.  
  1054. {block:AudioPlayer}
  1055. <div class="audio-player">
  1056. <div class="audio-playerhug">
  1057. {AudioPlayerWhite}
  1058. </div></div>
  1059. {/block:AudioPlayer}
  1060.  
  1061.  
  1062. <div class="audio-info">
  1063. <p>{block:TrackName}
  1064. <b>{TrackName}</b><br>
  1065. {/block:TrackName}
  1066. {block:Artist}
  1067. {Artist}<br>
  1068. {/block:Artist}
  1069. </p>
  1070. </div>
  1071. </div>
  1072. {/block:Audio}
  1073.  
  1074.  
  1075. {block:Video}
  1076. <div class="video">{Video-500}</div>
  1077. {/block:Video}
  1078.  
  1079.  
  1080. {block:Answer}
  1081. <div class="question">
  1082. <div class="asker">{Asker} : </div>
  1083. {Question}</div><br>
  1084. <div class="answer">
  1085. {Answer}</div>
  1086. {/block:Answer}
  1087.  
  1088. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1089.  
  1090.  
  1091. {block:IndexPage}
  1092. <div class="info">
  1093. {block:Date}
  1094. <b><a href="{Permalink}">{DayOfMonthWithZero}.{MonthNumber}.{year}</a></b>
  1095. {/block:Date}
  1096.  
  1097. &nbsp;
  1098. {block:NoteCount}
  1099. &nbsp;
  1100. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1101. &nbsp;&nbsp;
  1102. {/block:NoteCount}
  1103.  
  1104. <a href="{reblogurl}" target="_blank">reblog</a>
  1105. <br>
  1106.  
  1107. {block:HasTags}
  1108. <div class="tags">
  1109. # {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1110. </div>
  1111. {/block:HasTags}
  1112.  
  1113.  
  1114. </div>
  1115. {/block:IndexPage}
  1116.  
  1117. {block:PermalinkPage}
  1118. <div class="pinfo">
  1119. {block:Date}posted on {Month} {DayOfMonthWithZero}{DayOfMonthSuffix} at <a href="{Permalink}" >{12Hour}:{Minutes} {AmPm}</a>{/block:Date}
  1120.  
  1121. {block:RebloggedFrom}<br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a>&nbsp;&nbsp; via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  1122.  
  1123. {block:HasTags}<br>
  1124. Indexed: {block:Tags} <a href="{TagURL}">{Tag}</a>,&nbsp; {/block:Tags}
  1125. {/block:HasTags}</p>
  1126.  
  1127. {block:PostNotes}
  1128. <a href="#" class="ph">{NoteCountWithLabel}</a></div>
  1129. {/block:PostNotes}
  1130. {/block:PermalinkPage}
  1131.  
  1132. </div>
  1133.  
  1134. {block:permalinkpage}
  1135. {block:PostNotes}
  1136. <div class="pagenotes">
  1137. {PostNotes}
  1138. </div>
  1139. {/block:PostNotes}
  1140. {/block:permalinkpage}
  1141.  
  1142. {/block:Posts}
  1143.  
  1144. <div class="pagination">
  1145. {block:Pagination}
  1146. {block:PreviousPage}
  1147. <a href="{PreviousPage}">back /</a>{/block:PreviousPage}&nbsp;
  1148.  
  1149. {block:NextPage}
  1150. <a href="{NextPage}">forth</a>
  1151. {/block:NextPage}
  1152. {/block:Pagination}
  1153. </div>
  1154.  
  1155.  
  1156. {block:ContentSource}
  1157. <!---{SourceURL}{block:SourceLogo}<img src=�{BlackLogoURL}�
  1158. width=�{LogoWidth}� height=�{LogoHeight}� alt=�{SourceTitle}� />
  1159. {/block:SourceLogo}
  1160. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --->
  1161. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  1162.  
  1163. <div id="flags">
  1164. <div id="flag1"><div id="upd1">
  1165.  
  1166. write here for the first flag
  1167.  
  1168. </div></div>
  1169.  
  1170. <div id="flag2"><div id="upd2">
  1171.  
  1172. here for the second flag
  1173.  
  1174. </div></div>
  1175.  
  1176. <!---- if you want more flags, copy from here ---->
  1177.  
  1178. <div id="flag3"><div id="upd3">
  1179.  
  1180. here for the third one
  1181.  
  1182. </div></div>
  1183.  
  1184. <div id="flag4"><div id="upd4">
  1185.  
  1186. here for the third one
  1187.  
  1188. </div></div>
  1189.  
  1190.  
  1191. <!---- to here and change the numbers according to your css! ---->
  1192.  
  1193. <!---- thanks for passing by and using this tutorial you're raaaaaaaaad c: ---->
  1194.  
  1195. </div>
  1196.  
  1197.  
  1198. </body>
  1199.  
  1200.  
  1201. </div>
  1202. </div>
  1203. </html>
  1204.  
  1205. <!-- ABOUT PAGE 02
  1206. STARLIGHT
  1207. BY STARMORA
  1208.  
  1209. PLEASE DON'T REMOVE THE CREDIT. -->
  1210.  
  1211. <html>
  1212.  
  1213. <head>
  1214. <title>{Title}</title>
  1215. <link rel="shortcut icon" href="{Favicon}">
  1216.  
  1217. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  1218.  
  1219. <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  1220. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  1221.  
  1222.  
  1223. <style type="text/css">
  1224.  
  1225. body {
  1226. background-color:#f6f6f6;
  1227. color:#666;
  1228. }
  1229.  
  1230.  
  1231. /*scrollbar*/
  1232. ::-webkit-scrollbar-thumb:vertical {
  1233. background: #f6d9d3;
  1234. border:2px solid white;
  1235. height: 80px;
  1236. }
  1237.  
  1238. ::-webkit-scrollbar {
  1239. height: 10px;
  1240. width: 5px;
  1241. }
  1242.  
  1243.  
  1244. /*selection*/
  1245. ::selection {
  1246. color: #ffb7b7;
  1247. background:transparent;
  1248. }
  1249. ::-moz-selection {
  1250. background: transparent;
  1251. colo
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!