chellescodes

"WONDER" THEME - FOR TUMBLR

Jul 20th, 2017
6,030
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 42.78 KB | None | 0 0
  1. <!--
  2.  
  3. =========DMMMM============DDDMMMMD=====M
  4. =====IMM====MMMN=========+MMMMMMMM=====M
  5. ===NM======MMMMM=======MMMMM==?MMMDD===M
  6. =+D~=======MM=NMM====MMMMM====MMM8==DD=M
  7. OD========MMN==MMM=MMMMM=====MMMM====NDM
  8. DD=======MMM===MMMMMMM======+MMM======DM
  9. D=======MMM=====MMMM========MMM=======DD
  10. D8=====MMM======MM==========MM========DM
  11. DD====MMM=======D===========MM=======DDM
  12. =$D==MMD====================M=======DD=M
  13. ===NMM======================M=====ND===M
  14. ===M=ODD=======================MDN=====M
  15. =========DDNN=============IDDD=========M
  16. ================7MDDDD8================M
  17.                    
  18.     CODE BY CHELLE, AKA @THE-JEDI
  19.        PLEASE LEAVE THE CREDIT
  20.  DO NOT STEAL THE ENTIRE/BIG CHUNKS
  21.    OF THE CODE AND DISTRIBUTE IT
  22.        AS IF IT WERE YOUR OWN
  23.  
  24.  
  25. NOTES ON THIS THEME:
  26.  
  27. DISCLAIMER: I DO NOT OWN WONDER WOMAN OR ANYTHING ASSOCIATED WITH IT. BUT I DID MAKE THIS CODE.
  28.  
  29. HOVER EFFECTS TUTORIAL: thanks to Ian Lunn, HOVER.CSS, http://ianlunn.github.io/Hover/
  30.    UNDER PERSONAL LICENSE. This code is public and not used for commercial purposes
  31.  
  32. Special thanks to @shythemes for the video resizing and pxu photoset tutorials.
  33. Credit to Pixel Union for their PXU Photoset Script
  34. Additional credit to @magnusthemes & @neothm for the caption unnest script.
  35.  
  36. Please consult the-jedi.tumblr.com/my+theme for tips on how to best utilize this theme.
  37. For help, first consult the-jedi.tumblr.com/tagged/theme+help, or the-jedi.tumblr.com/tagged/wondertheme.
  38. If you don't find an answer to your query, go to the-jedi.tumblr.com/ask with your question.
  39. -->
  40.  
  41. <!DOCTYPE html>
  42.  
  43. <head>
  44.  
  45.  
  46. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  47. <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  48. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  49. <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>
  50.  
  51.  
  52. <title>{Title}</title>
  53.  
  54.  
  55. <link rel="shortcut icon" href="{Favicon}">
  56. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  57. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  58.  
  59.  
  60. <meta name="color:background" content="#fbfbfb"/>
  61. <meta name="color:text" content="#333333"/>
  62. <meta name="color:accent1" content="#ff7f33"/>
  63. <meta name="color:accent2" content="#ffdf6a"/>
  64. <meta name="color:post background" content="#ffffff"/>
  65. <meta name="color:border" content="#f5f3f3"/>
  66. <meta name="color:link" content="#ffb700"/>
  67. <meta name="color:titlebg" content="#ededed"/>
  68. <meta name="color:titleborder" content="#dfdfdf"/>
  69. <meta name="if:show updates" content="1"/>
  70. <meta name="if:show colorblock" content="1"/>
  71. <meta name="if:gradient colorblock" content="1"/>
  72. <meta name="if:show sidebar image" content="1"/>
  73. <meta name="if:show searchbox" content="1"/>
  74. <meta name="if:show about" content="1"/>
  75. <meta name="image:sidebar" content=""/>
  76. <meta name="text:go to the website below to search icons, use the icon titles to replace the ones for your links:" content="http://fontawesome.io/icons/" />
  77. <meta name="text:Search Label" content="search" />
  78. <meta name="text:about url" content="/about" />
  79. <meta name="text:blog title spacing" content="3" />
  80. <meta name="text:link 1 URL" content="/" />
  81. <meta name="text:link 1 icon" content="tag"/>
  82. <meta name="text:link 1" content="link 1" />
  83. <meta name="text:link 2 URL" content="/" />
  84. <meta name="text:link 2 icon" content="cog"/>
  85. <meta name="text:link 2" content="link 2" />
  86. <meta name="text:link 3 URL" content="/" />
  87. <meta name="text:link 3 icon" content="book"/>
  88. <meta name="text:link 3" content="link 3" />
  89. <meta name="text:link 4 URL" content="/" />
  90. <meta name="text:link 4 icon" content="pencil"/>
  91. <meta name="text:link 4" content="link 4" />
  92. <meta name="text:link 5 URL" content="/" />
  93. <meta name="text:link 5 icon" content="twitter"/>
  94. <meta name="text:link 5" content="" />
  95. <meta name="text:link 6 URL" content="/" />
  96. <meta name="text:link 6 icon" content="code"/>
  97. <meta name="text:link 6" content="" />
  98. <meta name="text:post width" content="500" />
  99. <meta name="text:updates" content="updates here"/>
  100.  
  101.  
  102. <!-- tumblr controls -->
  103. <script>
  104.     $(document).ready(function(){
  105.         $(".controloptions").click(function(){
  106.             $("#controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls, .tmblr-iframe-compact .tmblr-iframe--unified-controls").fadeToggle();
  107.         });
  108.     });
  109.     </script>
  110.  
  111.  
  112.  
  113. <!-- style -->
  114. <style type="text/css">
  115.  
  116. blockquote {
  117.     line-height:11px;
  118. }
  119.  
  120. ul {
  121.     list-style:none;
  122.     text-align:left!important;
  123.     padding-left:0;
  124. }
  125.  
  126. h1 {
  127.     font-family: Roboto, Arial;
  128.     font-size:12px;
  129. }
  130. h1 {
  131.     font-family: ;
  132.     font-size:11px;
  133. }
  134.  
  135.  
  136. li {
  137. position:relative;
  138. padding-left:45px;
  139. line-height:12px;
  140. }
  141.  
  142. ul li:before {
  143. position:absolute;
  144. left:30px;
  145. vertical-align:baseline!important;
  146. font-family: "FontAwesome";
  147. content:'\f096';
  148. -moz-transition-duration:0.4s;
  149. -webkit-transition-duration:0.4s;
  150. -o-transition-duration:0.4s;
  151.  
  152. }
  153.  
  154. ul li:hover:before {
  155.     color:{color:accent1};
  156. position:absolute;
  157. left:30px;
  158. vertical-align:baseline!important;
  159. font-family: "FontAwesome";
  160. content:'\f046';
  161. -moz-transition-duration:0.4s;
  162. -webkit-transition-duration:0.4s;
  163. -o-transition-duration:0.4s;
  164. }
  165.  
  166.  
  167.  
  168. body {
  169.  
  170. background:{color:background};
  171. font-smoothing:always;
  172. -webkit-font-smoothing: antialiased;
  173.     -moz-osx-font-smoothing: grayscale;
  174. color:{color:text};
  175. font-family:Roboto, Arial;
  176. font-size:11px;
  177. font-weight:400;
  178. text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  179. margin:0;
  180. text-align:left;
  181. line-height:15px;
  182.  
  183.  
  184. }
  185.  
  186. a {
  187. font-weight:400;
  188. color:{color:link};
  189. -moz-transition-duration:0.4s;
  190. -webkit-transition-duration:0.4s;
  191. -o-transition-duration:0.4s;
  192. text-decoration:none;
  193.  
  194. }
  195.  
  196. a:hover {
  197. color:{color:accent1};
  198.  
  199. -moz-transition-duration:0.4s;
  200. -webkit-transition-duration:0.4s;
  201. -o-transition-duration:0.4s;
  202. }
  203.  
  204. img {
  205. opacity:1;
  206. border:none;
  207. text-decoration:none;
  208. }
  209.  
  210. small {
  211. font-size:10px;
  212. }
  213.  
  214. big {
  215. font-size:10px;
  216. }
  217.  
  218. b {
  219.     font-weight:500;
  220. }
  221.  
  222.  
  223. ::selection {
  224.     background:{color:accent2};
  225.     color:{color:post background};
  226. }
  227.  
  228. a::-moz-selection {
  229.     color:{color:accent1};
  230. }
  231.  
  232. ::-moz-selection {
  233.     background:{color:accent2};
  234.     color:{color:post background};
  235. }
  236.  
  237.  
  238. a::selection {
  239.     color:{color:accent1};
  240. }
  241.  
  242.  
  243.  
  244.  
  245. .tooltip{
  246.     display: inline;
  247.     position: relative;
  248. }
  249.  
  250. #s-m-t-tooltip {
  251. max-width:300px;
  252. background-color:{color:post background};
  253. font-size:80%;
  254. text-transform:uppercase;
  255. letter-spacing:1px;
  256. font-family:Roboto, Arial;
  257. padding:5px 5px 5px 5px;
  258. border:1px solid {color:border};
  259. color: {color:text};
  260. margin:20px 0px 0px 20px;
  261. z-index:9999999999999999999999;
  262. border-radius:5px;
  263.  
  264. }
  265.  
  266.  
  267. ::-webkit-scrollbar {
  268. width: 10px; /** width of total scrollbar **/
  269. background: {color:accent1};
  270.  background:linear-gradient( to bottom, {color:accent1}, {color:accent2});
  271.     background: -webkit-linear-gradient(bottom, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  272.     background: -o-linear-gradient(bottom, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  273.     background: -moz-linear-gradient(bottom, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  274.  
  275. }
  276.  
  277. ::-webkit-scrollbar-thumb {
  278.     background: {color:post background};
  279.     border:1px solid {color:border};
  280.    width:10px;
  281.  
  282.     background-clip: content-box;
  283. }
  284.  
  285.  
  286.  
  287.  
  288. #title, #title2 {
  289.     font-size:14px;
  290.     font-family: Roboto, Arial;
  291.     font-weight:500;
  292.     border:1px solid {color:titleborder}!important;
  293.     font-size:85%;
  294.     text-transform:uppercase;
  295.     letter-spacing:1px;
  296.     color:{color:text};
  297.     background:{color:titlebg};
  298.     line-height:18px;
  299.     -webkit-transform: perspective(1px) translateZ(0);
  300.     transform: perspective(1px) translateZ(0);
  301.     margin-bottom:10px;
  302.     padding:10px 10px 10px 10px;
  303.     text-align:center;
  304. }
  305.  
  306. #title:hover, #title2:hover {
  307.     color:{color:post background};
  308. }
  309.  
  310. #title a, #title2 a {
  311.     color:{color:accent1};
  312. }
  313.  
  314.  
  315. #title:hover #postlink a, #title2:hover #postlink a {
  316.     color:{color:post background};
  317. }
  318.  
  319. #title:before, #title2:before {
  320.     content: "";
  321.     position: absolute;
  322.     z-index: -1;
  323.     top: 0;
  324.     left: 0;
  325.     right: 0;
  326.     bottom: 0;
  327.     background: {color:accent1};
  328.     background:linear-gradient( to left, {color:accent1}, {color:accent2});
  329.     background: -webkit-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  330.     background: -o-linear-gradient(right, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  331.     background: -moz-linear-gradient(right, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  332.     -webkit-transform: scaleX(0);
  333.     transform: scaleX(0);
  334.     -webkit-transform-origin: 0 50%;
  335.     transform-origin: 0 50%;
  336.     -webkit-transition-property: transform;
  337.     transition-property: transform;
  338.     -webkit-transition-duration: 0.3s;
  339.     transition-duration: 0.3s;
  340.     -webkit-transition-timing-function: ease-out;
  341.     transition-timing-function: ease-out;
  342. }
  343. #title:hover, #title:focus, #title:active, #title2:hover, #title2:focus, #title2:active {
  344.   color: {color:post background};
  345. }
  346. .posts:hover #title:before, #title:focus:before, #title:active:before,
  347. #listset:hover #title2:before, #title2:focus:before, #title2:active:before{
  348.       color: {color:post background};
  349.   -webkit-transform: scaleX(1);
  350.   transform: scaleX(1);
  351. }
  352.  
  353. .posts:hover #title, #listset:hover #title2 {
  354.     color:{color:post background};
  355. }
  356.  
  357. #title a, #title2 a {
  358.     color:{text:post background};
  359. }
  360.  
  361. #listset:hover #title2 a {
  362.     color:{color:post background};
  363. }
  364.  
  365.  
  366.  
  367. #title:hover a, #title2:hover a {
  368.     color:{color:post background};
  369. }
  370.  
  371. #title:hover a:hover, #title2:hover a:hover {
  372.     color:{color:link};
  373. }
  374.  
  375.  
  376. #title2 {
  377.     width: 700px;
  378.     font-size:80%;
  379.     margin-left:-10px;
  380.     text-transform:uppercase;
  381.     letter-spacing:1px;
  382.     height: 13px;
  383.     line-height: 13px;
  384.     text-align:left;
  385. }
  386.  
  387. #maincontent {
  388.  
  389.     text-align: center;
  390.  
  391. }
  392.  
  393.  
  394. #title {
  395.     line-height:11px;
  396.     font-variant:small-caps;
  397. }
  398.  
  399. .posts:hover #title a {
  400.     color:{color:text};
  401. }
  402.  
  403. #toptitle #title:before {
  404.     border-top-left-radius: 5px;
  405.     border-top-right-radius: 5px;
  406. }
  407.  
  408.  
  409.  
  410.  
  411. #top {
  412.     width:100%;
  413.     display:hidden;
  414.     position:fixed;
  415.     top:0;
  416.     left:0;
  417.     float:right;
  418.     z-index:999998;
  419.     height:50px;
  420.  
  421. }
  422.  
  423. #alltoplink {
  424. margin-left:-5px;
  425.    
  426. }
  427.  
  428. #toplinks {
  429.  
  430.     font-size:15px;
  431.     color:{color:accent1};
  432.     float:right;
  433.     padding-right:-5px;
  434.     margin-right:12px;
  435.     margin-top:13px;
  436.     font-family:Roboto, Arial;
  437.     cursor:pointer;
  438.     -moz-transition-duration:0.4s;
  439.     -webkit-transition-duration:0.4s;
  440.     -o-transition-duration:0.4s;
  441.     text-decoration:none;
  442. }
  443.  
  444. #toplinks:hover  {
  445.     color:{color:accent2};
  446.     float:right;    
  447.     font-weight:900;
  448.     -moz-transition-duration:0.4s;
  449.     -webkit-transition-duration:0.4s;
  450.     -o-transition-duration:0.4s;
  451.  
  452. }
  453.  
  454. #toplinks a {
  455.     color:{color:accent1};
  456. }
  457.  
  458. #toplinks a:hover {
  459.     color:{color:accent2}!important;
  460. }
  461.  
  462. .searchbox {
  463.     font-size:10px;;
  464.    
  465.     font-family:Roboto, Arial;
  466.  
  467.  
  468.     height:auto;
  469.     margin-top:0px;
  470.     margin-right:-10px;
  471.     font-weight:900;
  472. }
  473.  
  474. .searchbox input:hover {
  475.     color:{color:post background};
  476.     -moz-transition-duration:0.4s;
  477.     -webkit-transition-duration:0.4s;
  478.     -o-transition-duration:0.4s;
  479.    
  480. }
  481.  
  482. .searchbox input{
  483.     background:transparent;
  484.     text-align:right;
  485.     height:auto;
  486.     font-size:80%;
  487.     margin-right:-10px;
  488.     text-transform:uppercase;
  489.     letter-spacing:1px;
  490.     line-height:12px;
  491.     margin-top:-5px;
  492.     font-family:Roboto, Arial;
  493.     border:0px;
  494.     color: {color:text};
  495.     outline:none;
  496.     width:50px;
  497.     border-radius:25px;
  498.     -moz-transition-duration:0.4s;
  499.     -webkit-transition-duration:0.4s;
  500.     -o-transition-duration:0.4s;
  501.    
  502. }
  503.  
  504. .searchbox input:hover {
  505.         background-color: {color: background};
  506. }
  507.  
  508.  
  509.  
  510.  
  511. #pagi {
  512.     width:100%;
  513.     position:inherit;
  514.     text-align:center;
  515.     display:inline-block;
  516.     margin-top:5px;
  517.  
  518.  
  519.  
  520. }
  521.  
  522. #pagi a {
  523.  
  524.     margin-top:-5px;
  525.     padding-right:6px;
  526.     border-radius:5px;
  527.     height:15px;
  528.     width:15px;
  529.     text-align:center;
  530.     line-height:15px;
  531.  
  532.    
  533. }
  534.  
  535.  
  536.  
  537. #pagi i {
  538.  
  539.     text-align:center;
  540.     border:1px solid {color:border};
  541.     padding:5px 5px 5px 5px;
  542.      border-radius:5px;
  543.     transition: background 0.2s linear;
  544.          
  545. }
  546.  
  547.  
  548. #pagi a:hover i {
  549.     background-color:{color:accent1};
  550.     background-color:linear-gradient( to left, {color:accent1}, {color:accent2});
  551.     background-color: -webkit-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  552.     background-color: -o-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  553.     background-color: -moz-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  554.     transition: background 0.2s linear;
  555. }
  556.  
  557.  
  558.  
  559.  
  560.  
  561. #pagi a:hover {
  562.     color:{color:post background};
  563.  
  564. }
  565.  
  566.  
  567.  
  568. #controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls, .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  569.     animation: fadein 2s;
  570.     margin-top:10px;
  571.     opacity:.5!important;
  572.     position:fixed!important;
  573.     right:118px!important;
  574.     z-index:999999999999999!important;
  575.     display:none;
  576.     -webkit-animation: fadein 2s;
  577.     -moz-animation: fadein 2s;
  578.     -ms-animation: fadein 2s;
  579.     -o-animation: fadein 2s;
  580. }
  581.  
  582.  
  583. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  584.     margin-top:-3px;
  585. }
  586. @keyframes fadein {
  587.     from { opacity: 0; }
  588.     to   { opacity: 1; }
  589. }
  590.  
  591. @-moz-keyframes fadein {
  592.     from { opacity: 0; }
  593.     to   { opacity: 1; }
  594. }
  595.  
  596. @-webkit-keyframes fadein {
  597.     from { opacity: 0; }
  598.     to   { opacity: 1; }
  599. }
  600.  
  601. @-ms-keyframes fadein {
  602.     from { opacity: 0; }
  603.     to   { opacity: 1; }
  604. }
  605.  
  606. @-o-keyframes fadein {
  607.     from { opacity: 0; }
  608.     to   { opacity: 1; }
  609. }
  610.  
  611.  
  612.  
  613.  
  614. #sidebar {
  615.     left:0;
  616.     text-align:left;
  617.     position:fixed;
  618.     padding:0px 0px 0px 0px;
  619.     height:100%;
  620.     border-right:1px solid {color:border};
  621.     width:300px;
  622.     background:{color:post background};
  623. }
  624.  
  625.  
  626. #imgwidth {
  627.     width:100%;
  628.     text-align:center;
  629. }
  630.  
  631.  
  632. #imgcontain {
  633.     border-radius:50%;
  634.     width:150px;
  635.     height:150px;
  636.     overflow:hidden;
  637.     margin: 0 auto;
  638.     margin-top:125px;
  639.     {block:ifShowColorBlock}
  640.     margin-top:-85px;
  641.     {/block:ifShowColorBlock}
  642.     text-align:center;
  643.     padding:6px 6px 6px 6px;
  644.         background:{color:accent1};
  645.     background:linear-gradient( to left, {color:accent1}, {color:accent2});
  646.     background: -webkit-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  647.     background: -o-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  648.     background: -moz-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  649.      -webkit-transform: perspective(1px) translateZ(0);
  650.     transform: perspective(1px) translateZ(0);
  651.     -webkit-transition-property: color;
  652.     transition-property: color;
  653.     -webkit-transition-duration: 0.5s;
  654.     transition-duration: 0.5s;
  655.    
  656. }
  657.  
  658. #imgcontain:before {
  659.     content: "";
  660.     position: absolute;
  661.     z-index: -1;
  662.     top: 0;
  663.     left: 0;
  664.     right: 0;
  665.     bottom: 0;
  666.     border-radius:50%;
  667.     overflow:hidden;
  668.     background: {color:text};
  669.    
  670.     -webkit-transform: scaleX(0);
  671.     transform: scaleX(0);
  672.     -webkit-transform-origin: 0 50%;
  673.     transform-origin: 0 50%;
  674.     -webkit-transition-property: transform;
  675.     transition-property: transform;
  676.     -webkit-transition-duration: 0.5s;
  677.     transition-duration: 0.5s;
  678.     -webkit-transition-timing-function: ease-out;
  679.     transition-timing-function: ease-out;
  680. }
  681. #imgcontain:hover, #imgcontain:focus, #imgcontain:active {
  682.     color: white;
  683. }
  684. #imgcontain:hover:before, #imgcontain:focus:before, #imgcontain:active:before {
  685.     -webkit-transform: scaleX(1);
  686.     transform: scaleX(1);
  687. }
  688.  
  689.  
  690. #colorblock {
  691.     top:0;
  692.     left:0;
  693.     width:100%;
  694.     height:200px;
  695.     background:{color:accent1};
  696.      {block:ifGradientColorblock}
  697.     border-bottom:1px solid {color:border};
  698.     background:linear-gradient( to left, {color:accent1}, {color:accent2});
  699.     background: -webkit-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  700.     background: -o-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  701.     background: -moz-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  702.      {/block:ifGradientColorblock}
  703. }
  704.  
  705.  
  706.  
  707. #sidebar img {
  708.     width:150px;
  709.     height:150px;
  710.     text-align:center;
  711.     margin-left:-3px;
  712.     margin-top:-3px;
  713.     border:3px solid {color:post background};
  714.     border-radius:50%;
  715. }
  716.  
  717.  
  718. #blogtitle {
  719.  
  720.     height:15px;
  721.     letter-spacing:{text:blog title spacing}px;
  722.     text-align:center;
  723.     color: {color:post background};
  724.     line-height:20px;
  725.     text-transform:uppercase;
  726.     font-family: Roboto, Arial;
  727.     font-size:10px;;
  728.     margin-top:-2px;
  729.     padding-top:10px;
  730.     z-index:-1;
  731.       -webkit-transition-property: color;
  732.   transition-property: color;
  733.   -webkit-transition-duration: 0.3s;
  734.   transition-duration: 0.3s;
  735.     -webkit-transform: perspective(1px) translateZ(0);
  736.   transform: perspective(1px) translateZ(0);
  737.   margin-top:225px;
  738.     {block:ifShowSidebarImage}
  739.     margin-top:-2px;
  740.     {/block:ifShowSidebarImage}
  741.     {block:ifShowColorblock}
  742.      margin-top:-2px;
  743.       {/block:ifShowColorblock}
  744.    
  745.    
  746. }
  747.  
  748. #blogtitle a {
  749.     color: {color:accent2};
  750.     font-family: 'YourFont', Roboto, Arial;
  751.     font-size:20px;
  752. }
  753.  
  754.  
  755. #blogtitle a:hover, #blogtitle a:focus, #blogtitle a:active {
  756.   color: {color:accent1};
  757. }
  758. #blogtitle a:hover:before, #blogtitle a:focus:before, #blogtitle a:active:before {
  759.   -webkit-transform: scaleX(1);
  760.   transform: scaleX(1);
  761. }
  762.  
  763.  
  764. .linkgroup {
  765.     display:inline-block;
  766.     padding-right:10px;
  767.     z-index: -1;
  768.     opacity: 1;
  769. }
  770.  
  771.  
  772. .linkgroup a {
  773.     padding: 5px 5px 5px 5px;
  774.     text-decoration: none;
  775.     overflow:hidden;
  776.  
  777. }
  778.  
  779. .linkgroup i {
  780.     line-height:20px;
  781.     color: {color:accent1};
  782. }
  783.  
  784. .linkgroup a:hover {
  785.     color:{color:accent2};
  786.  
  787. }
  788.  
  789. .linkgroup a:hover i{
  790.     color:{color:accent2};
  791.     font-size:20px;
  792. }
  793.  
  794.  
  795.  
  796. #links {
  797.     margin-left:15%;
  798.     margin-top:10px;
  799.     text-align:left;
  800.     width:100%;
  801. }
  802.  
  803. #thelinks a{
  804.     display:inline-block;
  805.     float:left;
  806.     width:80px;
  807.     color:{color:text};
  808.     line-height:20px;
  809.     height:20px;
  810.     margin:5px 5px 5px 5px;
  811.     font-size:70%;
  812.     text-transform:uppercase;
  813.     border-radius:5px;
  814.     letter-spacing:1px;
  815.       border: 1px solid {color:border};
  816.     -o-transition:.5s;
  817.     -ms-transition:.5s;
  818.     -moz-transition:.5s;
  819.     -webkit-transition:.5s;
  820.      
  821. }
  822.  
  823.  
  824. #thelinks a:before {
  825.     content: "";
  826.     position: absolute;
  827.     z-index: -1;
  828.     top: 0;
  829.     left: 0;
  830.     right: 0;
  831.     bottom: 0;
  832.     background:{color:accent1};
  833.     background:linear-gradient( to left, {color:accent1}, {color:accent2});
  834.     background: -webkit-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Safari 5.1 to 6.0 */
  835.     background: -o-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Opera 11.1 to 12.0 */
  836.     background: -moz-linear-gradient(left, {color:accent1}, {color:accent2}); /* For Firefox 3.6 to 15 */
  837.     -webkit-transform: scaleX(0);
  838.     transform: scaleX(0);
  839.     -webkit-transform-origin: 0 50%;
  840.     transform-origin: 0 50%;
  841.     -webkit-transition-property: transform;
  842.     transition-property: transform;
  843.     -webkit-transition-duration: 0.3s;
  844.     transition-duration: 0.3s;
  845.     -webkit-transition-timing-function: ease-out;
  846.     transition-timing-function: ease-out;
  847. }
  848.  
  849. #thelinks a:hover, #thelinks a:focus, #thelinks a:active {
  850.     color: {color:post background};
  851. }
  852. #thelinks a:hover:before, #thelinks a:focus:before, #thelinks a {
  853.     -webkit-transform: scaleX(1);
  854.     transform: scaleX(1);
  855. }
  856.  
  857. #thelinks a:hover {
  858.     font-weight:bold;
  859.     color:{color:post background};      
  860.     -o-transition:.5s;
  861.     -ms-transition:.5s;
  862.     -moz-transition:.5s;
  863.     -webkit-transition:.5s;
  864. }
  865.  
  866.  
  867. #thelinks a:hover .searchbox input {
  868.     font-weight:bold;
  869.     color:{color:post background};
  870. }
  871.  
  872. #thelinks a:hover i {
  873.      color:{color:post background};
  874. }
  875.  
  876. #thelinks i{
  877.     color:{color:accent1};
  878.     font-size:8px;
  879. }
  880.  
  881.  
  882. #thelinks i:hover {
  883.     font-weight:400;
  884.    color:{color:accent2};
  885. }
  886.  
  887.  
  888.  
  889. #description {
  890.     width:calc(300px - 110px);
  891.     padding-top:15px;
  892.     padding-bottom:5px;
  893.     font-size:11px;
  894.     line-height:11px;
  895.     margin:0 auto;
  896.     width:{text:sidebar width}px;
  897.     text-align:center;
  898. }
  899.  
  900. #description a {
  901.     color:{color:link};
  902. }
  903.  
  904. #description a:hover {
  905.     color:{color:accent1};
  906. }
  907.  
  908.  
  909.  
  910. #con {
  911.     margin-left:400px;
  912.     position:absolute;
  913.     width:{text:post width}px;
  914. }
  915.  
  916.  
  917. .entries {
  918.     opacity: 1;
  919.     transition: 2s opacity;
  920.     margin-top:50px;
  921.  
  922. -webkit-animation: fadein 2s;
  923. -moz-animation: fadein 2s;
  924. -ms-animation: fadein 2s;
  925.  -o-animation: fadein 2s;
  926.     animation: fadein 2s;
  927. }
  928.  
  929.  
  930.  
  931. .posts {
  932.     padding-top:10px;
  933.     text-align:center;
  934.     width:{text:post width}px;
  935.     max-width:{text:post width}px;
  936.     margin-bottom:70px;
  937.     text-align:left;
  938.     font-size:11px;;
  939.     font-weight:400;
  940.     line-height:100%;
  941.     letter-spacing:0px;
  942.     color:{color:text};
  943.     text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
  944.     overflow:hidden;
  945.    
  946.  
  947. }
  948.  
  949. .posts a {
  950.     color:{color:link};
  951.     font-weight:500;
  952. }
  953.  
  954. .posts a:hover {
  955.     color:{color:accent1};
  956.  
  957. }
  958.  
  959. .posts img, .posts li, .posts blockquote {
  960.     max-width:100%;
  961.     height:auto;
  962.     -webkit-animation: fadein 2s;
  963. -moz-animation: fadein 2s;
  964. -ms-animation: fadein 2s;
  965.  -o-animation: fadein 2s;
  966.     animation: fadein 2s;
  967. }
  968.  
  969.  
  970. .posts li {
  971.     text-align:left;
  972. }
  973.  
  974.  
  975. #upperstuff {
  976.     font-size:80%;
  977.     letter-spacing:1px;
  978.     text-align:center;
  979.     background:none;
  980.     text-transform:uppercase;
  981.    
  982. }
  983.  
  984.  
  985.  
  986.  
  987. #usericon {
  988.     width:20px;
  989.     height:20px;
  990.     display:inline;
  991.     padding-right:8px;
  992.     margin-top:-5px;
  993.     padding-bottom:0px;
  994.     border-radius:100px;
  995.     -webkit-transform: perspective(1px) translateZ(0);
  996.     transform: perspective(1px) translateZ(0);
  997.     -webkit-transition-property: color;
  998.     transition-property: color;
  999.     -webkit-transition-duration: 0.3s;
  1000.     transition-duration: 0.3s;
  1001.     overflow:hidden;
  1002. }
  1003.  
  1004. #usericon img {
  1005.     width:20px;
  1006.     margin-left:5px;
  1007.     padding:2px 2px 2px 2px;
  1008. }
  1009.  
  1010.  
  1011.  
  1012.  
  1013. #topurl {
  1014.     text-align:center;
  1015.     margin-left:0px;
  1016.     margin-top:3px;
  1017.     padding-bottom:7px;
  1018.     -moz-transition-duration:0.4s;
  1019.     -webkit-transition-duration:0.4s;
  1020.     -o-transition-duration:0.4s;
  1021.  
  1022. }
  1023.  
  1024. .postsrc {
  1025.     width:100%;
  1026.     text-align:center;
  1027.  
  1028. }
  1029.  
  1030. .posts:hover #upperstuff {
  1031.     color:{color:accent1};
  1032. }
  1033.  
  1034.  
  1035. .posts:hover #upperstuff a{
  1036.     color:{color:accent1};
  1037. }
  1038.  
  1039. .posts:hover #upperstuff a:hover {
  1040.     color:{color:accent2};
  1041. }
  1042.  
  1043.  
  1044. #itemsbelow {
  1045.     background:{color:post background};
  1046.     border:1px solid {color:border};
  1047.     max-width:100%;
  1048.     overflow:hidden;
  1049.     border-radius:5px;
  1050.    
  1051. }
  1052.  
  1053. .photo-slideshow {
  1054.     visibility: visible!important;
  1055. }
  1056.  
  1057.  
  1058. #postlink a{
  1059.     color:{color:accent1};
  1060. }
  1061.  
  1062. #postlink a:hover{
  1063.     color:{color:accent2};
  1064. }
  1065.  
  1066. .caption {
  1067.     text-align:center;
  1068.     width:{text:post width}px;
  1069.     padding-right:10px;
  1070.     padding-bottom:5px;
  1071.     overflow:hidden;
  1072.  
  1073.  
  1074. }
  1075.  
  1076.  
  1077. a.tumblr_blog {
  1078.     font-size:80%;
  1079.     letter-spacing:1px;
  1080.     text-decoration:underline;
  1081.     text-transform:uppercase;
  1082.     -moz-transition-duration:0.4s;
  1083.     -webkit-transition-duration:0.4s;
  1084.     -o-transition-duration:0.4s;
  1085.  
  1086. }
  1087.  
  1088. .tumblr_blog {
  1089.     text-align:center;
  1090. }
  1091.  
  1092.  
  1093. #titlequote {
  1094.     padding:10px 20px 10px 20px;
  1095.     text-align:center;
  1096.     font-size:12px;
  1097.     margin-left:-7px;
  1098.     line-height:17px;
  1099.     font-weight:400;
  1100. }
  1101.  
  1102. #source {
  1103.     padding:0px 10px 10px 10px;
  1104.     margin-top:0px;
  1105.     text-align:center;
  1106.     margin-bottom:11px;
  1107.     font-size:80%;
  1108.     text-transform:uppercase;
  1109.     margin-left:0px;
  1110. }
  1111.  
  1112. /*asks*/
  1113.  
  1114. .q {
  1115.     padding: 5px 10px 5px 20px;
  1116.     height:110%;
  1117.     font-size:11px;
  1118.     color:{color:text};
  1119.     border-left:1px solid {color:titleborder};
  1120.     border-right:1px solid {color:titleborder};
  1121.     margin-top:-10px;
  1122.     overflow:hidden;
  1123.     text-align:center;
  1124.     margin-left:-10px;
  1125. }
  1126.  
  1127.  
  1128. .posts:hover #asker a {
  1129.     color:{color:text};
  1130.    
  1131. }
  1132.  
  1133. .posts:hover #asker a:hover {
  1134.     color:{color:post background};
  1135.    
  1136. }
  1137.  
  1138.  
  1139. .chat ol {
  1140.     padding:0;
  1141.     list-style:none;
  1142. }
  1143.  
  1144. .line {
  1145.     padding:0px 0;
  1146. }
  1147.  
  1148. .label {
  1149.     font-weight:400;
  1150. }
  1151.  
  1152. #video {
  1153.     top: -{text:post width}px;
  1154.     width:{text:post width}px;
  1155. }
  1156.  
  1157.  
  1158. #audio {
  1159.     height:50px;
  1160.     padding:0;
  1161.     padding-bottom:10px;
  1162. }
  1163.  
  1164. #audio #title {
  1165.     line-height:20px;
  1166. }
  1167.  
  1168. #audioplayer {
  1169.     width:30px;
  1170.     margin-top:15px;
  1171.     border-radius:{text:border radius}px;
  1172.     margin-left:15px;
  1173.     opacity:.5;
  1174.     overflow:hidden;
  1175.     position:absolute;
  1176.     vertical-align:top;
  1177.     z-index:999999;
  1178. }
  1179.  
  1180. #albumart {
  1181.     position:absolute;
  1182.     z-index:1;
  1183.     vertical-align:top;
  1184.     width:61px;
  1185.     height:61px;
  1186.     padding-top:-10px;
  1187.     margin-top:1px;
  1188. }
  1189.  
  1190. #audioinfo {
  1191.     text-align:center;
  1192.     display:inline;
  1193.     margin-top:10px;
  1194. }
  1195.  
  1196.  
  1197. #postinfo {
  1198.  
  1199.     width:95%;
  1200.     margin-top:-2px;
  1201.     {block:Caption}
  1202.     margin-top:4px;
  1203.     {/block:Caption}  
  1204.     margin-left:0px;
  1205.     font-size:11px;;
  1206.     padding:6px 0px 0px 10px;
  1207.     {block:HasTags}
  1208.     padding:15px 10px 0px 0px;
  1209.     {/block:HasTags}
  1210.     border-top:1px solid {color:border};
  1211.     display:inline-block;
  1212.     padding-right:20px;
  1213.     vertical-align:text-top;
  1214.     {block:Answer}
  1215.     margin-top:-10px!important;
  1216.     {/block:Answer}
  1217.     text-align:center;
  1218.    
  1219.    
  1220. }
  1221.  
  1222. #tags {
  1223.     width:100%;
  1224.     text-transform:none;
  1225.     margin-left:-14px;
  1226.     font-size:10px;;
  1227.     padding-left:15px;
  1228.     text-align:center;
  1229.     padding-top:10px;
  1230.     padding-bottom:10px;
  1231. }
  1232.    
  1233.    
  1234. #tags a {
  1235.     color:{color:text};
  1236.     margin-left:-3px;
  1237.     font-weight:400;
  1238.     padding-right:5px;
  1239.    
  1240. }
  1241.  
  1242. #tags a:hover {
  1243.     color:{color:accent1};
  1244. }
  1245.  
  1246.  
  1247.  
  1248. .options {
  1249.     text-transform:uppercase;
  1250.     margin-right:-10px;
  1251.     padding-right:10px;
  1252.     font-size:80%;
  1253.     {block:HasTags}
  1254.     padding-bottom:12px;
  1255.     {/block:HasTags}
  1256. }
  1257. .options a {
  1258.     color:{color:link};
  1259.     position:relative;
  1260.     display:inline-block!important;
  1261.     overflow:hidden;
  1262.     padding:5px;
  1263.     width:auto;
  1264.     margin-top:0px;
  1265.     border-radius:5px;
  1266.     padding:5px 5px 5px 5px;
  1267.     margin-right:10px;
  1268.     height:13px;
  1269. }
  1270.  
  1271. .options i {
  1272.     color:{color:accent2};
  1273.     -moz-transition-duration:0.4s;
  1274.     -webkit-transition-duration:0.4s;
  1275.     -o-transition-duration:0.4s;
  1276. }
  1277.  
  1278. .like:hover i {
  1279.     color:{color:accent1};
  1280. }
  1281.  
  1282. .options i:hover {
  1283.     color:{color:accent1};
  1284. }
  1285. .options .reblog {
  1286.     opacity:.93;
  1287. }
  1288.  
  1289. .like:hover {
  1290.     color:{color:accent1};
  1291.      
  1292. }
  1293.  
  1294. .like:hover a {
  1295.     color:{color:accent1};
  1296.  
  1297. }
  1298.  
  1299.  
  1300. .reblog:hover .fa-spin-hover {
  1301.   -webkit-animation: fa-spin 2s infinite linear;
  1302.   -moz-animation: fa-spin 2s infinite linear;
  1303.   -o-animation: fa-spin 2s infinite linear;
  1304.   animation: fa-spin 2s infinite linear;
  1305.        
  1306. }
  1307.  
  1308.  
  1309. .options a:hover,  .options a:hover i {
  1310.     color:{color:accent1};
  1311. }
  1312.  
  1313. .options:hover {
  1314.      color:{color:accent1};
  1315. }
  1316.  
  1317. .options .like .liked + i {
  1318.    color:#ec5a5a;
  1319. }
  1320.  
  1321.  
  1322. .options .like .like_button {
  1323.    position:relative;
  1324. }
  1325. .options .like .like_button iframe {
  1326.    position:absolute;
  1327.    top:0;
  1328.    left:0;
  1329.    bottom:0;
  1330.    right:0;
  1331.    z-index:2;
  1332.    opacity:0;
  1333. }
  1334.  
  1335.  
  1336. #l {
  1337.     border-top:1px solid {color:border};
  1338.     width:106%;
  1339.     margin-left:-10px;
  1340.     float:left;
  1341.  
  1342. }
  1343.  
  1344.  
  1345.  
  1346. .pagenotes {
  1347.     {block:IndexPage}
  1348.     display: none!important;
  1349.     {/block:IndexPage}
  1350.     width:{text:post width};
  1351.     text-align:left;
  1352.  
  1353. }
  1354.  
  1355. .notes {
  1356.     font-size:8px!important;
  1357. }
  1358.  
  1359. .pagenotes img {
  1360.     display:none!important;
  1361. }
  1362.  
  1363. .pagenotes li {
  1364.     list-style-type:none;
  1365.     padding:2px 0px;
  1366.     font-size:8px;
  1367.     text-align:left;
  1368.     margin:0 0 0 -40px;
  1369. }
  1370.  
  1371. #updates {
  1372.     font-smoothing:always;
  1373.     -webkit-font-smoothing: antialiased;
  1374.     -moz-osx-font-smoothing: grayscale;
  1375.     font-weight:400;
  1376.     position:relative;
  1377.     font-family:Roboto ;
  1378.     right:20px;
  1379.     width:50px;
  1380.     height:10px;
  1381.     top:0px;
  1382.     z-index:999;
  1383. }
  1384.    
  1385.  
  1386. #updates a{
  1387.     color:{color:accent1};
  1388.     text-decoration:underline;
  1389. }
  1390.  
  1391.  
  1392.  
  1393. #updates:hover #updatescontent {
  1394.  
  1395.     display:inline;
  1396.     opacity:1;
  1397.     -webkit-transition: all .5s ease-in-out;
  1398.     -moz-transition: all .5s ease-in-out;
  1399.     -o-transition: all .5s ease-in-out;
  1400.     width: 125px;
  1401.     border-radius:10px;
  1402.     height:auto;
  1403.  
  1404. }
  1405.    
  1406.  
  1407.  
  1408. #updatescontent {
  1409.     display:hidden;
  1410.     line-height:10px;
  1411.     font-size:10px;;
  1412.     text-align:right;
  1413.     width:125px;
  1414.     top:30px;
  1415.     color: {color:text};
  1416.     right:12px;
  1417.     position:fixed;
  1418.     opacity:0;
  1419.     -webkit-transition: all .5s ease-in-out;
  1420.     -moz-transition: all .5s ease-in-out;
  1421.     -o-transition: all .5s ease-in-out;
  1422.  
  1423. }
  1424.  
  1425.  
  1426. #updatestab  {
  1427.     font-size:80%;
  1428.     text-transform:uppercase;
  1429.     letter-spacing:1px;
  1430.     width: 50px;
  1431.     margin-left:20px;
  1432.     font-weight:400;
  1433.     margin-top:12px;
  1434.     text-align: center;
  1435.     padding:2px;
  1436.     color:{color:text};
  1437.     border-bottom:1px solid {color:border};
  1438.     height: auto;
  1439.     top:0px;
  1440.     left:0px;
  1441.     -webkit-transform: perspective(1px) translateZ(0);
  1442.     transform: perspective(1px) translateZ(0);
  1443. }
  1444.  
  1445.  
  1446. #updatestab:before {
  1447.   content: "";
  1448.   position: absolute;
  1449.   z-index: -1;
  1450.   left: 0;
  1451.   margin-top:20px;
  1452.   right: 100%;
  1453.   bottom: 0;
  1454.   background: {color:accent1};
  1455.   height: 2px;
  1456.   -webkit-transition-property: right;
  1457.   transition-property: right;
  1458.   -webkit-transition-duration: 0.3s;
  1459.   transition-duration: 0.3s;
  1460.   -webkit-transition-timing-function: ease-out;
  1461.   transition-timing-function: ease-out;
  1462. }
  1463.  
  1464. #updates:hover #updatestab:before, #updatestab:focus:before, #updatestab:active:before {
  1465.     right: 0;
  1466.  
  1467. }
  1468.  
  1469.  
  1470.  
  1471. #credit {
  1472.     width:20px;
  1473.     position:fixed;
  1474.     bottom:0;
  1475.     right:10px;
  1476.     float:right;
  1477.     z-index:999998;
  1478. }
  1479.  
  1480. {CustomCSS}
  1481.  
  1482. </style>
  1483. <script type="text/javascript" src="http://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>
  1484. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1485. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  1486. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1487. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1488.  
  1489. <script>
  1490. (function($){
  1491. $(document).ready(function(){
  1492. $("a[title]").style_my_tooltips({
  1493. tip_follows_cursor:true,
  1494. tip_delay_time:90,
  1495. tip_fade_speed:600,
  1496. attribute:"title"});});})(jQuery);
  1497. </script>
  1498.  
  1499.  
  1500. </head>
  1501.  
  1502. <body>
  1503.  
  1504. <!-- toplinks (updates and controls) -->
  1505. <div id="top">
  1506.  
  1507. <div id="toplinks" style="font-size:11px;;margin-top:0px;">
  1508. <!-- updates -->
  1509. {block:ifShowUpdates}
  1510. <div id="updates">
  1511. <div id="updatestab">updates</div>
  1512. <div id="updatescontent">
  1513. <p></p>
  1514. {text:updates}
  1515. </div></div>
  1516. {/block:ifShowUpdates}
  1517. </div>
  1518. <!-- follow and controls -->
  1519. <div id="alltoplink" style="right:-10px;">
  1520. <div class="controloptions"><a title="controls" style="font-weight:normal"><div id="toplinks" style="font-weight:normal;"><i class="fa fa-bars" aria-hidden="true"></i>
  1521. </a></div></div>
  1522. <a title="follow" style="font-weight:normal;" href="http://www.tumblr.com/follow/{Name}/">
  1523. <div id="toplinks" style="margin-right:10px;font-weight:normal;"><i class="fa fa-plus" aria-hidden="true"></i>
  1524. </div>
  1525. </a>
  1526. </div>
  1527. <!-- end of toplinks -->
  1528. </div>
  1529.  
  1530.  
  1531. <!-- sidebar -->
  1532. <div id="sidebar">
  1533. {block:ifShowColorblock}
  1534. <div id="colorblock"></div>
  1535. {/block:ifShowColorblock}
  1536. {block:ifShowSidebarImage}
  1537. <!-- sidebar image start -->
  1538. <div id="imgwidth"><div id="imgcontain"><div id="sidebar img"><a href="/"><img src="{image:sidebar}"/></a></div></div></div>
  1539. <!-- sidebar image end -->
  1540. {/block:ifShowSidebarImage}
  1541. <div id="titles">
  1542. <div id="blogtitle"><a href="/">{Title}</a></div></div>
  1543. <div id="description">{Description}</div>
  1544. <!-- links -->
  1545. <div id="links">
  1546.     <div class="linkgroup">
  1547.         <div id="thelinks">
  1548.         <a href="/"><i style="margin-left:5px;float:left;font-size:14px;" class="fa fa-home"></i>&nbsp;<span style="float:right;">home</span></a>
  1549.        
  1550.         <a href="/ask"><i style="margin-left:5px;float:left;font-size:11px;" class="fa fa-envelope"></i>&nbsp;<span style="float:right;">ask</span></a>
  1551.         <br>
  1552.         {block:ifShowAbout}
  1553.         <a href="{text:about url}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-user"></i>&nbsp;<span style="float:right;">about</span></a>
  1554.         {/block:ifShowAbout}
  1555.         {block:IfLink1}
  1556.         <a href="{text:link 1 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 1 icon}"></i>&nbsp;<span style="float:right;">{text:link 1}</span></a>
  1557.         {/block:IfLink1}
  1558.         <br>
  1559.        
  1560.         {block:IfLink2}
  1561.         <a href="{text:link 2 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 2 icon}"></i>&nbsp;<span style="float:right;">{text:link 2}</span></a>
  1562.         {/block:IfLink2}
  1563.        
  1564.         {block:IfLink3}
  1565.         <a href="{text:link 3 URL}"><i style="float:left;margin-left:5px;font-size:12px;" class="fa fa-{text:link 3 icon}"></i>&nbsp;<span style="float:right;">{text:link 3}</span></a>
  1566.         {/block:IfLink3}    
  1567.         <br>
  1568.        
  1569.         {block:IfLink4}
  1570.         <a href="{text:link 4 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 4 icon}"></i>&nbsp;<span style="float:right;">{text:link 4}</span></a>
  1571.         {/block:IfLink4}
  1572.        
  1573.        
  1574.         {block:IfLink5}
  1575.         <a href="{text:link 5 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 5 icon}"></i>&nbsp;<span style="float:right;">{text:link 5}</span></a>
  1576.         {/block:IfLink5}
  1577.        
  1578.         {block:IfLink6}
  1579.         <a href="{text:link 6 URL}"><i style="float:left;margin-left:5px;font-size:12px;" class="fa fa-{text:link 6 icon}"></i>&nbsp;<span style="float:right;">{text:link 6}</span></a>
  1580.         {/block:IfLink6}
  1581.         <!-- searchbox -->
  1582.         {block:IfShowSearchbox}
  1583.         <a><i style="float:left;margin-left:5px;font-size:12px;" class="fa fa-search"></i>&nbsp;
  1584.         <span style="float:right"><form class="searchbox" style="width:60px;margin-left:-30px;float:right;border:0px solid;" onsubmit="return tagSearch(this)">
  1585.         <input type="text" name="tag" value="{text:Search Label}" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '') {this.value='{text:Search Label}'}" /></form></span>
  1586.         </a>
  1587.         {/block:IfShowSearchbox}
  1588.        
  1589.         </div>
  1590.     </div>
  1591. </div>
  1592.  
  1593. <!-- DO NOT TOUCH -->
  1594. {block:notIndexPage}
  1595. </div>
  1596. {/block:notIndexPage}
  1597. <!-- THANK YOU -->
  1598.  
  1599.  
  1600. <!-- pagination -->
  1601. {block:Pagination}
  1602.     <div id="pagicontainer">
  1603.     <div id="pagi">
  1604.     {block:PreviousPage}
  1605.  
  1606.     <a href="{PreviousPage}" title="previous"><i class="fa fa-chevron-left" style="margin-left:5px;"></i></a>
  1607.     {/block:PreviousPage}
  1608.     {block:NextPage}
  1609.     <a href="{NextPage}" title="next" ><i class="fa fa-chevron-right" style="margin-left:5px;"></i></a>
  1610.     {/block:NextPage}
  1611.         </div></div>
  1612.     {/block:Pagination}
  1613.  
  1614. </div>
  1615.  
  1616.  
  1617. <!-- post section -->
  1618. <div id="con">
  1619.  
  1620. <div class="entries">
  1621.  
  1622. {block:Posts}
  1623.  
  1624. <div class="posts" id="{PostID}">
  1625. <!-- "reblogged from" -->
  1626. <div id="upperstuff">
  1627. <div id="icons">
  1628.  
  1629. {block:NotReblog}
  1630. <div id="usericon"><img src="{PortraitURL-40}"/ style="border-radius:100px;"></div>
  1631. <div id="postsrc"><div id="topurl" style="margin-left:-5px"> POSTED BY <a href="/">{Name}</a></div></div>
  1632. {/block:NotReblog}
  1633.  
  1634. {block:RebloggedFrom}
  1635. <div id="usericon"><a title="{ReblogParentTitle}"  href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-40}" style="border-radius:100px;" /></a></div>
  1636. <div id="postsrc"><div id="topurl"> REBLOGGED FROM <a title="{ReblogParentTitle}"  href="{ReblogParentURL}">{ReblogParentName}</a></div></div>
  1637. {/block:RebloggedFrom}  
  1638. </div>
  1639. </div>
  1640.  
  1641.  
  1642. <!-- post content -->
  1643. <div id= "itemsbelow">
  1644. {block:Quote}
  1645. <div id="titlequote"><i class="fa fa-quote-left"></i>&nbsp; {Quote} &nbsp;<i class="fa fa-quote-right"></i></div>
  1646. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  1647. {/block:Quote}
  1648.  
  1649. {block:Text}
  1650. {block:Title}
  1651. <div id="toptitle"><div id="title">{Title}</div></div>{/block:Title}
  1652. {block:RebloggedFrom}
  1653. <div class="caption">{Body}</div>
  1654. {/block:RebloggedFrom}
  1655. {block:NotReblog}
  1656. <div style="text-align:center;padding:0px 10px 0px 10px;">{Body}</div>
  1657. {/block:NotReblog}
  1658. {/block:Text}
  1659.  
  1660. {block:link}
  1661. <div id="toptitle"><div id="title"><a href="{URL}"><div id="postlink"><i class="fa fa-link"></i>&nbsp; {Name}</a></div></div></div>
  1662. {block:Description}<div style="padding:0px 0px 0px 0px;padding-left:10px;padding-right:10px;">{Description}</div>{/block:Description}
  1663. {/block:link}
  1664.  
  1665. {block:Chat}
  1666. {block:Title}
  1667. <div id="title">{Title}</div>{/block:Title}
  1668. {/block:Text}
  1669. <div style="padding:0px 10px 10px 10px;">{block:lines}
  1670. {block:label}
  1671. <br><b>{label}</b>
  1672. {/block:label}
  1673. {line}
  1674. {/block:lines}</div>
  1675. {/block:Chat}
  1676.  
  1677. {block:Photo}
  1678. {LinkOpenTag}
  1679.         <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{text:post width}"/>{LinkCloseTag}
  1680. {/block:Photo}
  1681.  
  1682. {block:Photoset}
  1683. <div class="set"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  1684. <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></div></center></div>
  1685. {/block:Photoset}
  1686.  
  1687. <div class="video">{Video-700}</div>
  1688.  
  1689.  
  1690. {block:Audio}
  1691. <div id="audio">
  1692. <div id="audioinfo">
  1693. <div id="audioplayer" >{AudioPlayerWhite}</div>
  1694. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1695. <div id= "title" style="height:60%; bottom:10px; padding-top:20px;text-align:left;">
  1696. <span style="margin-left:60px;padding-top:30px;">
  1697. {block:TrackName}
  1698. {TrackName}
  1699. {/block:TrackName} - {block:Artist}
  1700. {Artist}
  1701. {/block:Artist}
  1702. </span>
  1703. </div>
  1704. </div> </div>
  1705. {/block:Audio}
  1706.  
  1707. {block:Answer}
  1708.  
  1709. <div id="toptitle"><div id="title"><div id="asker"><i class="fa fa-question-circle" aria-hidden="true"></i> &nbsp;{Asker} said: </div></div></div>
  1710. <div class="q">
  1711. <p>{Question}</p></div>
  1712.  
  1713. {block:NotReblog}
  1714. <div id="title"><div id="asker"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp;<a href="/">{Name}</a> replied:</div></div>
  1715. <div class="q" style="padding-bottom:-10px">{Replies}</div>
  1716. {/block:NotReblog}
  1717.  
  1718. {block:RebloggedFrom}
  1719. <div id="title"><div id="asker"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;{Answerer}</a> replied: </div></div>
  1720. <div class="q" style="padding-bottom:-10px">{Replies}</div>
  1721. {/block:RebloggedFrom}
  1722. {/block:Answer}
  1723. {block:Caption}{block:RebloggedFrom}
  1724. <div class="caption" style="margin-left:0px;">{Caption}</div>
  1725. {/block:RebloggedFrom}
  1726. {block:NotReblog}
  1727. <div style="text-align:center;padding:10px 10px 10px 10px;">{Caption}</div>
  1728. {/block:NotReblog}{/block:Caption}
  1729.  
  1730.  
  1731.  
  1732. <!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->
  1733.  
  1734. {block:Date}
  1735.  
  1736. <!-- post info -->
  1737. <div id="postinfo">
  1738.  
  1739. <!-- likes/reblogs/date/permalink/source -->
  1740. <div class="options">
  1741. <a href="{Permalink}" title="Posted on {ShortMonth} {DayOfMonth}, {Year} at {12Hour}:{Minutes} {AmPm}"><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;{ShortMonth} {DayOfMonth} </a>
  1742. {block:ContentSource}<a title="source: {SourceTitle}" href="{SourceURL}" ><i class="fa fa-history" aria-hidden="true"></i>&nbsp;SOURCE
  1743. </a>{/block:ContentSource}
  1744. {block:NoteCount}<a href="{Permalink}" style="margin-left:0px;" title="{NoteCount} notes"><i class="fa fa-thumbs-up" aria-hidden="true"></i>
  1745.  {NoteCount}</a>{/block:NoteCount}
  1746. <a href="{ReblogURL}" target="_blank" class="reblog" title="reblog this post">
  1747. <i class="fa fa-refresh fa-spin-hover" aria-hidden="true">&nbsp;</i>&nbsp; REBLOG
  1748. </a>
  1749. <a href="#" class="like" title="like this post">{LikeButton}
  1750. <i class="fa fa-heart" aria-hidden="true"> </i>&nbsp; LIKE
  1751. </a>
  1752.  
  1753. </div>
  1754. <!-- tags -->
  1755. {block:HasTags}<div id="l"></div><div id="tags" {block:NoteCount} style="padding-top:10px;" {/block:NoteCount}>{block:Tags}<a href="{TagUrl}"><i class="fa fa-check-square-o" aria-hidden="true"></i>
  1756. &nbsp;{Tag}</a>&nbsp;&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  1757. </div>
  1758. {/block:Date}
  1759.  
  1760.  
  1761. </div>
  1762. <!-- notes list -->
  1763. {block:PostNotes}
  1764. <div style="padding:0px 10px 0px 10px;" class="pagenotes">
  1765. {PostNotes}
  1766. </div>
  1767. {/block:PostNotes}
  1768. </div>
  1769.  
  1770. {/block:Posts}
  1771.  
  1772.  
  1773. <!-- unnesting captions -->
  1774. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  1775. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1776. <script>
  1777. /*unnest tumblr captions script by @magnusthemes & @neothm (source: http://neothm.com/post/148902138319)*/
  1778. $(document).ready(function () {$(function(){  $('.posts').unnest({  
  1779.    yourCaption: ".caption",
  1780.    wrapName: ".tumblr_parent",
  1781.    newCaptionUsername: false,
  1782.    originalPostCaptionUsername: false,
  1783.    tumblrAvatars: false,
  1784.    tumblrAvatarClass: ".tumblr_avatar",
  1785.    usernameColon: false
  1786.  }); });}); </script>
  1787.  
  1788.  
  1789.  
  1790.  
  1791. <!--
  1792. DO NOT REMOVE!!!
  1793. -->
  1794.  
  1795. <div id="credit"><a title="theme by #userchelle" href="https://the-jedi.tumblr.com/"><img src="https://68.media.tumblr.com/62496251ce73eb90b955cdfa12c0ac83/tumblr_op9av3V2XR1tbtydxo2_r1_75sq.png"/></a></div>
  1796.  
  1797. <!--
  1798. THANK YOU!!!
  1799. -->
  1800.  
  1801.  
  1802. </div>
  1803.  
  1804. </div>
  1805.  
  1806. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1807. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1808.  
  1809. <script>
  1810. /* PXU Photoset Script by Pixel Union, resizing tutorial by by @gukthemes & @cathms (source: http://gukthemes.com/post/149193631486/tutorial-540pxresponsive-photosets) */
  1811.  
  1812. $(document).ready(function(){
  1813. $('.photo-slideshow').pxuPhotoset({
  1814. lightbox:true,
  1815. rounded:false,
  1816. gutter:'2.5px',
  1817. borderRadius:'0px',
  1818. photoset:'.photo-slideshow',
  1819. photoWrap:'.photo-data',
  1820. photo:'.pxu-photo'
  1821. });
  1822. });
  1823. </script>
  1824.  
  1825.  
  1826. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment