API tools faq
paste
rottenfollow229

base code (alt. Multi columns)

rottenfollow229
Oct 12th, 2017
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 42.72 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾TBD⏌ by sheathemes @ tumblr
  11.  
  12. CREDITS
  13.  
  14. > PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Modified PXU photoset script tutorial by bychloethemes @ tumblr: http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  15.  
  16. > Video resize script: http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  17.  
  18. >CSS grid (masonry alternative): http://espoirthemes.com/post/166303648392/css-grid-tutorial-in-my-snotgirl-theme-and-my
  19.  
  20. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  21.  
  22. > Lazy Load Script: http://starious.tumblr.com/post/27991109274/tutorial-lazy-load
  23.  
  24. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  25.  
  26. > Icons: https://linearicons.com/ | http://saturnthms.com/
  27.  
  28. > Un-nest Tumblr Captions: http://neothm.com/post/148902138319/un-nest-tumblr-captions-a-plugin-by | Script and Tutorial by Neothm and Magnusthemes @ Tumblr
  29.  
  30. > Audio player color fix: http://roxiestheme.net/post/158812662057/tutorial-change-the-color-of-tumblrs-new-audio
  31.  
  32. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  33.  
  34. > Minimal SoundCloud player: http://shythemes.tumblr.com/post/114792480648/minimal-soundcloud-player
  35.  
  36. !-->
  37.  
  38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  39. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  40.  
  41. <head>
  42.  
  43. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  44. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  45.  
  46. <!--Custom Fonts-->
  47. <link href="https://fonts.googleapis.com/css?family=Exo:300,300i,400,400i,500,500i,600,600i|Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito+Sans:300,300i,400,400i,600,600i,700,700i|Titillium+Web:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i|Arimo:400,400i,700,700i|Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i|Muli:400,400i,600,600i,700,700i" rel="stylesheet">
  48. <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  49. <!--Custom Fonts-->
  50.  
  51. <link rel="stylesheet" href="http://static.tumblr.com/mans3zn/SYAovrkkm/normalize.css">
  52.  
  53. <!--Homelinks Icons-->
  54. <link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">
  55. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  56. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  57. <!--Homelinks Icons-->
  58.  
  59. <link href="//dl.dropbox.com/s/jt70kw3ltoln2lp/stradial.css" type="text/css" rel="stylesheet"/>
  60.  
  61.     <title>{Title}</title>
  62.     <link rel="shortcut icon" href="{Favicon}">
  63.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  64.     <meta charset="utf-8">
  65.     {block:Description}
  66.     <meta name="description" content="{MetaDescription}" />
  67.     {/block:Description}
  68.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  69.  
  70. <!--Custom Options-->
  71. <meta name="color:background" content="#fefefe" />
  72. <meta name="color:accent" content="#e7e7e7" />
  73. <meta name="color:accented text" content="#ffffff" />
  74. <meta name="color:Text" content="#888888" />    
  75. <meta name="color:bold" content="#bca297"/>
  76. <meta name="color:italic" content="#bca297"/>
  77. <meta name="color:underline" content="#bca297"/>
  78. <meta name="color:Links" content="#bca297" />
  79. <meta name="color:Link Hover" content="#e5e2e2" />
  80. <meta name="color:text selection" content="#ffffff" />
  81. <meta name="color:text selection background" content="#bca297" />
  82. <meta name="color:Blockquote" content="#bca297" />
  83. <meta name="color:Scrollbar" content="#bca297" />
  84.  
  85. <meta name="color:topbar" content="#ffffff" />
  86. <meta name="color:blogtitle" content="#888888" />
  87. <meta name="color:description" content="#888888" />
  88. <meta name="color:Posts" content="#ffffff" />
  89. <meta name="color:Post Title" content="#bca297" />
  90. <meta name="color:Post Borders" content="#f6f6f6" />
  91. <meta name="color:post content background" content="#fafafa" />
  92.  
  93. <meta name="color:Chat" content="#aaaaaa" />
  94. <meta name="color:audio bold" content="#bca297" />
  95. <meta name="color:question" content="#888888" />
  96. <meta name="color:pagination" content="#bca297" />
  97. <meta name="color:permalink" content="#888888" />
  98. <meta name="color:permalink background" content="#fcfcfc" />
  99. <meta name="color:permalink hover" content="#cccccc" />
  100.  
  101. <meta name="select:Background Attachment" content="fixed" title="fixed">
  102. <meta name="select:Background Attachment" content="scroll" title="scroll">
  103. <meta name="select:Background Repeat" content="repeat" title="repeat">
  104. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  105.  
  106. <meta name="select:Body Font" content="Open Sans" title="Open Sans">
  107. <meta name="select:Body Font" content="Titillium Web" title="Titillium Web">
  108. <meta name="select:Body Font" content="Roboto" title="Roboto">
  109. <meta name="select:Body Font" content="Montserrat" title="Montserrat">
  110. <meta name="select:Body Font" content="Arimo" title="Arimo">
  111. <meta name="select:Body Font" content="Nunito Sans" title="Nunito Sans">
  112. <meta name="select:Body Font" content="Muli" title="Muli">
  113.  
  114. <meta name="select:text align" content="left" title="left">
  115. <meta name="select:text align" content="justify" title="justify">
  116. <meta name="select:desc text align" content="center" title="center">
  117. <meta name="select:desc text align" content="justify" title="justify">
  118.  
  119. <meta name="select:Post Size" content="300" title="300px">
  120. <meta name="select:Post Size" content="350" title="350px">
  121. <meta name="select:Post Size" content="375" title="375px">
  122. <meta name="select:Post Size" content="400" title="400px">
  123. <meta name="select:Post Size" content="450" title="450px">
  124. <meta name="select:Post Size" content="475" title="475px">
  125. <meta name="select:Post Size" content="500" title="500px">
  126. <meta name="select:Post Size" content="525" title="525px">
  127. <meta name="select:Post Size" content="540" title="540px">
  128.  
  129. <meta name="select:Post Padding" content="0" title="0px">
  130. <meta name="select:Post Padding" content="2" title="2px">
  131. <meta name="select:Post Padding" content="5" title="5px">
  132. <meta name="select:Post Padding" content="10" title="10px">
  133. <meta name="select:Post Padding" content="15" title="15px">
  134.  
  135. <meta name="select:Number of Columns" content="1" title="1">
  136. <meta name="select:Number of Columns" content="2" title="2">
  137. <meta name="select:Number of Columns" content="3" title="3">
  138.  
  139. <meta name="select:Photoset gutter" content="1" title="1px">
  140. <meta name="select:Photoset gutter" content="3" title="3px">
  141. <meta name="select:Photoset gutter" content="5" title="5px">
  142. <meta name="select:Photoset gutter" content="7" title="7px">
  143. <meta name="select:Photoset gutter" content="9" title="9px">
  144.  
  145. <meta name="select:post margin" content="20" title="20px">
  146. <meta name="select:post margin" content="30" title="30px">
  147. <meta name="select:post margin" content="40" title="40px">
  148. <meta name="select:post margin" content="50" title="50px">
  149.  
  150. <meta name="text:body font" content="12" />
  151.  
  152. <meta name="if:Link1" content="1" />
  153. <meta name="if:Link2" content="1" />
  154. <meta name="if:Link3" content="1" />
  155. <meta name="if:Link4" content="1" />
  156. <meta name="if:Link5" content="1" />
  157. <meta name="if:Link6" content="1" />
  158. <meta name="if:Link7" content="1" />
  159. <meta name="if:Link8" content="1" />
  160.  
  161. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  162. <meta name="text:CustomLink1Name" content="Link 1" />
  163. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  164. <meta name="text:CustomLink2Name" content="Link 2" />
  165. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  166. <meta name="text:CustomLink3Name" content="Link 3" />
  167. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  168. <meta name="text:CustomLink4Name" content="Link 4" />
  169. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  170. <meta name="text:CustomLink5Name" content="Link 5" />
  171. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  172. <meta name="text:CustomLink6Name" content="Link 6" />
  173. <meta name="text:CustomLink7URL" content="Link 7 URL" />
  174. <meta name="text:CustomLink7Name" content="Link 7" />
  175. <meta name="text:CustomLink8URL" content="Link 8 URL" />
  176. <meta name="text:CustomLink8Name" content="Link 8" />
  177.  
  178. <meta name="image:background" content=""/>
  179. <meta name="image:header" content="" />
  180.  
  181. <meta name="if:inverted tumblr controls" content="0" />
  182. <meta name="if:Small Cursor" content="0" />
  183. <meta name="if:dashboard blockquotes" content="1" />
  184. <meta name="if:Custom Text Selection" content="1"/>
  185. <meta name="if:Faded Images" content="0"/>
  186. <meta name="if:Grayscale Images" content="0"/>
  187. <meta name="if:Show Captions" content="1"/>
  188. <meta name="if:Show Tags" content="1"/>
  189. <!--Custom Options-->
  190.  
  191. <style type="text/css">
  192.  
  193. /*----------FADE-IN ANIMATION----------*/
  194.  
  195. @keyframes fadein {
  196.     from {opacity:0;}
  197.     to {opacity:1;}
  198. }
  199.  
  200. @-moz-keyframes fadein { /* Firefox */
  201.     from {opacity:0;}
  202.     to {opacity:1;}
  203. }
  204.  
  205. @-webkit-keyframes fadein { /* Safari and Chrome */
  206.     from {opacity:0;}
  207.     to {opacity:1;}
  208. }
  209.  
  210. @-o-keyframes fadein { /* Opera */
  211.     from {opacity:0;}
  212.     to {opacity: 1;}
  213. }
  214.  
  215. /*----------TUMBLR CONTROLS----------*/
  216.  
  217. iframe.tmblr-iframe {
  218.     z-index:99999999999999!important;
  219.     top:20px!important;
  220.     right:25px!important;
  221.     opacity:0.4;
  222.     {block:ifinvertedtumblrcontrols}
  223.     filter:invert(1);
  224.     -webkit-filter:invert(1);
  225.     -o-filter:invert(1);
  226.     -moz-filter:invert(1);
  227.     -ms-filter:invert(1);
  228.     {/block:ifinvertedtumblrcontrols}
  229.     transform:scale(0.6);
  230.     transform-origin:100% 0;
  231.     -webkit-transform:scale(0.6);
  232.     -webkit-transform-origin:100% 0;
  233.     -o-transform:scale(0.6);
  234.     -o-transform-origin:100% 0;
  235.     -moz-transform:scale(0.6);
  236.     -moz-transform-origin:100% 0;
  237.     -ms-transform:scale(0.6);
  238.     -ms-transform-origin:100% 0;
  239.     -webkit-transition: 0.8s ease;
  240.     -moz-transition: 0.8s ease;
  241.     -o-transition: 0.8s ease;
  242.     transition: 0.8s ease;
  243. }
  244.  
  245. iframe.tmblr-iframe:hover {
  246.     opacity:0.6!important;
  247.     -webkit-transition: 0.8s ease;
  248.     -moz-transition: 0.8s ease;
  249.     -o-transition: 0.8s ease;
  250.     transition: 0.8s ease;
  251. }
  252.  
  253. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  254.  
  255. .vignette, #vignette {
  256.     opacity:0;
  257. }
  258. .lightbox-image, #tumblr_lightbox img {
  259.     box-shadow:none !important;
  260.     border-radius:0 !important;
  261.     max-width:none;
  262. }
  263.  
  264. .tmblr-lightbox, #tumblr_lightbox {
  265.     background-color:rgba({RGBcolor:Background}, 0.6) !important;
  266. }
  267.  
  268. .lightbox-image, #tumblr_lightbox img {
  269.     background-color: {color:posts} !important;
  270.     padding: 10px !important;
  271.     -moz-box-sizing:border-box;
  272.     box-sizing:border-box;
  273. }
  274.  
  275. /*----------SCROLLBAR----------*/
  276.  
  277. ::-webkit-scrollbar {
  278.     width: 6px;
  279.     height: 6px;
  280. }
  281. ::-webkit-scrollbar-button {
  282.     width: 0px;
  283.     height: 0px;
  284. }
  285. ::-webkit-scrollbar-thumb {
  286.     background: {color:Scrollbar};
  287.     border: 2px solid {color:Background};
  288. }
  289.  
  290. ::-webkit-scrollbar-track {
  291.     background: {color:Background};
  292.     border: 8px solid {color:Background};
  293. }
  294.  
  295. ::-webkit-scrollbar-corner {
  296.     background: transparent;
  297. }
  298.  
  299.  
  300. /*----------TOOLTIPS----------*/
  301.  
  302. #s-m-t-tooltip {
  303.     max-width:300px;
  304.     padding:2px 5px;
  305.     margin: -20px 7px -2px 20px;
  306.     background-color: {color:posts};
  307.     font-size:9px;
  308.     letter-spacing:2px;
  309.     text-transform:lowercase;
  310.     color: {color:text};
  311.     z-index:999999999999999999999999999999999999;
  312.     border: 1px solid {color:post borders};
  313. }
  314.  
  315. /*----------TEXT SELECTION----------*/
  316.  
  317. {block:ifCustomTextSelection}
  318. ::selection {
  319.     background: {color:text selection background};
  320.     color: {color:text selection};
  321. }
  322.  
  323. ::-moz-selection {
  324.     background: {color:text selection background};
  325.     color: {color:text selection};
  326. }
  327.  
  328. ::-webkit-selection {
  329.     background: {color:text selection background};
  330.     color: {color:text selection};
  331. }
  332. {/block:ifCustomTextSelection}
  333.  
  334. /*----------THEME BASICS----------*/
  335.  
  336. html, body {
  337.     color: {color:text};
  338.     font-family: {select:Body Font}, helvetica, sans-serif;
  339.     font-weight: 400;
  340.     font-size:{text:body font}px;
  341.     line-height:180%;
  342.     margin:0;
  343.     padding: 0;
  344.     text-align:left;
  345.     background: {color:background}; url({image:Background}) center;
  346.     background-attachment: {select:Background Attachment};
  347.     background-repeat: {select:Background Repeat};
  348.     -webkit-font-smoothing: antialiased;
  349.     -moz-osx-font-smoothing: grayscale;
  350.     animation: fadein 2.5s;
  351.     -moz-animation: fadein 2.5s; /* Firefox */
  352.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  353.     -o-animation: fadein  2.5s; /* Opera */
  354. }
  355.  
  356. p:empty {
  357.     display: none;
  358. }
  359.  
  360. b,strong {
  361.     color:{color:bold};
  362.     font-weight: 700;
  363. }
  364.  
  365. i,em {
  366.     color:{color:italic};
  367. }
  368.  
  369. u {
  370.     color:{color:underline};
  371. }
  372.  
  373. hr {
  374.     width: 30%;
  375.     height: 1px;
  376.     background-color: {color:post borders};
  377.     color: {color:post borders};
  378.     border: 0px solid transparent;
  379. }
  380.  
  381. small,sub,sup {
  382.     font-size: 10px;
  383. }
  384.  
  385. h1,h2,h3 {
  386.     font-weight: 700;
  387.     font-size: 2em;
  388.     color: {color:bold};
  389. }
  390.  
  391. h4,h5,h6 {
  392.     font-weight: 700;
  393.     font-size: 1.8em;
  394.     color: {color:bold};
  395. }
  396.  
  397. pre {
  398.     white-space: pre-wrap;
  399.     white-space: -moz-pre-wrap;
  400.     white-space: -pre-wrap;
  401.     white-space: -o-pre-wrap;
  402.     word-wrap: break-word;
  403.     padding: 5px 10px;
  404.     font-family: inherit;
  405.     font-weight: 400;
  406.     line-height: 150%;
  407.     background-color:{color:post content background};
  408. }
  409.  
  410. blockquote:not(.tumblr_parent) {
  411.     padding-left:10px;
  412.     margin: 10px;
  413.     border-left:1px solid {color:blockquote};
  414. }
  415.  
  416. blockquote img {
  417.     max-width: 100%;
  418.     height: auto;
  419. }
  420.  
  421. a {
  422.     color:{color:links};
  423.     text-decoration:none;
  424.     -moz-transition-duration: 0.5s;
  425.     -o-transition-duration: 0.5s;
  426.     -webkit-transition-duration: 0.5s;
  427.     transition-duration: 0.5s;
  428. }
  429.  
  430. a:hover {
  431.     color:{color:link hover};
  432.     -moz-transition-duration: 0.5s;
  433.     -o-transition-duration: 0.5s;
  434.     -webkit-transition-duration: 0.5s;
  435.     transition-duration: 0.5s;
  436. }
  437.  
  438. {block:ifSmallCursor}
  439. html, body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto !important; }
  440. a:hover{cursor:url("http://i.imgur.com/IepP2.jpg"), auto !important; }
  441. {/block:ifSmallCursor}
  442.  
  443. /*----------PAGINATION----------*/
  444.  
  445. #pagination {
  446.     height:auto;
  447.     width:auto;
  448.     letter-spacing:1px;
  449.     margin-left:auto;
  450.     margin-right:auto;
  451.     margin-left: -40px;
  452.     margin-bottom: 60px;
  453.     margin-top: 10px;
  454.     font-size:10px;
  455.     text-transform:uppercase;
  456.     z-index:4;
  457.     text-align:center;
  458.     background:transparent;
  459. }
  460.  
  461. .sf-chevron-left, .sf-chevron-right {
  462.     font-size: 5px;
  463. }
  464.  
  465. #pagination a {
  466.     margin-left:1px;
  467.     background-color: {color:posts};
  468.     border:1px solid {color:post borders};
  469.     border-radius:3px;
  470.     padding:10px;
  471.     color: {color:pagination};
  472.     text-decoration:none;
  473.     -webkit-transition:all 0.8s ease-out;
  474.     -moz-transition:all 0.8s ease-out;
  475.     transition:all 0.8s ease-out;
  476. }
  477.  
  478.  
  479.  
  480. #pagination a:hover {
  481.     color: {color:accented text};
  482.     background-color: {color:accent};
  483.     border:1px solid {color:accent};
  484.     -webkit-transition:all 0.8s ease-out;
  485.     -moz-transition:all 0.8s ease-out;
  486.     transition:all 0.8s ease-out;
  487. }
  488.  
  489. /*----------POSIS----------*/
  490.  
  491. .wrap {
  492.     position: relative;
  493.     width: calc({select:post size}px + 900px);
  494.     margin: auto;
  495. }
  496.  
  497. #content {
  498.     margin: 20px auto 30px auto;
  499.     padding-top: 30px;
  500.     width: calc({select:Post Size}px * {select:number of columns} + 100px);
  501.     column-count: {select:number of columns};
  502.     column-gap: 10px;
  503.     {block:PermalinkPage}
  504.     column-count: 1;
  505.     width: 540px;
  506.     margin: 20px auto;
  507.     {/block:PermalinkPage}
  508. }
  509.  
  510. .posts {
  511.     position: relative;
  512.     break-inside: avoid;
  513.     width: {select:post size}px;
  514.     background-color: {color:posts};
  515.     border: 1px solid {color:post borders};
  516.     {block:IndexPage}
  517.     margin-bottom: calc(10px + 50px);
  518.     {/block:IndexPage}
  519.     {block:PermalinkPage}
  520.     margin-bottom: 50px;
  521.     width: 540px;
  522.     {/block:PermalinkPage}
  523. }
  524.  
  525. .posts ul li {
  526.     list-style: none;
  527.     margin-left: -25px;
  528.     padding-left: 10;
  529. }
  530.  
  531. .posts ul li:before {
  532.     content: "―";
  533.     padding-right: 5px;
  534.     color: {color:accent};
  535. }
  536.  
  537. .posts ol {
  538.     list-style-type: upper-roman;
  539.     text-transform: justify;
  540.     margin-left: -10px;
  541. }
  542.  
  543. .posts iframe {
  544.     max-width:100%;
  545.     display: block;
  546.     padding: 0;
  547.     margin: 0
  548. }
  549.  
  550. .posts img {
  551.     max-width: 100%;
  552.     display: block;
  553.     border: 0;
  554. }
  555.  
  556. .tumblr_video_container {
  557.     width: auto !important;
  558.     height: auto !important;
  559. }
  560.  
  561. .posts .photo img {
  562.     {block:ifFadedImages}
  563.     {block:IndexPage}
  564.     opacity: 0.6;
  565.     -moz-transition: all 0.8s ease-in;
  566.     -o-transition: all 0.8s ease-in;
  567.     -webkit-transition: all 0.8s ease-in;
  568.     transition: all 0.8s ease-in;
  569. }
  570.  
  571. .posts:hover .photo img {
  572.     opacity: 1.0;
  573.     -moz-transition: all 0.8s ease-in;
  574.     -o-transition: all 0.8s ease-in;
  575.     -webkit-transition: all 0.8s ease-in;
  576.     transition: all 0.8s ease-in;
  577.     {/block:IndexPage}
  578.     {/block:ifFadedImages}
  579. }
  580.  
  581. {block:ifGrayscaleImages}
  582. {block:IndexPage}
  583. .posts .photo img {
  584.     z-index: -9999999999999999999999999px;
  585.     -webkit-filter: grayscale(100%);
  586.     filter: grayscale(100%);
  587.     filter: gray;
  588.     /* IE 6-9 */
  589.     -moz-transition: all 0.8s ease-in;
  590.     -o-transition: all 0.8s ease-in;
  591.     -webkit-transition: all 0.8s ease-in;
  592.     transition: all 0.8s ease-in;
  593. }
  594.  
  595. .posts:hover .photo img {
  596.     -webkit-filter: none;
  597.     filter: none;
  598.     -moz-transition: all 0.8s ease-in;
  599.     -o-transition: all 0.8s ease-in;
  600.     -webkit-transition: all 0.8s ease-in;
  601.     transition: all 0.8s ease-in;
  602. }
  603. {/block:IndexPage}
  604. {/block:ifGrayscaleImages}
  605.  
  606. /*----------TEXT/CAPTION CONTAINER----------*/
  607.  
  608. .photo, .video, .chatp {
  609.     padding: {select:Post Padding}px;
  610.     border-bottom: 1px solid {color:post borders};
  611.     {block:IfnotShowCaptions}
  612.     border-bottom: none;
  613.     {/block:IfnotShowCaptions}
  614. }
  615.  
  616. .caption {
  617.     padding: 5px 10px;
  618.     text-align: {select:text align};
  619. }
  620.  
  621. .caption a.tumblr_blog {
  622.     font-size: {text:body font}px;
  623.     font-weight: 600;
  624.     color: {color:links};
  625.     margin-bottom: 5px;
  626. }
  627.  
  628. .caption a.tumblr_blog:hover {
  629.     letter-spacing: 2px;
  630.     color: {color:link hover};
  631. }
  632.  
  633. .tumblr_parent {
  634.     margin: 0px -10px 0px;
  635.     padding: 15px 15px 0;
  636.     border-bottom: 1px solid {color:post borders};
  637. }
  638.  
  639. .tumblr_parent:last-of-type {
  640.     border: none;
  641. }
  642.  
  643. .tumblr_parent blockquote {
  644.     margin-left:10px;
  645.     padding-left:10px;
  646.     border-left: 1px solid {color:blockquote};
  647. }
  648.  
  649. .tumblr_parent blockquote img {
  650.     max-width: 100%;
  651.     height: auto;
  652. }
  653.  
  654. .tumblr_avatar {
  655.     margin-right: 10px;
  656.     width: 25px;
  657.     height: 25px;
  658.     float: left;
  659.     border-radius: 100%;
  660. }
  661.  
  662. .read_more {
  663.     position: relative;
  664.     width: 100%;
  665.     -webkit-transition: all 0.9s ease;
  666.     -moz-transition: all 0.9s ease;
  667.     -o-transition: all 0.9s ease;
  668.     transition: all 0.9s ease;
  669.     position: relative;
  670.     left: calc(50% - 40px);
  671.     color: {color:links};
  672.     border-bottom: 2px solid {color:accent};
  673. }
  674.  
  675. .read_more:hover {
  676.     color: {color:link hover};
  677.     border-bottom: 2px solid transparent;
  678.     -webkit-transition: all 0.9s ease;
  679.     -moz-transition: all 0.9s ease;
  680.     -o-transition: all 0.9s ease;
  681.     transition: all 0.9s ease;
  682. }
  683.  
  684. /*----------POST INFO & PERMALINKS----------*/
  685.  
  686. #topinfo {
  687.    padding: 10px;
  688.     border-bottom: 1px solid {color:post borders};
  689.     width: calc({select:Post Size}px - 20px);
  690.     text-transform: lowercase;
  691.     font-family: 'Exo', sans-serif;
  692.     font-weight: 500;
  693.     font-size: 10px;
  694.     color: {color:permalink};
  695.     background-color: {color:permalink background};
  696. }
  697.  
  698. #topinfo a {
  699.     color: {color:permalink};
  700.     font-size: 10px;
  701.     font-family: 'Exo', sans-serif;
  702.     font-weight: 500;
  703.     text-align: left;
  704. }
  705.  
  706. #topinfo > span {
  707.     color: {color:permalink};
  708. }
  709.  
  710. #topinfo a:hover {
  711.     color: {color:permalink hover};
  712. }
  713.  
  714. .date a {
  715.     display: inline-block;
  716.     margin: 0px 3px;
  717. }
  718.  
  719. .time {
  720.     padding: 10px;
  721.     border-top: 1px solid {color:post borders};
  722.     width: calc({select:Post Size}px - 20px);
  723.     text-transform: lowercase;
  724.     font-family: 'Exo', sans-serif;
  725.     font-weight: 500;
  726.     font-size: 10px;
  727.     color: {color:permalink};
  728.     background-color: {color:permalink background};
  729. }
  730.  
  731. .time a {
  732.     color: {color:permalink};
  733.     font-size: 9px;
  734.     font-family: 'Exo', sans-serif;
  735.     font-weight: 500;
  736.     text-align: left;
  737. }
  738.  
  739. .time > span {
  740.     color: {color:permalink};
  741. }
  742.  
  743. .time a:hover {
  744.     color: {color:permalink hover};
  745. }
  746.  
  747. .reblogpic {
  748.     margin-right: 7px;
  749.     width: 20px;
  750.     height: 20px;
  751.     float: left;
  752.     border-radius: 100%;
  753. }
  754.  
  755. .src {
  756.     display: inline-block;
  757.     vertical-align: middle;
  758. }
  759.  
  760. .pe-7s-repeat {
  761.     display: inline-block;
  762.     vertical-align: middle;
  763.     margin-top: 2px;
  764.     font-size: 10px;
  765. }
  766.  
  767. /*----------LIKE/REBLOG----------*/
  768.  
  769. .likereblog {
  770.     margin-top: 2px;
  771. }
  772.  
  773. .controls a {
  774.    position:relative;
  775.    display:inline-block;
  776. }
  777.  
  778. .controls a:hover {
  779.     color: {color:permalink hover};
  780. }
  781.  
  782. .lnr-sync {
  783.     font-size: 14px;
  784. }
  785.  
  786. .sf-heart-o {
  787.     color: {color:permalink};
  788.     opacity: 0.6;
  789.     font-size: 13px;
  790.     -moz-transition-duration: 0.5s;
  791.     -o-transition-duration: 0.5s;
  792.     -webkit-transition-duration: 0.5s;
  793.     transition-duration: 0.5s;
  794. }
  795.  
  796. .sf-heart-o:hover {
  797.     color: {color:permalink hover};
  798. }
  799.  
  800. .controls .like .liked + .sf-heart-o {
  801.    opacity: 1;
  802. }
  803.  
  804. .controls .like .liked + .sf-heart-o {
  805.      color: #ec5a5a;
  806. }
  807.  
  808. .controls .like .like_button iframe {
  809.    position:absolute;
  810.    top: 0;
  811.    left:0;
  812.    bottom:0;
  813.    right:0;
  814.    width:100%;
  815.    height:100%;
  816.    z-index:2;
  817.    opacity:0;
  818. }
  819.  
  820.  
  821. /*--------POST TAGS--------*/
  822.  
  823. .post_tags {
  824.     position: absolute;
  825.     width: calc({select:Post Size}px - 20px);
  826.     padding: 10px;
  827.     white-space: nowrap;
  828.     overflow: hidden;
  829.     margin-top: 1px;
  830.     opacity: 0;
  831.     -webkit-transition: all 0.6s ease-in-out;
  832.     -moz-transition: all 0.6s ease-in-out;
  833.     -o-transition: all 0.6s ease-in-out;
  834. }
  835.  
  836. .posts:hover .post_tags {
  837.     opacity: 1.0;
  838.     -webkit-transition: all 0.6s ease-in-out;
  839.     -moz-transition: all 0.6s ease-in-out;
  840.     -o-transition: all 0.6s ease-in-out;
  841. }
  842.  
  843. .post_tags.draggable .post_tags_inner {
  844.     cursor: col-resize;
  845.     -webkit-touch-callout: none;
  846.     -webkit-user-select: none;
  847.     -khtml-user-select: none;
  848.     -moz-user-select: none;
  849.     -ms-user-select: none;
  850.     user-select: none;
  851. }
  852.  
  853. .post_tags_inner {
  854.     float: left;
  855.     position: relative;
  856.     padding: 0px 20px 0px 0;
  857. }
  858.  
  859. .post_tags a,
  860. .post_tags .post_tag {
  861.     display: inline-block;
  862.     margin-left: 3px;
  863.     color: #000;
  864.     font-family: 'Exo', sans-serif;
  865.     font-weight: 500;
  866.     font-size: 9px;
  867. }
  868.  
  869. .post_tags:after {
  870.     content: '';
  871.     position: absolute;
  872.     top: 0;
  873.     right: 0;
  874.     bottom: 0;
  875.     width: 50px;
  876.     background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0, {color:background} 100%);
  877. }
  878.  
  879. .post_tags a:hover,
  880. .post_tags .post_tag:hover,
  881. .post_tags a:focus,
  882. .post_tags .post_tag:focus,
  883. .post_tags a:active,
  884. .post_tags .post_tag:active {color:{color:permalink hover};}
  885.  
  886. /*----------PERMALINK PAGE----------*/
  887.  
  888. #perma {
  889.     width: calc(540px - 10px);
  890.     padding: 10px 5px;
  891.     margin-left: calc(auto - 30px);
  892.     margin-top: -10px;
  893.     background-color: {color:posts};
  894.     text-align: center;
  895.     text-transform: lowercase;
  896.     border: 1px solid {color:post borders};
  897. }
  898.  
  899. #perma span {
  900.     font-family: 'Lora', serif;
  901.     font-size: 16px;
  902.     color: {color:accent 2};
  903. }
  904.  
  905. #permatg {
  906.     width: calc(540px - 20px);
  907.     padding: 10px;
  908.     margin: 10px auto 10px;
  909.     background-color: {color:posts};
  910.     border: 1px solid {color:post borders};
  911.     text-align: center;
  912.     text-transform: lowercase;
  913. }
  914.  
  915. #permatg a {
  916.     display: inline-block;
  917.     margin: 0 5px;
  918.     color: {color:permalink};
  919. }
  920.  
  921. .rb {
  922.     position: absolute;
  923.     left: calc(50% - 25px);
  924.     margin-top: 25px;
  925.     display: inline-block;
  926.     z-index: 10;
  927. }
  928.  
  929. .root img, .via img {
  930.     border-radius: 100%;
  931.     padding: 3px;
  932.     margin-right: 2px;
  933.     border: 1px solid {color:post borders};
  934.     background-color: {color:posts};  
  935. }
  936.  
  937. #notecontainer {
  938.     margin-left: calc(auto - 30px);
  939.     margin: 40px 0;
  940.     width: calc(540px + 0px);
  941.     font-size: 10px;
  942.     color: #888;
  943.     background-color: {color:posts};
  944.     position: relative;
  945.     border: 1px solid {color:post borders};
  946. }
  947.  
  948. #notecontainer ol.notes {
  949.     list-style-type: none;
  950.     margin: 0;
  951.     padding: 0;
  952.     font-size: {text:body font}px;
  953. }
  954.  
  955. #notecontainer ol.notes li.note {
  956.     border-bottom: 1px solid {color:post borders};
  957.     padding: 15px;
  958. }
  959.  
  960. #notecontainer img.avatar {
  961.     margin-right: 10px;
  962.     vertical-align: middle;
  963.     width: 20px;
  964.     height: 20px;
  965.     border-radius: 10px;
  966. }
  967.  
  968. /*----------TUMBLR TEXT/LINKS----------*/  
  969.  
  970. .posts .title {
  971.     color: {color:post title};
  972.     border-bottom: 1px solid {color:post borders};
  973.     font-size: 16px;
  974.     font-family: {select:Body Font}, helvetica, sans-serif;
  975.     font-weight: 600;
  976.     padding: 7px 10px;
  977.     line-height: 200%;
  978.     text-transform: lowercase;
  979.     text-align: center;
  980. }
  981.  
  982. .posts .title span {
  983.     border-bottom: 3px solid {color:accent};
  984.     padding-bottom: 10px;
  985. }
  986.  
  987. .posts .link {
  988.     color: {color:post title};
  989.     border-bottom: 1px solid {color:post borders};
  990.     font-size: 16px;
  991.     font-family: {select:Body Font}, helvetica, sans-serif;
  992.     font-weight: 600;
  993.     padding: 7px 10px;
  994.     line-height: 200%;
  995.     text-transform: lowercase;
  996.     text-align: center;
  997.     -webkit-transition: all 0.6s ease-in-out;
  998.     -moz-transition: all 0.6s ease-in-out;
  999.     -o-transition: all 0.6s ease-in-out;
  1000. }
  1001.  
  1002. .posts .link span {
  1003.     border-bottom: 3px solid {color:accent};
  1004.     padding-bottom: 10px;
  1005. }
  1006.  
  1007. .posts .link:hover {
  1008.     color: {color:link hover};
  1009.     -webkit-transition: all 0.6s ease-in-out;
  1010.     -moz-transition: all 0.6s ease-in-out;
  1011.     -o-transition: all 0.6s ease-in-out;
  1012. }
  1013.  
  1014. .posts .link a {
  1015.     color: {color:post title};
  1016. }
  1017.  
  1018. .posts .link a:hover {
  1019.     color: {color:link hover};
  1020. }
  1021.  
  1022. /*----------TUMBLR QUOTES----------*/  
  1023.  
  1024. .qt {
  1025.     padding: 15px;
  1026. }
  1027.  
  1028. .quote {
  1029.     font-size: 14px;
  1030.     font-family: 'Lora', serif;
  1031.     text-transform: uppercase;
  1032.     line-height: 25px;
  1033.     text-align: center;
  1034.     padding: 15px;
  1035.     border-top: 1px solid {color:post borders};
  1036.     border-bottom: 1px solid {color:post borders};
  1037. }
  1038.  
  1039. .qtsource {
  1040.     font-size:{text:body font}px;
  1041. }
  1042.  
  1043. .quote-box {
  1044.     width: 5px;
  1045.     height: 5px;
  1046.     font-size: 20px;
  1047.     margin-bottom: 20px;
  1048.     color: {color:text};
  1049. }
  1050.  
  1051. /*----------TUMBLR AUDIO----------*/
  1052.  
  1053. .audiowrapper {
  1054.     height: 90px;
  1055.     width: 100%;
  1056.     padding: 13px;
  1057. }
  1058.  
  1059. .playbutton {
  1060.     width: 30px;
  1061.     height: 30px;
  1062.     overflow: hidden;
  1063.     position: absolute;
  1064.     margin-top: 23px;
  1065.     margin-left: 20px;
  1066.     z-index: 999999;
  1067. }
  1068.  
  1069. .playbox {
  1070.     background-color: white;
  1071.     width: 70px;
  1072.     height: 70px;
  1073.     border-radius: 10%;
  1074.     z-index: 1;
  1075.     position:absolute;
  1076.     margin-top: 17px;
  1077.     margin-left: 16px;
  1078.     opacity: 0.6;
  1079.     -webkit-transition: all 0.6s ease-in-out;
  1080.     -moz-transition: all 0.6s ease-in-out;
  1081.     -o-transition: all 0.6s ease-in-out;
  1082. }
  1083.  
  1084. .playbox:hover {
  1085.     opacity: 0.9;
  1086.     -webkit-transition: all 0.6s ease-in-out;
  1087.     -moz-transition: all 0.6s ease-in-out;
  1088.     -o-transition: all 0.6s ease-in-out;
  1089. }  
  1090.            
  1091. .audioimgwrapper {
  1092.     overflow: hidden;
  1093.     width: 102px;
  1094.     height: 102px;
  1095. }
  1096.            
  1097. .audioimgwrapper img {
  1098.     width: 100%;
  1099.     height: auto;
  1100. }
  1101.            
  1102. .trackdetails {
  1103.     height: 80px;
  1104.     width: 100%;
  1105. }
  1106.  
  1107. .trackdetails b {
  1108.     color: {color:audio bold};
  1109.     font-weight: 700;
  1110.     text-transform: lowercase;
  1111. }  
  1112.  
  1113. .track, .artist, .album {
  1114.     padding: 3px 10px;
  1115.     height: 25px;
  1116.     margin-bottom: 0px;
  1117.     overflow: hidden;
  1118. }
  1119.  
  1120. .pe-7s-micro, .pe-7s-music, .pe-7s-album {
  1121.     margin-right: 7px;
  1122.     font-size: calc({text:body font}px + 2px);
  1123.     border: 1px solid {color:post borders};
  1124.     display: inline-block;
  1125.     vertical-align: middle;
  1126.     color: {color:permalink};
  1127.     background-color: {color:permalink background};
  1128.     padding: 5px;
  1129.     height: calc({text:body font}px + 3px);
  1130.     border-radius: 20%;
  1131. }
  1132.  
  1133. /*----------TUMBLR QUESTION/ANSWER----------*/
  1134.  
  1135. #askcont {padding:10px;}
  1136.  
  1137. .sender {
  1138.     width: 48px;
  1139.     height: 48px;
  1140.     float: left;
  1141.     margin-top: 5px;
  1142.     margin-right: 10px;
  1143.     border-radius: 100%;
  1144.     position: relative;
  1145. }
  1146.  
  1147. #asker {
  1148.     color: {color:text};
  1149.     font-weight: 400;
  1150.     text-align: left;
  1151.     padding: 10px;
  1152.     height: 40px;
  1153. }
  1154.  
  1155. #asker .asked {
  1156.     font-size: 11px;
  1157.     color: {color:text};
  1158.     line-height: 3px;
  1159. }
  1160.  
  1161. #asker #sender {
  1162.     font-family: 'Lora', serif;
  1163.     font-size: 15px;
  1164.     color: {color:accent};
  1165.     line-height: 20px;
  1166.     margin-bottom: -5px;
  1167. }
  1168.  
  1169. #asker a {
  1170.     color: {color:text};
  1171.     font-weight: 400;
  1172.     text-align: center;
  1173. }
  1174.  
  1175. #asker a:hover {
  1176.     color: {color:link hover};
  1177. }
  1178.  
  1179. .question {
  1180.     text-align: justify;
  1181.     padding: 10px;
  1182.     background-color: {color:post content background};
  1183.     color: {color:question};
  1184.     border-bottom: 1px solid {color:post borders};
  1185.     position: relative;
  1186. }
  1187.  
  1188. .question:after {
  1189.     top: 100%;
  1190.     left: 50%;
  1191.     border: solid transparent;
  1192.     content: " ";
  1193.     height: 0;
  1194.     width: 0;
  1195.     position: absolute;
  1196.     pointer-events: none;
  1197.     border-top-color: {color:post content background};
  1198.     border-width: 15px;
  1199.     margin-left: -20px;
  1200. }
  1201.  
  1202. /*----------TUMBLR CHAT----------*/
  1203.  
  1204. .chat .line {
  1205.     margin-top: 0px;
  1206.     padding: 20px;
  1207.     margin-bottom: 0px;
  1208.     border-bottom: 1px solid {color:post borders};
  1209. }
  1210.  
  1211. .chat .line:last-of-type {
  1212.     margin-bottom: 0px;
  1213.     border-bottom: none;
  1214. }
  1215.  
  1216. .chat .label {
  1217.     text-transform: capitalize;
  1218. }
  1219.  
  1220. .line:nth-child(odd) .label b {
  1221.     color: {color:chat};
  1222. }
  1223.  
  1224. .line:nth-child(even) .label b {
  1225.     color: {color:text};
  1226. }
  1227.  
  1228. /*----------SCROLL TO TOP---------*/
  1229.  
  1230. #scrollToTop:link,
  1231. #scrollToTop:visited {
  1232.     display: none;
  1233.     position: fixed;
  1234.     font-size: 10px;
  1235.     bottom: 15px;
  1236.     right: 20px;
  1237.     color: {color:accented text};
  1238.     background-color: {color:accent};
  1239.     padding: 0px 5px;
  1240.     width: auto;
  1241.     z-index: 900;
  1242. }
  1243.  
  1244. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  1245.  
  1246. .cred {
  1247.     position: fixed;
  1248.     bottom: 30px;
  1249.     right: 30px;
  1250.     z-index: 900;
  1251. }
  1252.  
  1253. .cred img {
  1254.     width: 40px;
  1255.     height: 40px;
  1256. }
  1257.  
  1258. {CustomCSS}
  1259. </style>
  1260.  
  1261. <!-------------------SCRIPTS/JQUERY (PART ONE)------------------->
  1262.  
  1263. <!-----------Tooltips Script----------->
  1264. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1265. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1266. <script src="http://static.tumblr.com/pbhn8p5/uhVos7fkg/tooltips.js"></script>
  1267. <!-----------Tooltips Script----------->
  1268.  
  1269. <!-----------Scroll To Top Script----------->
  1270. <script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1271. <!-----------Scroll To Top Script----------->
  1272.  
  1273. <script>
  1274. //Audio player script
  1275.     $(document).ready(function() {
  1276.       $('iframe.tumblr_audio_player').load( function() {
  1277.          $('iframe.tumblr_audio_player').contents().find("head")
  1278.             .append($("<style type='text/css'> .audio-player{background:#fff !important} </style>"));
  1279. //audio player script
  1280.       });
  1281. //search suggestions script    
  1282.          $('.search').submit(function(event){
  1283.        var value = $('input:first').val();
  1284.        location.replace('http://{Name}.tumblr.com/tagged/' + value);
  1285.    });
  1286.    //search suggestions script  
  1287.    });
  1288. </script>
  1289.  
  1290. <!-------------------SCRIPTS/JQUERY (PART ONE)------------------->
  1291.  
  1292. </head>
  1293.  
  1294. <body>
  1295.  
  1296. <!-----------SCROLL TO TOP ----------->
  1297. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top">go to top</a>
  1298. <!-----------SCROLL TO TOP ----------->
  1299.  
  1300. <div class="wrap"> <!-----------POST CONTAINER----------->
  1301. <section id="content"><!-----------POST WRAP----------->
  1302. {block:Posts}
  1303. <article class="posts"><!-----------POSTS----------->
  1304.  
  1305. {block:ContentSource}
  1306. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1307. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1308. {/block:SourceLogo}
  1309. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1310. {/block:ContentSource}
  1311.  
  1312. <!-- {block:NoRebloggedFrom}
  1313. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1314. {/block:NoRebloggedFrom} -->
  1315.  
  1316. {block:IndexPage}
  1317. <!-----------POST INFO/PERMALINKS----------->
  1318. <div id="topinfo">
  1319.  
  1320. <div class="date">
  1321. {block:RebloggedFrom}<img class="reblogpic" src="{ReblogParentPortraitURL-24}"> <a class="src" href="{ReblogParentURL}" title="via">{ReblogParentName}</a>
  1322.  
  1323. <i class="pe-7s-repeat" style="color:{color:permalink};"></i>
  1324.  
  1325. <a class="src" href="{ReblogRootURL}" title="source">{ReblogRootName}</a>
  1326.  
  1327. {/block:RebloggedFrom}
  1328. {block:NotReblog}
  1329. <img class="reblogpic" src="{PortraitURL-24}"> <a class="src" href="{Permalink}">{Name}</a>
  1330. {/block:NotReblog}
  1331. </div>
  1332. </div>
  1333.  
  1334. <!-----------POST INFO/PERMALINKS----------->
  1335. {/block:IndexPage}
  1336.  
  1337. {block:Text}
  1338. {block:Title}<div class="title"><span>{Title}</span></div>{/block:Title}
  1339. <div class="caption">{Body}</div>
  1340. {/block:Text}
  1341.  
  1342. {block:Photo}
  1343. <div class="photo">
  1344. {LinkOpenTag}
  1345. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1346. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  1347. </a>
  1348. {LinkCloseTag}
  1349. </div>
  1350. {/block:Photo}
  1351.  
  1352. {block:Photoset}
  1353. <div class="photo">
  1354. <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>
  1355. </div>
  1356. {/block:Photoset}
  1357.  
  1358. {block:Quote}
  1359. <div class="qt">
  1360. <center>
  1361. <div class="quote-box">❞</div>
  1362. </center>
  1363. <div class="quote">
  1364. {Quote}
  1365. </div>
  1366. {block:Source}<div class="qtsource"><br><center>{Source}</center></div>{/block:Source}
  1367. </div>
  1368. {/block:Quote}
  1369.  
  1370. {block:Link}
  1371. <div class="link"><a href="{URL}"><span>{Name} »</span></a></div>
  1372. {block:Description}
  1373. <div class="caption">{Description}</div>
  1374. {block:ifnotdashboardstyleblockquotes}
  1375. <div class="text">{Description}</div>
  1376. {/block:ifnotdashboardstyleblockquotes}
  1377. {/block:Description}
  1378. {/block:Link}
  1379.  
  1380. {block:Audio}
  1381. <table class="audiowrapper">
  1382. <td class="audiocont">
  1383. <div class="playbox">
  1384. <div class="playbutton">
  1385. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1386. </div></div>
  1387. {block:AlbumArt}
  1388. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1389. {/block:AlbumArt}
  1390. </td>
  1391.  
  1392. <td class="trackdetails">
  1393. <div class="track">{block:TrackName}<i class="pe-7s-micro"></i><b>Track:</b> {TrackName}{/block:TrackName}</div>
  1394. <div class="artist">{block:Artist}<i class="pe-7s-music"></i><b>Artist:</b> {Artist}{/block:Artist}</div>
  1395. <div class="album">{block:Album}<i class="pe-7s-album"></i><b>Album:</b> {Album}{/block:Album}</div>
  1396. </td>
  1397. </table>
  1398. {/block:Audio}
  1399.  
  1400. {block:Video}
  1401. <div class="video">{Video-500}</div>
  1402. {/block:Video}
  1403.  
  1404. {block:Chat}
  1405. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1406. <div class="chatp">
  1407. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  1408. {Line}</div>{/block:Lines}</div>
  1409. </div>
  1410. {/block:Chat}
  1411.  
  1412. {block:Answer}
  1413. <div id="askcont">
  1414. <img class="sender" src="{AskerPortraitURL-48}"alt="">
  1415. <div id="asker">
  1416. <div id="sender">{Asker}</div>
  1417. <span class="asked">asked you a question</span></div>
  1418. </div>
  1419. <div class="question">{Question}&nbsp;</div>
  1420. <div class="caption">{Answer}</div>
  1421. {/block:Answer}
  1422.  
  1423. {block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1424. {block:IfnotShowCaptions}
  1425. {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfnotShowCaptions}
  1426.  
  1427. {block:IndexPage}
  1428. {block:Date}
  1429. <div class="time">
  1430. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonthWithZero}, {Year}</a>{/block:Date}
  1431. {block:NoteCount}<span>with</span> <a href="{Permalink}" title="permalink">{NoteCountWithLabel}</a>{/block:NoteCount}
  1432.  
  1433. <div class="likereblog" style="float:right;">
  1434. <div class="controls">
  1435. <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><span class="lnr lnr-sync"></span></a>
  1436. <a title="like this post" class="like">{LikeButton size="15"}
  1437. <span class="sf-heart-o"></span></a>
  1438. </div>
  1439. </div>
  1440. </div>
  1441. <!-----------POST TAGS----------->
  1442. {block:ifShowTags}
  1443.  {block:HasTags}
  1444. <div class="post_tags draggable">
  1445. <div class="post_tags_inner">{block:Tags}
  1446. <a href="{TagURL}"><span class="lnr lnr-tag" style="margin-right: 3px; color:{color:accent}"></span>{Tag}</a>{/block:Tags}</div></div>
  1447. {/block:HasTags}
  1448. {/block:ifShowTags}
  1449. <!-----------POST TAGS----------->
  1450. {/block:IndexPage}
  1451.  
  1452. </article> <!-----------POSTS----------->
  1453.  
  1454. <!-----------PERMALINK PAGE----------->
  1455. {block:PermalinkPage}
  1456. {block:Date}
  1457. <div id="perma">
  1458. <span>
  1459. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}
  1460. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  1461. </span>
  1462.  
  1463. {block:RebloggedFrom}
  1464. <div class="rb">
  1465. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>
  1466. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>
  1467. </div>
  1468. {/block:RebloggedFrom}
  1469.  
  1470. </div>
  1471.  
  1472. {block:HasTags}
  1473. <div id="permatg">
  1474. {block:Tags}<a href="{TagURL}" title="Tagged as"><span class="lnr lnr-tag" style="margin-right: 3px; color:{color:accent}"></span>{Tag}</a> {/block:Tags}
  1475. </div>
  1476. {/block:HasTags}
  1477.  
  1478. {block:PostNotes}
  1479. <div id="notecontainer">{PostNotes}</div>
  1480. {/block:PostNotes}
  1481. {/block:Date}
  1482. {/block:PermalinkPage}
  1483. <!-----------PERMALINK PAGE----------->
  1484.  
  1485. {/block:Posts}
  1486. </section><!------------------POSTS WRAPPER----------------------->
  1487.  
  1488. <footer id="pagination"> <!-----------PAGINATION----------->
  1489. {block:Pagination}
  1490. {block:PreviousPage}
  1491. <a href="{PreviousPage}"><span class="sf sf-chevron-left
  1492. "></span></a>
  1493. {/block:PreviousPage}
  1494. {block:JumpPagination length="5"}
  1495. {block:CurrentPage}
  1496. <a href="#" style="color:{color:pagination}; background-color:{color:accent};border:1px solid {color:accent};color:{color:accented text}"><span class="current_page">{CurrentPage}</a></span></a>
  1497. {/block:CurrentPage}
  1498. {block:JumpPage}
  1499. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1500. {/block:JumpPage}
  1501. {/block:JumpPagination}
  1502. {block:NextPage}
  1503. <a href="{NextPage}"><span class="sf sf-chevron-right
  1504. "></span></a>
  1505. {/block:NextPage}
  1506. {/block:Pagination}
  1507. </footer> <!-----------PAGINATION----------->
  1508.  
  1509. </div>  <!--------- POSTS CONTAINER ----------->
  1510.  
  1511. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1512. <a href="http://sheathemes.tumblr.com" class="cred" title="theme by sheathemes"><img src="http://static.tumblr.com/mans3zn/0xXowi0nk/credit.png"></a>
  1513. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1514.  
  1515. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  1516.  
  1517. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1518.  
  1519. <!--Pixel Union photosets script-->
  1520. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1521. <script src="http://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1522. <!--Pixel Union photosets script-->
  1523.  
  1524. <!--Video resizing script-->
  1525. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1526. <!--Video resizing script-->
  1527.  
  1528. <!--Un-nest Tumblr Captions by Neothm @ Tumnlr & Magnusthemes @ tumblr-->
  1529. <script src="http://static.tumblr.com/wgg6svp/P0Sofxcrj/unnest.min.js"></script>
  1530. <!--Un-nest Tumblr Captions by Neothm @ Tumnlr & Magnusthemes @ tumblr-->
  1531.  
  1532. <script>
  1533. $(document).ready(function(){
  1534.     $('.photo-slideshow').pxuPhotoset({
  1535.         lightbox: true,
  1536.         rounded: false,
  1537.         gutter: '{select:photoset gutter}px',
  1538.         photoset: '.photo-slideshow',
  1539.         photoWrap: '.photo-data',
  1540.         photo: '.pxu-photo'
  1541.     });
  1542.     {block:ifdashboardblockquotes}
  1543.     $('.posts').unnest({
  1544.         yourCaption: ".caption",
  1545.         wrapName: ".tumblr_parent",
  1546.         newCaptionUsername: true,
  1547.         originalPostCaptionUsername: false,
  1548.         tumblrAvatars: true,
  1549.         tumblrAvatarClass: ".tumblr_avatar",
  1550.         usernameColon: false });
  1551.     {/block:ifdashboardblockquotes}
  1552.        var color = '{color:accent}'; // color of play button (hex)
  1553.    $('.soundcloud_audio_player').each(function(){
  1554.        $(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: 116, width: '100%' });
  1555.    });
  1556. });
  1557. </script>
  1558.  
  1559. <!--Draggable Tags Script-->
  1560. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  1561. <script src="http://static.tumblr.com/pbhn8p5/OSRos9gz8/draggabletags.js"></script>
  1562. <!--Draggable Tags Script-->
  1563.  
  1564. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  1565.  
  1566. </body>
  1567. </html> <!---------------------------END--------------------------->
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!