API tools faq
paste
Petra1999

BUTTON THEME | cloudythms.tumblr.com

Petra1999
Jul 9th, 2018
4,560
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 39.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><head><link rel="alternate" type="application/rss+xml" href="{RSS}">{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  2.  
  3. <!-----------------------------------------------------------------------
  4.  
  5.  
  6.         {   cloudythms
  7.                      blog theme "button"    }
  8.            
  9.          
  10.   https://cloudythms.tumblr.com/
  11.        contact me if you have questions!
  12.  
  13.  
  14.  
  15.  
  16. .....................  RULES  .....................
  17.    
  18. - You may move, but not remove the credit
  19. - Leave this comment
  20. - Edit the rest as much as you want
  21. - Do not redistribute without permission / use as base
  22. - Do not claim as your own
  23.  
  24.  
  25.  
  26.  
  27. .....................  GUIDE  .....................
  28.  
  29. - correct place to paste html code: ctrl+f "pastehtmlhere"
  30. - correct place to paste css  code: ctrl+f "pastecsshere"
  31.  
  32.  
  33.  
  34.  
  35. ..................... CREDITS .....................
  36.    
  37. - theme:                https://cloudythms.tumblr.com/
  38. - base code:            https://cloudythms.tumblr.com/
  39.  
  40. - svg icons:            https://www.flaticon.com/
  41. - icon font:            https://fontawesome.io/
  42. - fonts:                https://fonts.google.com/
  43.  
  44. - source/via fix:       https://neothm.com/post/137707520574/
  45. - unnest captions:      https://neothm.com/post/149023525244/
  46. - audio post style:     https://lmthemeslp-tut.tumblr.com/audio
  47. - pxu photosets:        https://shythemes.tumblr.com/post/113728114758/
  48. - tag search box:       https://shythemes.tumblr.com/post/138692201618/
  49. - video resizer:        https://shythemes.tumblr.com/post/134536748863/
  50. - text like/reblog:     https://shythemes.tumblr.com/post/154249052918/
  51. - tumblr controls:      https://cyantists.tumblr.com/post/163728517915/
  52. - smoothscroll:         https://zacharyfury.tumblr.com/post/138066236021/
  53. - tooltips:             https://tutorial-baby.tumblr.com/post/74581118284/
  54.  
  55. - other resources:      https://cloudythms.tumblr.com/res
  56.  
  57. ---------------------------------------------------------------------->
  58.  
  59.  
  60. <!-- Text that appears on the tab / browser window
  61.    Change the {Title} to any text if you want to. -->
  62. <title>{Title}</title>
  63.  
  64. <!-- Favicon (little image that's shown in the browser)
  65.    Change {Favicon} to your image URL. Leave the "". -->
  66. <link rel="shortcut icon" href="{Favicon}"/>
  67.  
  68.  
  69.  
  70. <!-- --------------------------- SCRIPTS --------------------------- -->
  71. <link href="https://static.tumblr.com/tpbx7ye/OYupblc9f/cloudythms.css" rel="stylesheet">
  72.  
  73. <!-- jQuery -->
  74. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  75.  
  76. <!-- Fonts -->
  77. <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Lora|Open+Sans|Roboto|Roboto+Mono|Roboto+Slab|Karla&amp;subset=latin-ext" rel="stylesheet">
  78. <link href="https://fonts.googleapis.com/css?family=Bad+Script|Calligraffitti|Caveat|Cedarville+Cursive|Courgette|Dancing+Script|Dawning+of+a+New+Day|Euphoria+Script|Homemade+Apple|Just+Me+Again+Down+Here|Kaushan+Script|La+Belle+Aurore|Meddon|Nanum+Pen+Script|Nothing+You+Could+Do|Pacifico|Reenie+Beanie|Sacramento|Satisfy|Zeyada&amp;subset=latin-ext" rel="stylesheet">
  79.  
  80. <!-- Icon Fonts -->
  81. <!-- FontAwesome -->
  82. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  83. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  84. <!-- Ionicons --> <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
  85. <!-- Linearicons --> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  86.  
  87. <!-- Smooth Scroll -->
  88. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  89.  
  90. <!-- Video Resizer -->
  91. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  92. <style>/*
  93.     .tumblr_video_container {
  94.         margin-left:30px;
  95.     }*/
  96. </style>
  97.  
  98.  
  99. <!-- Search -->
  100. <script>
  101. $(document).ready(function(){
  102.    $('.search').submit(function(event){
  103.        var value = $('input:first').val();
  104.        location.replace('https://{Name}.tumblr.com/tagged/' + value);
  105.    });
  106. });
  107. </script>
  108.  
  109.  
  110. <!-- Tooltips -->
  111. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  112. <script>
  113. (function($){
  114. $(document).ready(function(){
  115. $("a[title]").style_my_tooltips({
  116. tip_follows_cursor:true,
  117. tip_delay_time:100, /* put a higher number for more delay */
  118. tip_fade_speed:300, /* put a higher number for a slower fade */
  119. attribute:"title" /* recommended: delay:10-100 fade:200-600 */
  120. });
  121. });
  122. })(jQuery);
  123. </script>
  124. <style>
  125. .tooltip{
  126. display: inline;
  127. position: relative;
  128. }
  129. #s-m-t-tooltip {
  130.     max-width:300px;
  131.     border-radius: 0px;
  132.     padding:2px 4px 3px 4px;
  133.     margin:20px 7px -2px 20px;
  134.     background-color:{color:content background};
  135.     border:1px solid #E0E0E0;
  136.     font-size:9px;
  137.     letter-spacing:0.5px;
  138.     color:{color:text};
  139.     z-index:9999999999999999;
  140.     text-transform:uppercase;
  141.     {block:IfRoundCorners}
  142.     border-radius:4px;
  143.     {/block:IfRoundCorners}
  144. }
  145. </style>
  146.  
  147.  
  148. <!-- un-nest tumblr captions -->
  149. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  150. <script> $(function(){  $('.post').unnest({
  151.     yourCaption: ".caption",
  152.     wrapName: ".tumblr_parent",
  153.     newCaptionUsername: true,
  154.     originalPostCaptionUsername: false,
  155.     tumblrAvatars: true,
  156.     tumblrAvatarClass: ".tumblr_avatar",
  157.     usernameColon: false
  158.     // .tumblr_blog
  159.   }); }); </script>
  160.  
  161.  
  162. <!-- pixel union photosets -->
  163. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  164. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  165. <script>
  166. $(document).ready(function(){
  167.    $('.photo-slideshow').pxuPhotoset({
  168.        lightbox: true,
  169.        rounded: false,
  170.        gutter: '5px',
  171.        borderRadius: '0px',
  172.        photoset: '.photo-slideshow',
  173.        photoWrap: '.photo-data',
  174.        photo: '.pxu-photo'
  175.    });
  176. });
  177. </script>
  178.  
  179.  
  180. <!-- tumblr controls -->
  181. <style>
  182. iframe.tmblr-iframe {
  183.     z-index:99999999999999!important;
  184.     top:-2px!important;
  185.     right:0!important;
  186.     opacity:0;
  187.     padding-right:38px;
  188.         filter:invert(1) contrast(150%);
  189.         -webkit-filter:invert(1) contrast(150%);
  190.      transition: all 0.5s linear 0s;
  191.      transform:scale(0.65);
  192.      transform-origin:100% 0;
  193.     -webkit-transform:scale(0.65);
  194.     -webkit-transform-origin:100% 0;
  195.     -ms-transform:scale(0.65);
  196.     -ms-transform-origin:100% 0;
  197. }
  198.  
  199. iframe.tmblr-iframe:hover {
  200.     opacity:0.6!important;
  201. }
  202.  
  203. {block:IfNotShowTumblrControls}
  204. iframe.tmblr-iframe, iframe.tmblr-iframe:hover, .hcontrols {
  205.     display:none;
  206. }
  207. {/block:IfNotShowTumblrControls}
  208.    
  209. .hcontrols {
  210.     position:fixed;
  211.     top:0;
  212.     right:0;
  213.     z-index:999999999;
  214. }
  215.  
  216. .hcontrols svg {
  217.     width:25px;
  218.     height:20px;
  219.     padding:12px;
  220.     padding-right:0px;
  221. }
  222.  
  223. .hcontrols svg path {
  224.     fill:rgba(0,0,0,0.5);
  225. }
  226. </style>
  227.  
  228.  
  229. <!-- soundcloud player -->
  230. <script>
  231. // minimal soundcloud player © shythemes.tumblr
  232. $(document).ready(function(){
  233.    var color = '#efefef'; // color of play button (hex)
  234.    $('.soundcloud_audio_player').each(function(){
  235.        $(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%' });
  236.    });
  237. });
  238. </script>
  239.  
  240.  
  241.  
  242. <!-- --------------------------- OPTIONS --------------------------- -->
  243.  
  244.  
  245. <!-- Images -->
  246. <meta name="image:Background" content="0"/>
  247.  
  248. <!-- Colors -->
  249. <meta name="color:Background" content="#f5f5f5" />
  250. <meta name="color:Text" content="#252525" />
  251. <meta name="color:Content Background" content="#ededed" />
  252. <meta name="color:Accent" content="#45966e" />
  253.  
  254. <!-- Dropdowns -->
  255. <meta name="select:Dark Theme" content="white" title="off">
  256. <meta name="select:Dark Theme" content="black" title="on">
  257.  
  258. <meta name="select:Post Width" content="500px" title="500px">
  259. <meta name="select:Post Width" content="400px" title="400px">
  260. <meta name="select:Post Width" content="250px" title="250px">
  261.  
  262. <meta name="select:Font Size" content="12px" title="medium">
  263. <meta name="select:Font Size" content="10px" title="tiny">
  264. <meta name="select:Font Size" content="11px" title="small">
  265. <meta name="select:Font Size" content="13px" title="big">
  266. <meta name="select:Font Size" content="14px" title="huge">
  267.  
  268. <meta name="select:Font" content="Karla" title="Karla">
  269. <meta name="select:Font" content="Open Sans" title="Open Sans">
  270. <meta name="select:Font" content="Roboto" title="Roboto">
  271. <meta name="select:Font" content="Roboto Slab" title="Roboto Slab">
  272. <meta name="select:Font" content="Lora" title="Lora">
  273. <meta name="select:Font" content="Fira Mono" title="Fira Mono">
  274. <meta name="select:Font" content="Roboto Mono" title="Roboto Mono">
  275.  
  276. <meta name="select:Link 1 Icon" content="user" title="Person">
  277. <meta name="select:Link 1 Icon" content="tag" title="Tag">
  278. <meta name="select:Link 1 Icon" content="star" title="Star">
  279. <meta name="select:Link 1 Icon" content="bars" title="List">
  280. <meta name="select:Link 1 Icon" content="link" title="Link">
  281. <meta name="select:Link 2 Icon" content="user" title="Person">
  282. <meta name="select:Link 2 Icon" content="tag" title="Tag">
  283. <meta name="select:Link 2 Icon" content="star" title="Star">
  284. <meta name="select:Link 2 Icon" content="bars" title="List">
  285. <meta name="select:Link 2 Icon" content="link" title="Link">
  286. <meta name="select:Link 3 Icon" content="user" title="Person">
  287. <meta name="select:Link 3 Icon" content="tag" title="Tag">
  288. <meta name="select:Link 3 Icon" content="star" title="Star">
  289. <meta name="select:Link 3 Icon" content="bars" title="List">
  290. <meta name="select:Link 3 Icon" content="link" title="Link">
  291.  
  292. <!-- Options -->
  293. <meta name="if:Show Tumblr Controls" content="1"/>
  294. <meta name="if:Repeat Background Image" content="0"/>
  295. <meta name="if:Round Corners" content="1"/>
  296. <meta name="if:Narrow Sidebar" content="0"/>
  297. <meta name="if:Show Captions" content="1"/>
  298. <meta name="if:Show Submit Link" content="0"/>
  299. <meta name="if:Show Archive Link" content="0"/>
  300.  
  301. <!-- Text -->
  302. <meta name="text:Left Tab Text" content="about"/>
  303. <meta name="text:Right Tab Text" content="navigation"/>
  304.  
  305. <meta name="text:Home Link Text" content="Index"/>
  306. <meta name="text:Ask Link Text" content="Contact"/>
  307. <meta name="text:Ask Link" content="/ask"/>
  308. <meta name="text:Link1 Title" content="custom link"/>
  309. <meta name="text:Link1 URL" content="/link1"/>
  310. <meta name="text:Link2 Title" content=""/>
  311. <meta name="text:Link2 URL" content="/link2"/>
  312. <meta name="text:Link3 Title" content=""/>
  313. <meta name="text:Link3 URL" content="/link3"/>
  314.  
  315. <meta name="text:Tag1 Title" content="example link"/>
  316. <meta name="text:Tag1 URL" content="/tagged/tag"/>
  317. <meta name="text:Tag2 Title" content=""/>
  318. <meta name="text:Tag2 URL" content="/tagged/tag"/>
  319. <meta name="text:Tag3 Title" content=""/>
  320. <meta name="text:Tag3 URL" content="/tagged/tag"/>
  321. <meta name="text:Tag4 Title" content=""/>
  322. <meta name="text:Tag4 URL" content="/tagged/tag"/>
  323. <meta name="text:Tag5 Title" content=""/>
  324. <meta name="text:Tag5 URL" content="/tagged/tag"/>
  325. <meta name="text:Tag6 Title" content=""/>
  326. <meta name="text:Tag6 URL" content="/tagged/tag"/>
  327. <meta name="text:Tag7 Title" content=""/>
  328. <meta name="text:Tag7 URL" content="/tagged/tag"/>
  329. <meta name="text:Tag8 Title" content=""/>
  330. <meta name="text:Tag8 URL" content="/tagged/tag"/>
  331.  
  332. <!-- ---------------------------------------------------------------- -->
  333. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  334. <!-- ---------------------------------------------------------------- -->
  335. <style>
  336.  
  337.  
  338.  
  339. /****************************** basics ******************************/
  340.  
  341.  
  342. body {
  343.     background-color:{color:background};
  344.     color:{color:text};  
  345.     font-family: "{select:Font}", Arial, sans-serif;
  346.     font-size: {select:Font Size};
  347.     text-align:left;
  348.     margin:0;
  349.    
  350.     /* background image */
  351.     {block:IfBackgroundImage}
  352.         background-image:url({image:Background});
  353.         background-attachment: fixed;
  354.         {block:IfRepeatBackgroundImage}
  355.             background-repeat: repeat;
  356.         {/block:IfRepeatBackgroundImage}
  357.         {block:IfNotRepeatBackgroundImage}
  358.             background-repeat: no-repeat;
  359.             -webkit-background-size: cover;
  360.             -o-background-size: cover;
  361.             background-size: cover;
  362.         {/block:IfNotRepeatBackgroundImage}
  363.     {/block:IfBackgroundImage}
  364.    
  365. }
  366.  
  367. pre {
  368.     white-space: pre-wrap;
  369.     white-space: -moz-pre-wrap;
  370.     white-space: -pre-wrap;
  371.     white-space: -o-pre-wrap;
  372.     word-wrap: break-word;
  373. }
  374.  
  375. blockquote{
  376.    border-left:2px solid rgba(0, 0, 0, 0.3);
  377.    padding-left:10px;
  378.    margin-left:5px;
  379. }
  380.  
  381. hr {
  382.     border: 0;
  383.     height: 0;
  384.     border-top: 1px solid rgba(0, 0, 0, 0.1);
  385.     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  386. }
  387.  
  388. a, a:visited, a:link, a:active {
  389.     color:{color:accent};
  390.     text-decoration:none;
  391. }
  392.  
  393. a:hover {
  394.    
  395. }
  396.  
  397. a, a:focus {  
  398.     outline: 0;
  399. }
  400.  
  401. strike {
  402.     text-decoration: line-through solid black;
  403. }
  404.  
  405. .block a{
  406.     display: block;
  407. }
  408.  
  409. .inline a{
  410.     display: inline-block;
  411.     margin-right:5px;
  412. }
  413.    
  414. img{
  415.     opacity:1;
  416.     border:none;
  417.     text-decoration:none;
  418. }
  419.  
  420. h1, h2, h3, h4, h5, h6{
  421.     font-weight:normal;
  422.     margin:0;
  423. }
  424.  
  425. small {
  426.     font-size: calc({select:Font Size} - 2px);
  427. }
  428.  
  429. big, h2 {
  430.     font-size: calc({select:Font Size} + 2px);
  431. }
  432.  
  433. ul li::before {
  434.   content: '\f105';
  435.   font-family: FontAwesome;
  436.   margin:0 5px;
  437. }
  438.  
  439. ul {
  440.    list-style: none;
  441.    padding-left:10px;
  442. }
  443.  
  444. ol {
  445.   list-style-type:none;
  446.   counter-reset:bulletpoint;
  447.   margin-left:27px;
  448.   padding-left:0;
  449. }
  450. ol li {
  451.   counter-increment:bulletpoint;
  452.   padding-left: 10px;
  453.   text-indent: calc(-10px - 5px - 2px);
  454. }
  455. ol li::before {
  456.   content: counter(bulletpoint /*, decimal-leading-zero */) ")";
  457.   padding-right:5px;
  458.   font-size:calc({select:Font Size} - 1px);
  459.   opacity:0.5;
  460.   text-align:right;
  461.   display:inline-block;
  462. }
  463.  
  464.  
  465. ::selection {
  466.   background: rgba(0,0,0,0.3);
  467.   color: #ffffff;
  468. }
  469. ::-moz-selection {
  470.   background: rgba(0,0,0,0.3);
  471.   color: #ffffff;
  472. }
  473.  
  474.  
  475. /* scrollbar */
  476. ::-webkit-scrollbar-thumb:vertical {
  477. background-color:rgba(0,0,0,0.2); /* slider color*/
  478. height:100px;
  479. border-radius:15px;
  480. }
  481. ::-webkit-scrollbar-thumb:horizontal {
  482. background-color:rgba(0,0,0,0.2); /* slider color*/
  483. height:100px !important;
  484. }
  485. ::-webkit-scrollbar {
  486. height:10px;
  487. width:10px; /*width of slider*/
  488. background-color:transparent; /* main color*/
  489. }
  490.  
  491.  
  492.  
  493. /****************************** layout ******************************/
  494. /* (do not edit this unless you know what you're doing) */
  495. /* additonal width = padding+margin+border+etc */
  496.  
  497.  
  498. /* TESTING */
  499. .sidebar { border:0px solid green !important; }
  500. .posts { border:0px solid red !important; }
  501. .post { border:0px solid yellow !important; }
  502.  
  503.  
  504. .wrapper {
  505.   width: calc({select:Post Width} + (10px*2));
  506.   /* width of post(s) + additional width of post+posts (both sides) */
  507.   margin-bottom:50px;
  508.   position:absolute;
  509.   top: 17%;
  510.   left:calc(5% + 400px + 5%);
  511. }
  512.  
  513. .sidebar {
  514.   position: fixed;
  515.   box-sizing: border-box;
  516.   width: 400px;
  517.   {block:IfNarrowSidebar}width:300px;{/block:IfNarrowSidebar}
  518.   top: 15%;
  519.   padding: 20px;
  520.   min-height:200px;
  521.   left:5%;
  522.   {block:IfNarrowSidebar}left:10%;{/block:IfNarrowSidebar}
  523. }
  524.  
  525. .posts {
  526.   box-sizing: border-box;
  527. }
  528. .post {
  529.   box-sizing: content-box;
  530.   width: {select:Post Width};
  531.   padding:10px;
  532.   margin: 0 auto;
  533.   margin-bottom: 75px;
  534.   {block:PermalinkPage}margin-bottom:0px;{/block:PermalinkPage}
  535. }
  536. .post:last-child {  margin-bottom:0; }
  537. .post img, .post li, .post blockquote { max-width: 100%; }
  538.  
  539. .topbar {
  540.   position: fixed;
  541.   width: 100%;
  542.   left: 0;
  543.   z-index:99;
  544.   top: 0;
  545. }
  546.  
  547.  
  548.  
  549.  
  550. /****************************** sidebar ******************************/
  551.  
  552. .sidebar {
  553.    
  554. }
  555.  
  556. .sidebar img {
  557.     width:50px;
  558.     height:50px;
  559. }
  560.  
  561. #blogtitle, a#blogtitle, a#blogtitle:hover {
  562.     font-size: calc({select:Font Size} + 15px);
  563.     font-weight:normal;
  564.     color:{color:Text};
  565.     position:absolute;
  566.     margin-top:-40px;
  567.     margin-left:15px;
  568.     font-family: "Homemade Apple", serif;
  569.     z-index:1;
  570. }
  571.  
  572. a#blogtitle:hover {
  573.    
  574. }
  575.  
  576. #description {
  577.     display:inline-block;
  578.     text-align:justify;
  579.     max-height:85px;
  580.     font-size: calc({select:Font Size} + 1px);
  581.     letter-spacing:0.5px;
  582. }
  583.  
  584.  
  585.  
  586.  
  587. /* tabs */
  588.  
  589. .tab {
  590.     height:150px;
  591.     background-color:{color:content background};
  592.     position:fixed;
  593.     width:360px;
  594.     {block:IfNarrowSidebar}width:260px;{/block:IfNarrowSidebar}
  595.     padding:20px;
  596.     box-sizing:border-box;
  597.     overflow:hidden;
  598.     {block:IfRoundCorners}
  599.     border-radius:10px 10px 0 0;
  600.     {/block:IfRoundCorners}
  601. }
  602.  
  603. #lefttab {
  604.     {block:IfRoundCorners}
  605.     border-radius:0 0 0 10px;
  606.     {/block:IfRoundCorners}
  607. }
  608. #righttab {
  609.     {block:IfRoundCorners}
  610.     border-radius:0 0 10px 0;
  611.     {/block:IfRoundCorners}
  612. }
  613. .tab, nav {
  614.    box-shadow: 3px 3px 1px 0px rgba(168,168,168,0.5);
  615. }
  616. .tab.lefttab {
  617.    
  618. }
  619. .tab.righttab {
  620.     display:none;
  621. }
  622. .tab.righttab a {
  623.     color:{color:text}; /* todo */
  624.     display:inline-block;
  625.     width:45%;
  626.     margin:3px 0px;
  627.     {block:IfNotNarrowSidebar}padding:1px 5px;{/block:IfNotNarrowSidebar}
  628.     overflow:hidden;
  629.     white-space:nowrap;
  630.     vertical-align:top;
  631.     letter-spacing:0px;
  632.     border-bottom:2px dotted rgba(0,0,0,0.4);
  633.     transition: all 0.3s linear 0s;
  634. }
  635. .tab.righttab a:nth-child(even){
  636.     margin-left:10px;
  637. }
  638. .tab.righttab a:hover {
  639.     letter-spacing:0.7px;
  640.     border-bottom-color:{color:accent};
  641. }
  642. nav {
  643.     display:block;
  644.     position:relative;
  645.     margin-top:150px;
  646.     margin-bottom:20px;
  647.     {block:IfRoundCorners}
  648.     border-radius:0 0 12px 12px;
  649.     {/block:IfRoundCorners}
  650. }
  651. nav a {
  652.     cursor:help;
  653.     text-align:center;
  654.     display:inline-block;
  655.     width:50%;
  656.     padding:4px 0;
  657.     font-size: {select:Font Size};
  658.     background-color:{color:accent};
  659.     color:{select:Dark Theme};
  660.     letter-spacing:0px;
  661.     transition: all 0.3s linear 0s;
  662. }
  663. nav a:hover{
  664.     color:{select:Dark Theme};
  665.     letter-spacing:1.5px;
  666. }
  667. nav #lefttab {
  668.     background-color:{color:content background};
  669.     color:{color:text};
  670. }
  671.  
  672.  
  673.  
  674.  
  675. /* navigation */
  676.  
  677. .navigation, .pagination {
  678.     display:inline-block;
  679.     position:relative;
  680.     left: 50%;
  681.       -webkit-transform: translate(-50%, 0%);
  682.       -ms-transform: translate(-50%, 0%);
  683.       transform: translate(-50%, 0%);
  684. }
  685.  
  686. .navigation a, .pagination a {
  687.     font-family:sans-serif;
  688.     font-size:13px;
  689.     display:inline-block;
  690.     width:40px;
  691.     height:40px;
  692.     box-sizing:border-box;
  693.     border-radius:50%;
  694.     padding:10px;
  695.     text-align:center;
  696.     margin:5px;
  697.     position:relative;
  698.    
  699.     background:
  700.     linear-gradient(to bottom, {color:accent} 50%, {color:content background} 50%);
  701.     background-size:100% 200%;
  702.     background-position:left top;
  703.     transition: all 0.4s ease-out;
  704.     box-shadow: 2px 2px 1px 0px rgba(168,168,168,0.4);
  705.  
  706. }
  707.  
  708. .navigation a:hover, .pagination a:hover{
  709.     background-position:left bottom;
  710.     transition: all 0.3s ease-in 0.1s;
  711.  
  712. }
  713.  
  714. .navigation a:hover i, .pagination a:hover i {
  715.     color:{color:accent};
  716.     transition: all 0.3s ease-in 0.3s;
  717. }
  718.  
  719. .navigation a i, .pagination a i {
  720.     font-size:15px;
  721.     vertical-align:middle;
  722.     color:{select:Dark Theme};
  723.     transition: all 0.4s ease-in 0s;
  724. }
  725.  
  726.  
  727.  
  728.  
  729.  
  730. /* search bar */
  731. .search .query {
  732.     border:0;
  733.     border-bottom: 1px solid rgba(0,0,0,0.4);
  734.     outline: 0;
  735.     padding: 5px;
  736.     font-family: inherit;
  737.     font-size: inherit;
  738.     color: inherit;
  739.     background: 0;
  740.     width:300px;
  741.     {block:IfNarrowSidebar}width:200px;{/block:IfNarrowSidebar}
  742.     position:absolute;
  743.     bottom:15px;
  744. }
  745. ::-webkit-input-placeholder {color: inherit;}
  746. :-moz-placeholder {color: inherit; opacity:1;}
  747. ::-moz-placeholder {color: inherit; opacity:1;}
  748. :-ms-input-placeholder {color: inherit;}
  749. input:focus::-webkit-input-placeholder {color: transparent;}
  750. input:focus:-moz-placeholder {color: transparent;}
  751. input:focus::-moz-placeholder {color: transparent;}
  752. input:focus:-ms-input-placeholder { color: transparent;}
  753.  
  754.  
  755.  
  756. /* pagination */
  757.  
  758. .pagination {
  759.     padding-bottom:50px;
  760.     padding-top:40px;
  761. }
  762.  
  763. .pagination a {
  764.     margin:0 15px;
  765.     padding-top:10px;
  766. }
  767.  
  768. .pagination a i {
  769.     font-size:20px;
  770. }
  771.  
  772.  
  773. /****************************** topbar ******************************/
  774.  
  775. .topbar {
  776.   background-color:{color:Accent};
  777.   height:35px;
  778.   border-bottom:5px solid rgba(168,168,168,0.5);
  779. }
  780.  
  781.  
  782.  
  783.  
  784. /**************************** post content ****************************/
  785.  
  786.  
  787. .post {
  788.     background-color:{color:content background};
  789.     padding-bottom:10px;
  790.     {block:IfRoundCorners}
  791.     border-radius:14px;
  792.     {/block:IfRoundCorners}
  793.     box-shadow: 7px 7px 1px -3px rgba(168,168,168,0.5);
  794. }
  795.  
  796. .post a{
  797.     color:{color:accent};
  798.     border-bottom:2px solid {color:accent};
  799.     transition:0.3s ease;
  800. }
  801. .post a:hover{
  802.     padding-bottom:2px;
  803. }
  804.  
  805. .post b, .post strong {
  806.     color:{color:accent};
  807. }
  808.  
  809. .post h2 {
  810.     color:{color:accent};
  811.     text-transform:uppercase;
  812.     font-size: calc({select:Font Size} + 1px);
  813.     font-weight:bold;
  814.     margin-top:20px;
  815. }
  816.  
  817. .post img {
  818.    {block:IfRoundCorners}
  819.     border-radius:4px;
  820.     {/block:IfRoundCorners}
  821. }
  822.  
  823.  
  824. /* caption */
  825.  
  826. .caption {
  827.     width:100%;
  828.     margin-top:10px;
  829. }
  830. .tumblr_parent {
  831.  
  832. }
  833. .tumblr_parent p {
  834.     margin:5px 10px 5px 0px;
  835. }
  836. .tumblr_avatar {
  837.   border-radius:50%;
  838.   vertical-align:middle;
  839.   width:25px;
  840.   height:25px;
  841.   margin-right:6px;
  842.   -webkit-filter: grayscale(100%);
  843.   filter: grayscale(100%);
  844.   transition:0.3s ease;
  845. }
  846. .tumblr_avatar::before {
  847.   position:absolute;
  848.   width:25px;
  849.   height:25px;
  850.   background-color:white;
  851.   content:'';
  852.   opacity:0.25;
  853. }
  854. .tumblr_avatar:hover{
  855.   -webkit-filter: grayscale(0%);
  856.   filter: grayscale(0%);
  857. }
  858. .tumblr_blog, a.tumblr_blog, a.tumblr_blog:hover {
  859.   color:{color:accent};
  860.   font-weight:bold;
  861.   transition:0.6s ease;
  862.   letter-spacing:0px;
  863.   border:0;
  864. }
  865. a.tumblr_blog:hover{
  866.     letter-spacing:0.75px;
  867. }
  868. blockquote.tumblr_parent {
  869.     border:0;
  870.     margin:0;
  871.     margin-left:-5px;
  872.     margin-top:25px;
  873.     margin-bottom:15px;
  874. }
  875. blockquote.tumblr_parent:first-child {
  876.     margin-top:0;
  877. }
  878.  
  879.  
  880.  
  881. /* post types */
  882.  
  883. /* photo */
  884. .photo-slideshow a, .photo-slideshow a:hover {
  885.     border:0;
  886. }
  887.  
  888. /*text*/
  889. .title {
  890.     font-size: calc({select:Font Size} + 4px);
  891.     text-align:center;
  892.     word-wrap: break-word;
  893.     text-transform:uppercase;
  894. }
  895.  
  896. /*link*/
  897. .title a {
  898.    
  899. }
  900. .title a:hover {
  901.    
  902. }
  903.  
  904. /*quote*/
  905. .quote{
  906.     text-align:left;
  907.     font-size: calc({select:Font Size} + 3px);
  908.     font-style:italic;
  909. }
  910. .quote small {
  911.     font-size: calc({select:Font Size} + 5px);
  912.     color:{color:accent};
  913.     margin:0 3px;
  914.     font-style:normal;
  915. }
  916. .source {
  917.     margin-top:5px;
  918.     margin-right:5px;
  919.     text-align:right;
  920. }
  921.  
  922. /*audio*/
  923. .audio {
  924.     padding:5px;
  925. }
  926. .cover {
  927.     display:inline-block;
  928.     vertical-align:middle;
  929.     position: relative;
  930.     z-index: 1;
  931.     width:64px;
  932.     height:64px;
  933.     border-radius:50%;
  934. }
  935. .playbutton {
  936.     width: 30px;
  937.     height: 30px;
  938.     overflow: hidden;
  939.     position: relative;
  940.     z-index: 1000;
  941.     margin-top:6px;
  942.     margin-left:5px;
  943. }
  944. .playbox {
  945.     display:inline-block;
  946.     vertical-align:middle;
  947.     background-color: #f2f2f2;
  948.     position: absolute;
  949.     z-index: 1000;
  950.     margin-top: 12px;
  951.     margin-left: 12px;
  952.     width:40px;
  953.     height:40px;
  954.     opacity:0.8;
  955.     border-radius:50%;
  956. }
  957. .audioinfo {
  958.     border-left:2px solid rgba(0,0,0,0.3);
  959.     display: inline-block;
  960.     margin-left: 20px;
  961.     padding: 5px 10px;
  962.     vertical-align: middle;
  963.     white-space:nowrap;
  964.     overflow:hidden;
  965.     max-width:50%;
  966. }
  967. .tn {
  968.     font-weight:bold;
  969.     color:{color:accent};
  970. }
  971. .al {
  972.     font-style:italic;
  973. }
  974. .ar {
  975.    
  976. }
  977.  
  978.  
  979. /*asks*/
  980. .ask {
  981.    
  982. }
  983. .question {
  984.     margin-bottom:10px;
  985.     background-color: rgba(0, 0, 0, 0.05);
  986.     padding:10px;
  987. }
  988. .asker, .asker a, .asker a:hover {
  989.     font-weight:bold;
  990.     color:{color:accent};
  991.     border-bottom:none;
  992.     text-transform:lowercase;
  993. }
  994. .answer {
  995.     margin-top:10px;
  996. }
  997.  
  998. /*chat*/
  999. .chat ol {
  1000.     padding:0;
  1001.     list-style:none;
  1002.     margin-left:10px;
  1003. }
  1004. .chat li::before {
  1005.     display:none;
  1006. }
  1007. .line {
  1008.     padding:5px 0;
  1009.     border-left:2px solid rgba(0, 0, 0, 0.25);
  1010.     padding-left:10px;
  1011.     margin-bottom:5px;
  1012.     text-indent:initial;
  1013. }
  1014. .line:last-child {
  1015.     border-bottom:0;
  1016. }
  1017. .label {
  1018.     font-weight:bold;
  1019.     display:block;
  1020. }
  1021.  
  1022.  
  1023. /*video*/
  1024. .tumblr_video_container {
  1025.      max-height:540px!important;
  1026.      /*overflow:hidden!important;*/
  1027. }
  1028.  
  1029.  
  1030.  
  1031. /***************************** post info *****************************/
  1032.  
  1033. .postinfo {
  1034.     margin-top:5px;
  1035.     font-size: calc({select:Font Size} - 2px);
  1036.     text-transform:lowercase;
  1037.     background-color:{color:accent};
  1038.     width: calc({select:Post Width} + (10px*2));
  1039.     margin-left:-10px;
  1040.     height:initial;
  1041.     padding-bottom:5px;
  1042.     {block:IfRoundCorners}
  1043.     border-radius:0 0 10px 10px;
  1044.     {/block:IfRoundCorners}
  1045. }
  1046. .tags a {
  1047.     word-wrap: break-word;
  1048.     font-size: calc({select:Font Size});
  1049.     text-transform:initial;
  1050.     color:{select:Dark Theme};
  1051.     padding:3px 8px;
  1052.     margin:5px 5px 0px 5px;
  1053.     border:1px solid transparent;
  1054.     display:inline-block;
  1055.     border-radius:10px;
  1056.     letter-spacing:0.5px;
  1057.     transition: all 0.3s linear 0s;
  1058. }
  1059.  
  1060. .tags a:hover{
  1061.     background-color:{select:Dark Theme};
  1062.     color:{color:accent};
  1063.     border:1px solid transparent;
  1064.     padding:3px 8px;
  1065. }
  1066.  
  1067. .tags .fa-slack-hash {
  1068.     color:{select:Dark Theme};
  1069. }
  1070.  
  1071. .tags a:hover .fa-slack-hash {
  1072.     color:{color:accent};
  1073.     transition: all 0.3s linear 0s;
  1074. }
  1075.  
  1076.  
  1077.  
  1078. /* permalink page */
  1079.  
  1080. .permalink {
  1081.     margin-top:20px;
  1082.     margin-right:10px;
  1083.     text-align:right;
  1084. }
  1085.  
  1086. .permalink a {
  1087.     color:black;
  1088.     display:inline-block;
  1089.     margin-left:15px;
  1090.     border-bottom:2px solid transparent;
  1091.     transition:0.4s;
  1092. }
  1093.  
  1094. .permalink a:hover{
  1095.     border-bottom:2px solid {color:accent};
  1096. }
  1097.  
  1098.  
  1099. /* list of notes */
  1100.  
  1101. .postnotes {
  1102.     {block:IndexPage}display: none!important;{/block:IndexPage}
  1103.     width:500px;
  1104.     text-align:left;
  1105.     font-size: calc({select:Font Size} - 2px);
  1106. }
  1107.  
  1108. .postnotes, .postnotes a, .postnotes a:hover{
  1109.     color:{color:text};
  1110. }
  1111.  
  1112. .postnotes a {
  1113.     cursor:help;
  1114.     margin-left:0;
  1115.     border:0;
  1116. }
  1117.  
  1118. .postnotes a:hover{
  1119.     border:0;
  1120.     padding:0;
  1121. }
  1122.  
  1123. .postnotes img {
  1124.     border-radius:50%;
  1125.     vertical-align:middle;
  1126.     margin-right:5px;
  1127. }
  1128.  
  1129. .postnotes ol {
  1130.     list-style:none;
  1131.     margin:initial;
  1132.     padding:initial;
  1133.     margin-left:30px;
  1134.     margin-top:20px;
  1135. }
  1136.  
  1137. .postnotes ol::before{
  1138.     display:none;
  1139. }
  1140.  
  1141. .postnotes li {
  1142.     padding:1px 0px;
  1143.     text-align:left;
  1144.     margin:0 0 0 -20px;
  1145.     text-indent:initial;
  1146. }
  1147.  
  1148. .postnotes li.like::before, .postnotes li.reblog::before {
  1149.     padding-right:7px;
  1150.     font-family: FontAwesome;
  1151.     color:black;
  1152.     opacity:0.7;
  1153. }
  1154. .postnotes li.like::before {
  1155.     content: "\f004";
  1156.     font-size:8px;
  1157.     padding-left:2px;
  1158.     padding-right:9px;
  1159. }
  1160. .postnotes li.reblog::before {
  1161.     content: "\f079";
  1162.     font-size:11px;
  1163. }
  1164.  
  1165. .postnotes li blockquote {
  1166.     margin-left:40px;
  1167. }
  1168.  
  1169. .more_notes_link_container {
  1170.     text-align:left!important;
  1171.     text-transform:lowercase;
  1172. }
  1173.  
  1174. .more_notes_link_container::before{
  1175.     display:none;
  1176. }
  1177.  
  1178. .retags, div.retags a { /* xkit */
  1179.     color:gray!important;
  1180.     font-size:9px!important; }
  1181.     div.retags {
  1182.     margin-bottom:5px;
  1183.     margin-left:40px;
  1184. }
  1185.  
  1186.  
  1187.  
  1188.  
  1189.  
  1190.  
  1191.  
  1192.  
  1193.  /* post buttons */
  1194.  
  1195. .postbuttons {
  1196.     display:block;
  1197.     position:absolute;
  1198.     right:0;
  1199.     margin-right:-60px;
  1200.     font-family:sans-serif;
  1201. }
  1202.  
  1203. .postbuttons a {
  1204.     display:block;
  1205.     background:{color:accent};
  1206.     color:{select:Dark Theme};
  1207.     margin-bottom:10px;
  1208.     padding: 7px;
  1209.     width: 40px;
  1210.     height: 40px;
  1211.     box-sizing: border-box;
  1212.     border-radius: 50%;
  1213.     text-align: center;
  1214.     border:2px solid transparent;
  1215.     font-size:15px;
  1216.     transition: all 0.3s linear 0s;
  1217. }
  1218.  
  1219. .postbuttons a:hover {
  1220.     background-color:transparent;
  1221.     color:{color:accent};
  1222.     border:2px solid {color:accent};
  1223. }
  1224.  
  1225. .postbuttons a i {
  1226.     color:{select:Dark Theme};
  1227. }
  1228.  
  1229. .fa-heart, .fa-retweet, .fa-anchor {
  1230.     padding-top:4px;
  1231. }
  1232.  
  1233. .postbuttons a:hover i {
  1234.     color:{color:accent};
  1235. }
  1236.  
  1237.  
  1238. /* like link */
  1239.  
  1240. .like-b {
  1241.   position:relative;
  1242.   display:inline-block;
  1243.   height:1em;
  1244.   line-height:1em;
  1245.   overflow:hidden;
  1246.   margin-bottom:-1px;
  1247. }
  1248. .like-b .like_button iframe {
  1249.    position:absolute;
  1250.    top:10px;
  1251.    left:10px;
  1252.    bottom:0;
  1253.    right:0;
  1254.    z-index:2;
  1255.    opacity:0.000001;
  1256. }
  1257. .like-b .liked + .b i {
  1258.   color:rgba(0, 0, 0, 0.3);
  1259. }
  1260.  
  1261.  
  1262.  
  1263. /***************************** your css *****************************/
  1264. /* pastecsshere */
  1265.  
  1266.  
  1267.  
  1268.  
  1269. {CustomCSS}</style></head><body>
  1270. <!-- ---------------------------------------------------------------- -->
  1271. <!-- ----------------------- H T M L - S T A R T -------------------- -->
  1272. <!-- ---------------------------------------------------------------- -->
  1273. <!-- pastehtmlhere -->
  1274. <div id="container">
  1275. <div class="topbar"></div>
  1276.  
  1277.  
  1278.  
  1279. <!-- ---------------------------- sidebar -------------------------- -->
  1280. <div class="sidebar">
  1281.  
  1282.     <a href="/" id="blogtitle">{Title}</a>
  1283.    
  1284.     <!-- ---------- tabs ---------- -->
  1285.     <div class="tabs">
  1286.     <script>
  1287.     $(function() {
  1288.       $("nav a").click(function() {
  1289.          
  1290.         $("nav a").css("background-color","{color:accent}");
  1291.         $(this).css("background-color","{color:content background}");
  1292.        
  1293.         $("nav a").css("color","{select:Dark Theme}");
  1294.         $(this).css("color","{color:text}");
  1295.        
  1296.         id = $(this).attr("id");
  1297.         $(".tab:not(."+id+")").fadeOut();
  1298.         $(".tab." + id).fadeIn();
  1299.       });
  1300.     });
  1301.     </script>
  1302.     <!-- ---------- left tab ---------- -->
  1303.     <div class="tab lefttab">
  1304.     <div id="description">{Description}</div>
  1305.    
  1306.     <form class="search" action="javascript:return false">
  1307.     <input type="text" class="query" placeholder="search">
  1308.     </form>
  1309.  
  1310.     </div>
  1311.     <!-- ---------- right tab ---------- -->
  1312.     <div class="tab righttab">
  1313.    
  1314. {block:IfTag1Title}<a href="{text:Tag1 URL}">{text:Tag1 Title}</a>{/block:IfTag1Title}{block:IfTag2Title}<a href="{text:Tag2 URL}">{text:Tag2 Title}</a>{/block:IfTag2Title}{block:IfTag3Title}<a href="{text:Tag3 URL}">{text:Tag3 Title}</a>{/block:IfTag3Title}{block:IfTag4Title}<a href="{text:Tag4 URL}">{text:Tag4 Title}</a>{/block:IfTag4Title}{block:IfTag5Title}<a href="{text:Tag5 URL}">{text:Tag5 Title}</a>{/block:IfTag5Title}{block:IfTag6Title}<a href="{text:Tag6 URL}">{text:Tag6 Title}</a>{/block:IfTag6Title}{block:IfTag7Title}<a href="{text:Tag7 URL}">{text:Tag7 Title}</a>{/block:IfTag7Title}{block:IfTag8Title}<a href="{text:Tag8 URL}">{text:Tag8 Title}</a>{/block:IfTag8Title}
  1315.  
  1316.     </div>
  1317.     </div>
  1318.     <!-- ---------- tab buttons ---------- -->
  1319.     <nav>
  1320.         <a id="lefttab">{text:Left Tab Text}</a><a id="righttab">{text:Right Tab Text}</a>
  1321.     </nav>
  1322.    
  1323.    
  1324.    
  1325.    
  1326.     <!-- ---------- navigation ---------- -->
  1327.    
  1328.     <div class="navigation inline">
  1329.    
  1330.     <a href="/" {block:IFHomeLinkText}
  1331.    title="{text:Home Link Text}"{/block:IFHomeLinkText}>
  1332.     <i class="fas fa-home"></i></a>
  1333.    
  1334.     {block:AskEnabled}
  1335.     <a href="{text:Ask Link}" {block:IFAskLinkText}
  1336.    title="{text:Ask Link Text}"{/block:IFAskLinkText}>
  1337.     <i class="fas fa-question-circle"></i></a>
  1338.     {/block:AskEnabled}
  1339.    
  1340.     {block:SubmissionsEnabled}{block:IfShowSubmitLink}
  1341.     <a href="/submit" title="Submit">
  1342.     <i class="fas fa-inbox"></i></a>
  1343.     {/block:IfShowSubmitLink}{/block:SubmissionsEnabled}
  1344.    
  1345.     {block:IfLink1URL}<a {block:IfLink1Title}
  1346.    title="{text:Link1 Title}"{/block:IfLink1Title}
  1347.    href="{text:Link1 URL}">
  1348.     <i class="fas fa-{select:Link 1 Icon}"></i></a>{/block:IfLink1URL}
  1349.    
  1350.     {block:IfLink2URL}<a {block:IfLink2Title}
  1351.    title="{text:Link2 Title}"{/block:IfLink2Title}
  1352.    href="{text:Link2 URL}">
  1353.     <i class="fas fa-{select:Link 2 Icon}"></i></a>{/block:IfLink2URL}
  1354.    
  1355.     {block:IfLink3URL}<a {block:IfLink3Title}
  1356.    title="{text:Link3 Title}"{/block:IfLink3Title}
  1357.    href="{text:Link3 URL}">
  1358.     <i class="fas fa-{select:Link 3 Icon}"></i></a>{/block:IfLink3URL}
  1359.    
  1360.     {block:IfShowArchiveLink}
  1361.     <a href="/archive" title="Archive">
  1362.     <i class="fas fa-th-large"></i></a>
  1363.     {/block:IfShowArchiveLink}
  1364.    
  1365.     </div> <!-- /navigation -->
  1366.    
  1367.    
  1368.    
  1369.  
  1370.  
  1371.  
  1372.  
  1373. </div> <!-- /sidebar -->
  1374. <!-- ---------------------------- posts -------------------------- -->
  1375. <div class="wrapper">
  1376. <div class="posts">
  1377. {block:Posts}
  1378. <div class="post" id="{PostID}"
  1379. style="{block:HasTags}padding-bottom:0;{/block:HasTags}">
  1380.  
  1381. <!-- source/via fix -->
  1382. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1383.  
  1384.  
  1385.  
  1386. <!-- ---------- side buttons ---------- -->
  1387. {block:Date}
  1388. <div class="postbuttons">
  1389.  
  1390.  
  1391. <!-- date -->
  1392. <a href="{Permalink}" title="{DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}">
  1393. <i class="fas fa-anchor"></i></a>
  1394.  
  1395. <!-- reblog/like links -->
  1396. <a href="{ReblogURL}" target="_blank" title="reblog">
  1397. <i class="fas fa-retweet"></i></a>
  1398.  
  1399. <a class="like-b" href="#" title="like">{LikeButton}<span class="b">
  1400. <i class="fas fa-heart"></i></span></a>
  1401.  
  1402.  
  1403. </div> <!-- /postbuttons -->
  1404. {/block:Date}
  1405.  
  1406.  
  1407.  
  1408. <!-- ---------- post types ---------- -->
  1409.  
  1410. {block:Quote}
  1411.     <div class="quote"><small>»</small>{Quote}<small>«</small></div>
  1412.     {block:Source}
  1413.     <div class="source">{Source} &mdash;</div>
  1414.     {/block:Source}
  1415. {/block:Quote}
  1416.  
  1417. {block:Text}
  1418.     {block:Title}<div class="title">{Title}</div>{/block:Title}
  1419.     <div class="caption">{Body}</div>
  1420. {/block:Text}
  1421.  
  1422. {block:Link}
  1423.     <div class="title"><a href="{URL}">{Name}</a></div>
  1424.     {block:Description}
  1425.     <div class="caption">{Description}</div>{/block:Description}
  1426. {/block:Link}
  1427.  
  1428. {block:Chat}
  1429.     {block:Title}<h1>{Title}</h1>{/block:Title}
  1430.     <div class="chat">
  1431.     <ol>{block:Lines}
  1432.     <li class="line {Alt}">
  1433.         {block:Label}<span class="label">{Label}</span>{/block:Label}
  1434.         {Line}
  1435.     </li>
  1436.     {/block:Lines}</ol>
  1437.     </div>
  1438. {/block:Chat}
  1439.  
  1440. {block:Photo}
  1441.     <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1442. {/block:Photo}
  1443.  
  1444. {block:Photoset}
  1445.     <!-- pxu code -->
  1446.     <div class="photo-slideshow" id="photoset_{PostID}"
  1447.    data-layout="{PhotosetLayout}">{block:Photos}
  1448.     <div class="photo-data">
  1449.     <div class="pxu-photo">
  1450.     <img src="{PhotoURL-500}"
  1451.    width="{PhotoWidth-500}" height="{PhotoHeight-500}"
  1452.    data-highres="{PhotoURL-HighRes}"
  1453.    data-width="{PhotoWidth-HighRes}"
  1454.    data-height="{PhotoHeight-HighRes}">
  1455.     </div><a class="tumblr-box" rel="post-{PostID}"
  1456.    href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1457. {/block:Photoset}
  1458.  
  1459. {block:Video}
  1460.     <div class="video">{Video-500}</div>
  1461. {/block:Video}
  1462.  
  1463. {block:Audio}
  1464.     <div class="audio">
  1465.     <div class="playbox"><div class="playbutton">
  1466.     {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  1467.     </div></div>
  1468.     {block:AlbumArt}
  1469.     <img src="{AlbumArtURL}" class="cover">
  1470.     {/block:AlbumArt}
  1471.     <div class="audioinfo">
  1472.     <div class="tn">{block:TrackName}{TrackName}{/block:TrackName}</div>
  1473.     <div class="al">{block:Album}{Album}{/block:Album}</div>
  1474.     <div class="ar">{block:Artist}{Artist}{/block:Artist}</div>
  1475.     </div></div>
  1476. {/block:Audio}
  1477.  
  1478. {block:Answer}
  1479.     <div class="ask">
  1480.         <div class="asker">{Asker}</div>
  1481.         <div class="question">{Question}</div>
  1482.     </div>
  1483.     <div class="answer">{Answer}</div>
  1484. {/block:Answer}
  1485.  
  1486.  
  1487.  
  1488.  
  1489. <!-- ---------- caption ---------- -->
  1490.  
  1491. {block:IfShowCaptions}
  1492. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1493. {/block:IfShowCaptions}
  1494.  
  1495.  
  1496.  
  1497.  
  1498.  
  1499. <!-- ---------- post information (tags)  ---------- -->
  1500.  
  1501. {block:HasTags}
  1502. <div class="postinfo">
  1503.  
  1504.  
  1505. <div class="tags">
  1506.     {block:Tags}<a href="{TagUrl}" class="t t-{URLSafeTag}">
  1507.     <i class="fab fa-slack-hash"></i> {Tag}</a>{/block:Tags}
  1508. </div>
  1509.  
  1510.  
  1511. </div>
  1512. {/block:HasTags}
  1513.  
  1514.  
  1515.  
  1516.  
  1517. </div> <!-- /post -->
  1518.  
  1519. <!-- ---------- permalink page ---------- -->
  1520. {block:PermalinkPage}
  1521. <div class="permalink">
  1522.  
  1523.  
  1524. <!-- src/via -->
  1525. {block:RebloggedFrom}
  1526. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1527. {block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}
  1528. {/block:RebloggedFrom}
  1529.  
  1530.  
  1531. <!-- note count -->
  1532. {block:NoteCount}
  1533. <a {block:PostNotes}class="opensub"
  1534. style="cursor:help;"{/block:PostNotes}>
  1535. {NoteCount} notes</a>
  1536. {/block:NoteCount}
  1537.  
  1538.  
  1539. <!-- notes -->
  1540. {block:PostNotes}
  1541. <script type="text/javascript">
  1542. jQuery(document).ready(function() {
  1543.     jQuery(".sub").hide();               // hide notes.
  1544.     jQuery(".opensub").click(function(){ // on click:
  1545.         jQuery(".sub").slideToggle(500); // show notes.
  1546.     });
  1547. });
  1548. </script>
  1549. <div class="postnotes sub">{PostNotes}</div>
  1550. {/block:PostNotes}
  1551.  
  1552.  
  1553. </div> <!-- /permalink -->
  1554. {/block:PermalinkPage}
  1555.  
  1556.  
  1557.  
  1558.  
  1559.  
  1560. {/block:Posts}
  1561. </div> <!-- /posts -->
  1562.  
  1563.  
  1564. <!-- ---------------------------- etc -------------------------- -->
  1565.  
  1566. <!-- ---------- pagination ---------- -->
  1567.  
  1568. <div class="pagination">
  1569. {block:Pagination}
  1570. {block:PreviousPage}
  1571. <a href="{PreviousPage}">
  1572. <i class="fas fa-angle-left"></i>
  1573.  </a>
  1574. {/block:PreviousPage}
  1575.  
  1576. {block:NextPage}
  1577. <a href="{NextPage}">
  1578. <i class="fas fa-angle-right"></i>
  1579. </a>
  1580. {/block:NextPage}
  1581. {/block:Pagination}
  1582. </div>
  1583.  
  1584.  
  1585.  
  1586.  
  1587. </div> <!-- /wrapper -->
  1588. </div> <!-- /container -->
  1589.  
  1590.  
  1591.  
  1592. <!-- ---------- credit ---------- -->
  1593.  
  1594. <!-- credit link. you may move but not remove. -->
  1595. <div id="credit"><a href="https://cloudythms.tumblr.com/">☁</a></div>
  1596. <!-- theme by cloudythms.tumblr.com -->
  1597.  
  1598.  
  1599. <!-- ---------- tumblr controls  ---------- -->
  1600.  
  1601.  <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve">
  1602.  
  1603. <path d="M89.834,1.75H3c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.653,0,3-1.346,3-3V4.75
  1604.             C92.834,3.096,91.488,1.75,89.834,1.75z"/>
  1605.         <path d="M89.834,36.75H3c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.653,0,3-1.346,3-3V39.75
  1606.             C92.834,38.096,91.488,36.75,89.834,36.75z"/>
  1607.         <path d="M89.834,71.75H3c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.653,0,3-1.346,3-3V74.75
  1608.             C92.834,73.095,91.488,71.75,89.834,71.75z"/>
  1609.          
  1610. </svg></div>
  1611.  
  1612. </body></html>
Advertisement
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!