Advertisement
voicelessthemes

Theme #3

Apr 1st, 2017
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 27.37 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---THEME #3 BY VOICELESSTHEMES
  6. DO NOT CLAIM AS YOUR OWN OR STEAL PARTS OF MY CODE
  7. LEAVE CREDIT INTACT--->
  8.  
  9.  
  10. <!---META STUFF-->
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}
  15.     <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17. <!---END META STUFF--->
  18.  
  19. <!--THEME OPTIONS-->
  20.  
  21. <!--IF VARIABLES-->
  22. <meta name="if:GradientBG" content="0" />
  23. <meta name="if:FullPageBGImage" content="0" />
  24. <meta name="if:IconInHeader" content="1" />
  25. <meta name="if:RoundHeaderPic" content="1" />
  26. <meta name="if:MonochromeImages" content="1" />
  27. <meta name="if:ShowAskLink" content="1" />
  28.  
  29. <!--COLOR VARIABLES-->
  30. <meta name="color:Gradient 1" content="#ffb5c0" />
  31. <meta name="color:Gradient 2" content="#cab5ff" />
  32. <meta name="color:Page BG" content="#ffb5c0" />
  33. <meta name="color:Text" content="#818181" />
  34. <meta name="color:Bold Text" content="#818181" />
  35. <meta name="color:Italic Text" content="#818181" />
  36. <meta name="color:Bold Italic Text" content="#818181" />
  37. <meta name="color:Post Heading" content="#818181" />
  38. <meta name="color:Links" content="#000" />
  39. <meta name="color:Links Hover" content="#ffb5c0" />
  40. <meta name="color:Scrollbar" content="#000" />
  41. <meta name="color:Blockquote" content="#818181" />
  42. <meta name="color:Header BG" content="#000" />
  43. <meta name="color:Blog Title" content="#fff" />
  44. <meta name="color:Subtitle" content="#fff" />
  45. <meta name="color:Banner BG" content="#000" />
  46. <meta name="color:Banner Text" content="#fff" />
  47. <meta name="color:Content BG" content="#000" />
  48. <meta name="color:Post BG" content="#fff" />
  49. <meta name="color:Post Heading" content="#818181" />
  50. <meta name="color:Audio Post" content="#ffffff" />
  51. <meta name="color:Quote Text" content="#818181" />
  52. <meta name="color:Ask Text" content="#fff" />
  53. <meta name="color:Ask Background" content="#000" />
  54. <meta name="color:Tags" content="#fff" />
  55. <meta name="color:Tag Text" content="#000" />
  56. <meta name="color:Tags Hover" content="#818181" />
  57. <meta name="color:Sidebar Background" content="#000" />
  58. <meta name="color:Search BG" content="#fff" />
  59. <meta name="color:Search Text" content="#818181" />
  60. <meta name="color:Nav Links" content="#fff" />
  61. <meta name="color:Nav Links Hover" content="#818181" />
  62. <meta name="color:Nav Links Text" content="#000" />
  63. <meta name="color:Pagi Links" content="#000" />
  64. <meta name="color:Pagi Links Hover" content="#818181" />
  65.  
  66.  
  67. <!--IMAGE VARIABLES-->
  68. <meta name="image:Page BG" content="" />
  69. <meta name="image:Header BG" content="" />
  70. <meta name="image:Header Pic" content="" />
  71. <meta name="image:Content BG" content="" />
  72. <meta name="image:Sidebar BG" content="" />
  73. <meta name="image:Left Sidebar" content="" />
  74. <meta name="image:Right Sidebar" content="" />
  75.  
  76. <!--TEXT VARIABLES-->
  77. <meta name="text:Header BG Height" content="auto" />
  78. <meta name="text:Sidebar BG Size" content="auto" />
  79. <meta name="text:Subtitle" content="subtitle goes here" />
  80. <meta name="text:Banner Text" content="banner text" />
  81. <meta name="text:Sidebar Image Border Radius" content="0px" />
  82.  
  83. <!--LINK VARIABLES-->
  84. <meta name="if:Link1" content="0" title="Custom Link 1" />
  85. <meta name="text:Link 1 URL" content="/" />
  86. <meta name="text:Link 1 Title" content="" />
  87. <meta name="if:Link2" content="0" title="Custom Link 2" />
  88. <meta name="text:Link 2 URL" content="/" />
  89. <meta name="text:Link 2 Title" content="" />
  90. <meta name="if:Link3" content="0" title="Custom Link 3" />
  91. <meta name="text:Link 3 URL" content="/" />
  92. <meta name="text:Link 3 Title" content="" />
  93. <meta name="if:Link4" content="0" title="Custom Link 4" />
  94. <meta name="text:Link 4 URL" content="/" />
  95. <meta name="text:Link 4 Title" content="" />
  96. <meta name="if:Link5" content="0" title="Custom Link 5" />
  97. <meta name="text:Link 5 URL" content="/" />
  98. <meta name="text:Link 5 Title" content="" />
  99. <meta name="if:Link6" content="0" title="Custom Link 6" />
  100. <meta name="text:Link 6 URL" content="/" />
  101. <meta name="text:Link 6 Title" content="" />
  102.  
  103. <!--END THEME OPTIONS-->
  104.  
  105. <!--FONTAWESOME ICONS-->
  106. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  107.  
  108. <!--JQUERY-->
  109. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  110.  
  111. <!--GOOGLE FONTS-->
  112. <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  113. <link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
  114.  
  115. <!--SHYTHEMES VIDEO RESIZER-->
  116. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  117.  
  118. <!--PIXEL UNION PHOTOSETS-->
  119. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  120. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  121.  
  122. <!--CSS-->
  123. <style>
  124.  
  125. /*---BASIC---*/
  126. body {
  127.     {block:IfGradientBG}
  128.         background: linear-gradient({color:Gradient 1}, {color:Gradient 2});
  129.         background-size: cover;
  130.         background-attachment: fixed;
  131.     {/block:IfGradientBG}
  132.     {block:IfNotGradientBG}
  133.         background-color: {color:Page BG};
  134.         background-image: url({image:Page BG});
  135.         background-attachment: fixed;
  136.         background-position: center;
  137.         {block:IfFullPageBGImage}
  138.         background-size: cover;
  139.         {/block:IfFullPageBGImage}
  140.     {/block:IfNotGradientBG}
  141.     color: {color:Text};
  142.     font-family: 'Rajdhani', sans-serif;
  143.     overflow-x: hidden;
  144. }
  145.  
  146. b, strong {
  147.     color: {color:Bold Text};
  148. }
  149.  
  150. i, em {
  151.     color: {color:Italic Text};
  152. }
  153.  
  154. b i, i b, strong i, i strong, em b, b em, em strong, strong em {
  155.     color: {color:Bold Italic Text};
  156. }
  157.  
  158. a {
  159.     color: {color:Links};
  160.     text-decoration: none;
  161.     transition: all 0.6s ease-in-out;
  162.     -moz-transition: all 0.6s ease-in-out;
  163.     -o-transition: all 0.6s ease-in-out;
  164.     -ms-transition: all 0.6s ease-in-out;
  165.     -webkit-transition: all 0.6s ease-in-out;
  166. }
  167.  
  168. a:hover {
  169.     color: {color:Links Hover};
  170.     font-weight: 800;
  171.     transition: all 0.6s ease-in-out;
  172.     -moz-transition: all 0.6s ease-in-out;
  173.     -o-transition: all 0.6s ease-in-out;
  174.     -ms-transition: all 0.6s ease-in-out;
  175.     -webkit-transition: all 0.6s ease-in-out;
  176. }
  177.  
  178.  
  179. ::-webkit-scrollbar {
  180.     width:3px;
  181.     height:3px;
  182.     background: transparent;
  183. }
  184.  
  185. ::-webkit-scrollbar-track {
  186.     width: 3px;
  187.     height: 3px;
  188.     background: transparent;
  189. }
  190.  
  191. ::-webkit-scrollbar-thumb {
  192.     background-color: {color:Scrollbar};
  193. }
  194.  
  195. blockquote {
  196.     padding: 0px 0px 0px 5px;
  197.     margin: 0px 0px 0px 3px;
  198.     border-left: solid 1px {color:Blockquote};
  199. }
  200.  
  201. /*--Header--*/
  202. #header {
  203.     width: 1200px;
  204.     position: fixed;
  205.     height: 120px;
  206.     background-color: {color:Header BG};
  207.     background-image: url({image:Header BG});
  208.     background-size: auto {text:Header BG Height};
  209.     border-bottom-left-radius: 100px;
  210.     border-bottom-right-radius: 100px;
  211.     left: calc(50% - 600px);
  212.     top: 0px;
  213.     padding: 0px;
  214.     z-index: 9999999;
  215.     border: solid 10px {color:Header BG};
  216.     border-top: solid 0px transparent;
  217. }
  218.  
  219. #header h1 {
  220.     margin: 0px 0px 0px 30px;
  221.     padding: 0px;
  222.     width: 470px;
  223.     line-height: 100px;
  224.     text-align: center;
  225.     font-size: 40px;
  226.     font-family: 'Rock Salt', cursive;
  227.     float: left;
  228.     color: {color:Blog Title};
  229. }
  230.  
  231. {block:IfIconInHeader}
  232. #header img {
  233.     width: 140px;
  234.     height:140px;
  235.     float: left;
  236.     border: solid 10px {color:Header BG};
  237.     border-top: solid 0px transparent;
  238.     margin: 0px 20px;
  239.     {block:IfRoundHeaderPic}
  240.         border-bottom-left-radius: 40px;
  241.         border-bottom-right-radius: 40px;
  242.     {/block:IfRoundHeaderPic}
  243. }
  244. {/block:IfIconInHeader}
  245.  
  246. {block:IfNotIconInHeader}
  247. #header img {
  248.     width: 200px;
  249.     height: auto;
  250.     margin: 0px;
  251.     float: left;
  252.     {block:IfRoundHeaderPic}
  253.         border-bottom-left-radius: 40px;
  254.         border-bottom-right-radius: 40px;
  255.     {/block:IfRoundHeaderPic}
  256. }
  257. {/block:IfNotIconInHeader}
  258.  
  259. #header article {
  260.     margin: 0px;
  261.     padding: 10px 30px 10px 0px;
  262.     height: 120px;
  263.     text-align: center;
  264.     width: 470px;
  265.     float: left;
  266.     font-size: 20px;
  267.     color: {color:Subtitle};
  268.     font-family: 'Rock Salt', cursive;
  269. }
  270.  
  271. /*--BANNER--*/
  272. #banner {
  273.     height: 80px;
  274.     background-color: {color:Banner BG};
  275.     line-height: 85px;
  276.     font-size: 45px;
  277.     color: {color:Banner Text};
  278.     font-weight: 800;
  279.     padding: 15px 0px;
  280.     position: fixed;
  281.     top: calc(50% - 55px);
  282.     left: 0px;
  283.     right: 0px;
  284.     width: 100%;
  285.     font-family: 'Rock Salt', cursive;
  286. }
  287.  
  288. /*--POSTS--*/
  289. #content {
  290.     width: 500px;
  291.     background-color: {color:Content BG};
  292.     background-image: url({image:Content BG});
  293.     margin:0px calc(50% - 260px) 0px;
  294.     padding-top: 80px;
  295.     padding-bottom: 50px;
  296.     border-left: solid 10px {color:Content BG};
  297.     border-right: solid 10px {color:Content BG};
  298.     bottom: -20px;
  299.     top: 70px;
  300.     position: relative;
  301.     background-attachment: fixed;
  302. }
  303.  
  304. #content .post {
  305.     width: 450px;
  306.     padding: 10px;
  307.     margin: 15px 15px 0px;
  308.     height: auto;
  309.     display: block;
  310.     background-color: {color:Post BG};
  311. }
  312.  
  313. #content .post img {
  314.     width: 100%;
  315.     height: auto;
  316.     {block:IfMonochromeImages}
  317.         -webkit-filter: grayscale(1) opacity(0.9) blur(2px);
  318.         transition: all 0.6s ease-in-out;
  319.         -moz-transition: all 0.6s ease-in-out;
  320.         -o-transition: all 0.6s ease-in-out;
  321.         -ms-transition: all 0.6s ease-in-out;
  322.         -webkit-transition: all 0.6s ease-in-out;
  323.     {/block:IfMonochromeImages}
  324. }
  325.  
  326. {block:IfMonochromeImages}
  327. #content .post img:hover {
  328.     -webkit-filter: grayscale(0) opacity(1) blur(0px);
  329.     transition: all 0.6s ease-in-out;
  330.     -moz-transition: all 0.6s ease-in-out;
  331.     -o-transition: all 0.6s ease-in-out;
  332.     -ms-transition: all 0.6s ease-in-out;
  333.     -webkit-transition: all 0.6s ease-in-out;
  334. }
  335. {/block:IfMonochromeImages}
  336.  
  337. #content .post .title {
  338.     font-size: 28px;
  339.     margin: 0px;
  340.     color: {color:Post Title};
  341. }
  342.  
  343. #content .post .text {
  344.     font-size: 14px;
  345.     text-align: justify;
  346. }
  347.  
  348. #content .post .text img {
  349.     max-width: 100%;
  350.     height: auto;
  351.    
  352. }
  353.  
  354. #content .post .text h2 {
  355.     color: {color:Post Heading};
  356.     font-size: 20px;
  357. }
  358.  
  359. #content .post .quo {
  360.     color: {color:Quote Text};
  361.     font-size: 22px;
  362.     text-align: justify;
  363. }
  364.  
  365. #content .post .src {
  366.     font-size: 15px;
  367.     text-align: right;
  368. }
  369.  
  370. #content .post .lnkpst {
  371.     display: block;
  372.     background-color: {color:Links};
  373.     color: white;
  374. }
  375.  
  376. #content .post .lnkpst:hover {
  377.     background-color: {color:Links Hover};
  378. }
  379.  
  380. #content .post .lnktit {
  381.     font-size: 25px;
  382.     text-align: center;
  383.     margin: 5px;
  384.     padding: 2px;
  385. }
  386.  
  387. #content .post .lnkpst span {
  388.     display: block;
  389.     font-size: 13px;
  390.     text-align: justify;
  391.     padding: 5px;
  392.     margin: 5px;
  393. }
  394.  
  395. #content .post .chat {
  396.     list-style: none;
  397.     margin: 0px 0px 0px -30px;
  398. }
  399.  
  400. #content .post .chat li {
  401.     font-size: 16px;
  402.     margin: 5px;
  403. }
  404.  
  405. #content .post .ask-quest, .ask-quest b {
  406.     width: calc(100% - 10px);
  407.     margin: 5px;
  408.     color: {color:Ask Text};
  409.     font-size: 17px;
  410. }
  411.  
  412. #content .post .ask-quest .question-content {
  413.     background-color: {color:Ask Background};
  414.     padding: 5px;
  415. }
  416.  
  417. #content .post .ask-quest .triangle {
  418.     width: 0px;
  419.     height: 0px;
  420.     margin-left: 60px;
  421.     border-top: solid 20px {color:Ask Background};
  422.     border-left: solid 20px transparent;
  423.     border-right: solid 20px transparent;
  424. }
  425.  
  426. #content .post .answer {
  427.     border: dotted 1px {color:Ask Background};
  428.     color: {color:Ask Background};
  429.     padding: 10px;
  430.     margin: 15px;
  431.     font-size: 15px;
  432.     text-align: justify;
  433. }
  434.  
  435. #content .post .post-info {
  436.     font-size: 14px;
  437.     text-align: left;
  438. }
  439.  
  440. #content .post .post-info a {
  441.     color: black;
  442.     display: inline;
  443. }
  444.  
  445. #content .post .post-info span {
  446.     float: right;
  447.     margin: 0px 5px;
  448. }
  449.  
  450. #content .tags {
  451.     width: 450px;
  452.     margin: 5px 10px 20px;
  453.     padding: 0px 15px;
  454. }
  455.  
  456. #content .tags a {
  457.     display: inline-block;
  458.     margin: 5px;
  459.     padding: 3px 5px;
  460.     background-color: {color:Tags};
  461.     color: {color:Tag Text};
  462.     border: solid 1px {color:Tag Text};
  463. }
  464.  
  465. #content .tags a:hover {
  466.     background-color: {color:Tags Hover};
  467. }
  468.  
  469. #postnotes {
  470.     font-size: 14px;
  471.     line-height: 24px;
  472.     max-height: 350px;
  473.     text-align: center;
  474.     overflow-y: scroll;
  475. }
  476.  
  477. #postnotes ol.notes {
  478.     padding: 0px;
  479.     margin: 25px 0px;
  480.     list-style-type: none;
  481.     border-bottom: solid 1px {color:Text};
  482. }
  483.  
  484. #postnotes ol.notes li.note {
  485.     border-top: solid 1px {color:Text};
  486.     padding: 5px 0px 0px;
  487. }
  488.  
  489. #postnotes ol.notes li.note img.avatar {
  490.     display: none;
  491. }
  492.  
  493. #postnotes ol.notes li.note span.action {
  494.     font-weight: bold;
  495. }
  496.  
  497. #postnotes ol.notes li.note .answer_content {
  498.     font-weight: normal;
  499. }
  500.  
  501. #pagi {
  502.     text-align: center;
  503.     font-size: 50px;
  504. }
  505.  
  506. #pagi .fa {
  507.     display: inline-block;
  508.     height: 60px;
  509.     width: 60px;
  510.     text-align: center;
  511.     line-height: 60px;
  512.     font-size: 30px;
  513.     background-color: white;
  514.     color: {color:Pagi Links};
  515.     border: solid 4px {color:Pagi Links};
  516.     border-radius: 50%;
  517.     transition: all 0.6s ease-in-out;
  518.     -moz-transition: all 0.6s ease-in-out;
  519.     -o-transition: all 0.6s ease-in-out;
  520.     -ms-transition: all 0.6s ease-in-out;
  521.     -webkit-transition: all 0.6s ease-in-out;
  522. }
  523.  
  524. #pagi .fa:hover {
  525.     color: {color:Pagi Links Hover};
  526.     border: solid 4px {color:Pagi Links Hover};
  527.     transition: all 0.6s ease-in-out;
  528.     -moz-transition: all 0.6s ease-in-out;
  529.     -o-transition: all 0.6s ease-in-out;
  530.     -ms-transition: all 0.6s ease-in-out;
  531.     -webkit-transition: all 0.6s ease-in-out;
  532. }
  533.  
  534. /*--LEFT SIDEBAR--*/
  535.  
  536. #side-left {
  537.     width: 350px;
  538.     position: fixed;
  539.     height: calc(50% + 155px);
  540.     right: calc(50% + 320px);
  541.     bottom: 0;
  542. }
  543.  
  544. #side-right {
  545.     width: 350px;
  546.     position: fixed;
  547.     height: calc(50% + 145px);
  548.     left: calc(50% + 320px);
  549.     bottom: 0;
  550. }
  551.  
  552. #side-left img, #side-right img {
  553.     width: 270px;
  554.     height: 270px;
  555.     border: solid 10px {color:Sidebar Background};
  556.     border-radius: {text:Sidebar Image Border Radius};
  557. }
  558.  
  559. #side-left .vert, #side-right .vert {
  560.     width: 200px;
  561.     height: 100%;
  562.     margin: -30px auto 0px;
  563.     padding: 30px 10px 10px;
  564.     background-color: {color:Sidebar Background};
  565.     background-image: url({image:Sidebar BG});
  566.     background-size: {text:Sidebar BG Size};
  567.     border-left: solid 10px {color:Sidebar Background};
  568.     border-right: solid 10px {color:Sidebar Background};
  569. }
  570.  
  571.  
  572. #side-left .blog-desc {
  573.     max-height: 150px;
  574.     overflow-y: scroll;
  575.     font-size: 13px;
  576.     background-color: {color:Post BG};
  577.     padding: 5px;
  578. }
  579.  
  580. #side-left .sfm {
  581.     margin-top: 10px;
  582. }
  583.  
  584. #side-left .sfm input {
  585.     background-color: {color:Search BG};
  586.     font-size: 10px;
  587.     border: 0px;
  588.     margin-top: 0px;
  589.     color: {color:Search Text};
  590.     letter-spacing: 1px;
  591.     padding: 4px 8px;
  592. }
  593.  
  594. #side-right .links {
  595.     text-align: center;
  596.     max-height: 180px;
  597.     overflow-y: scroll;
  598. }
  599.  
  600. #side-right .links a {
  601.     display: block;
  602.     background-color: {color:Nav Links};
  603.     color: {color:Nav Links Text};
  604.     border: solid 1px {color:Nav Links Text};
  605.     border-radius: 10px;
  606.     font-size: 14px;
  607.     padding: 3px;
  608.     margin: 4px;
  609. }
  610.  
  611. #side-right .links a:hover {
  612.     background-color: {color:Nav Links Hover};
  613. }
  614.  
  615. /*---CREDIT---*/
  616. #th-cred {
  617.     position: fixed;
  618.     bottom: 10px;
  619.     right: 15px;
  620.     color: black;
  621.     font-weight: 600;
  622.     font-size: 36px;
  623.     z-index: 99999999999999;
  624.     display: block;
  625. }
  626.  
  627. #th-cred:hover {
  628.     text-decoration: none;
  629.     color: white;
  630. }
  631.  
  632. {CustomCSS}
  633.  
  634. </style>
  635. <!--END CSS-->
  636. </head>
  637. <body>
  638.  
  639. <!--HEADER-->
  640. <div id="header">
  641.     <h1>{Title}</h1>
  642.     {block:IfIconInHeader}<img src="{PortraitURL-128}" />{/block:IfIconInHeader}
  643.     {block:IfNotIconInHeader}<img src="{image:Header Pic}" />{/block:IfNotIconInHeader}
  644.     <article class="subtitle">{text:Subtitle}</article>
  645. </div>
  646. <!--END HEADER-->
  647.  
  648. <!--MARQUEE-->
  649.     <div id="banner"><marquee>{text:Banner Text}</marquee></div>
  650. <!--END MARQUEE-->
  651.  
  652. <!--LEFT SIDEBAR-->
  653. <div id="side-left" align="center">
  654.     <img src="{image:Left Sidebar}" />
  655.     <div class="vert">
  656.         <div class="blog-desc">{Description}</div>
  657.         <div class="blog-search">
  658.             <form action="/search" method="get" class="sfm">
  659.                 <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  660.                 <input type="submit" value="Search" id="sb"/>
  661.             </form>
  662.         </div>
  663.     </div>
  664.    
  665. </div>
  666. <!--END LEFT SIDEBAR-->
  667.  
  668. <!--POSTS-->
  669. <div id="content">
  670.     {block:Posts}
  671.     <div class="post">
  672.         {block:Text}
  673.             {block:Title}<h3 class="title">{Title}</h3>{/block:Title}
  674.             <article class="text">{Body}</article>
  675.         {/block:Text}
  676.        
  677.         {block:Photo}
  678.             <img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  679.             {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  680.         {/block:Photo}
  681.        
  682.         {block:Photoset}
  683.         <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></div>{/block:Photos}</div>
  684.         {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  685.         {/block:Photoset}
  686.        
  687.         {block:Quote}
  688.             <h3 class="quo"><i class="fa fa-quote-left" style="font-size: 20px; color:{color:Quote Text};"></i>&#8195;{Quote}</h3>
  689.             {block:Source}<article class="src">~{Source}</article>{/block:Source}
  690.         {/block:Quote}
  691.        
  692.         {block:Link}
  693.             <a class="lnkpst" href="{URL}">
  694.                 <h3 class="lnktit">{Name}</h3>
  695.                 {block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
  696.             </a>
  697.             {block:Description}<article class="text">{Description}</article>{/block:Description}
  698.         {/block:Link}
  699.        
  700.         {block:Chat}
  701.             {block:Title}<h3 class="title">{Title}</h3>{/block:Title}
  702.             <ul class="chat">
  703.             {block:Lines}<li>{block:Label}<strong>{Label}</strong>&nbsp;{/block:Label}{Line}</li>{/block:Lines}
  704.             </ul>
  705.         {/block:Chat}
  706.        
  707.         {block:Audio}
  708.                 {block:AudioPlayer}{AudioPlayer}
  709.                 <span>{block:TrackName}{TrackName}<br>{/block:TrackName}
  710.                     {block:Artist}{Artist}{/block:Artist}
  711.                 </span>
  712.                 {/block:AudioPlayer}
  713.                 {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  714.                 {block:caption}<article class="text">{Caption}</article>{/block:caption}
  715.         {/block:Audio}
  716.        
  717.         {block:Video}
  718.             <div class="video">{Video-500}</div>
  719.             {block:Caption}
  720.                 <article class="text">{Caption}</article>
  721.             {/block:Caption}
  722.         {/block:Video}
  723.        
  724.         {block:Answer}
  725.             <div class="ask-quest"><div class="question-content"><b>{Asker}:</b>&nbsp;{Question}</div><div class="triangle"></div></div>
  726.             {block:Answerer}
  727.                 <div class="answer"><p><strong>{Answerer} replied:</strong></p><p>{Answer}</p></div>
  728.             {/block:Answerer}
  729.             {block:NotReblog}<div class="answer">{Answer}</div>{/block:NotReblog}
  730.             {block:RebloggedFrom}<article class="text">{Replies}</article>{/block:RebloggedFrom}
  731.         {/block:Answer}
  732.        
  733.         <div class="post-info">
  734.             {block:Date}<a href="{Permalink}">{TimeAgo}</a>&#8195;{/block:Date}{block:NoteCount}<a href="{Permalink}#postnotes">+{NoteCount}</a>&#8195;{/block:NoteCount}<span>{LikeButton color="black" size="17"}</span><span>{ReblogButton color="black" size="17"}</span>
  735.         </div>
  736.        
  737.     </div>
  738.    
  739.     <div class="tags" align="center">{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  740.    
  741.     {block:PermalinkPage}
  742.         {block:PostNotes}
  743.         <div class="post" id="postnotes">
  744.             {PostNotes}
  745.         </div>
  746.         {/block:PostNotes}
  747.     {/block:PermalinkPage}
  748.    
  749.     {/block:Posts}
  750.    
  751.     {block:Pagination}<div id="pagi">
  752.         {block:PreviousPage}<a href="{PreviousPage}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>&#8195;|&#8195;{/block:PreviousPage}{block:NextPage}<a href="{NextPage}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>{/block:NextPage}
  753.     </div>{/block:Pagination}
  754.    
  755. </div>
  756. <!--END POSTS-->
  757.  
  758. <!--RIGHT SIDEBAR-->
  759. <div id="side-right" align="center">
  760.     <img src="{image:Right Sidebar}" />
  761.     <div class="vert">
  762.         <div class="links">
  763.             <a href="/">Home</a>
  764.             <a href="/archive">Past</a>
  765.             {block:IfShowAskLink}{block:AskEnabled}<a href="/ask">Message</a>{/block:AskEnabled}{/block:IfShowAskLink}
  766.             {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  767.             {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>{/block:IfLink1}
  768.             {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>{/block:IfLink2}
  769.             {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:IfLink3}
  770.             {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:IfLink4}
  771.             {block:IfLink5}<a href="{text:Link 5 URL}">{text:Link 5 Title}</a>{/block:IfLink5}
  772.             {block:IfLink6}<a href="{text:Link 6 URL}">{text:Link 6 Title}</a>{/block:IfLink6}
  773.         </div>
  774.     </div>
  775.    
  776. </div>
  777. <!--END RIGHT SIDEBAR-->
  778.  
  779. <!--SCRIPTS-->
  780.  
  781.  
  782. <!---SHYTHEMES MINIMAL SOUNDCLOUD PLAYER--->
  783. <script>
  784. $(document).ready(function(){
  785.    var color = '#{color:Audio Player}';  
  786.    $('.soundcloud_audio_player').each(function(){
  787.        $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  788.    });
  789. });
  790. </script>
  791.  
  792. <!--AUDIO PLAYER COLOR-->
  793. <script>
  794.    $(document).ready(function() {
  795.       $('iframe.tumblr_audio_player').load( function() {
  796.          $('iframe.tumblr_audio_player').contents().find("head")
  797.             .append($("<style type='text/css'> .audio-player{background:{color:Audio Player} !important} </style>"));
  798.       });
  799.    });
  800. </script>
  801.  
  802. <!---PIXEL UNION PHOTOSETS--->
  803. <script>
  804. $(document).ready(function(){
  805.    $('.photo-slideshow').pxuPhotoset({
  806.        lightbox: true,
  807.        rounded: false,
  808.        gutter: '10px',
  809.        borderRadius: '0px',
  810.        photoset: '.photo-slideshow',
  811.        photoWrap: '.photo-data',
  812.        photo: '.pxu-photo'
  813.    });
  814. });
  815. </script>
  816.  
  817. <!--RAINBOW SPARKLES-->
  818. <script>
  819. var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
  820. var sparkles=50;
  821.  
  822.  
  823.  
  824. /****************************
  825. * Tinkerbell Magic Sparkle *
  826. *(c)2005-11 mf2fm web-design*
  827. * http://www.mf2fm.com/rv *
  828. * DON'T EDIT BELOW THIS BOX *
  829. ****************************/
  830.  
  831. var x=ox=400;
  832. var y=oy=300;
  833. var swide=800;
  834. var shigh=600;
  835. var sleft=sdown=0;
  836. var tiny=new Array();
  837. var star=new Array();
  838. var starv=new Array();
  839. var starx=new Array();
  840. var stary=new Array();
  841. var tinyx=new Array();
  842. var tinyy=new Array();
  843. var tinyv=new Array();
  844.  
  845. window.onload=function() { if (document.getElementById) {
  846. var i, rats, rlef, rdow;
  847. for (var i=0; i<sparkles; i++) {
  848. var rats=createDiv(3, 3);
  849. rats.style.visibility="hidden";
  850. document.body.appendChild(tiny[i]=rats);
  851. starv[i]=0;
  852. tinyv[i]=0;
  853. var rats=createDiv(5, 5);
  854. rats.style.backgroundColor="transparent";
  855. rats.style.visibility="hidden";
  856. var rlef=createDiv(1, 5);
  857. var rdow=createDiv(5, 1);
  858. rats.appendChild(rlef);
  859. rats.appendChild(rdow);
  860. rlef.style.top="2px";
  861. rlef.style.left="0px";
  862. rdow.style.top="0px";
  863. rdow.style.left="2px";
  864. document.body.appendChild(star[i]=rats);
  865. }
  866.  
  867. set_width();
  868. sparkle();
  869. }}
  870.  
  871. function sparkle() {
  872. var c;
  873. if (x!=ox || y!=oy) {
  874. ox=x;
  875. oy=y;
  876. for (c=0; c<sparkles; c++) if (!starv[c]) {
  877. star[c].style.left=(starx[c]=x)+"px";
  878. star[c].style.top=(stary[c]=y)+"px";
  879. star[c].style.clip="rect(0px, 5px, 5px, 0px)";
  880. star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
  881.  
  882. star[c].style.visibility="visible";
  883. starv[c]=50;
  884. break;
  885. }
  886. }
  887. for (c=0; c<sparkles; c++) {
  888. if (starv[c]) update_star(c);
  889. if (tinyv[c]) update_tiny(c);
  890. }
  891. setTimeout("sparkle()", 40);
  892. }
  893.  
  894.  
  895.  
  896. function update_star(i) {
  897. if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  898. if (starv[i]) {
  899. stary[i]+=1+Math.random()*3;
  900. if (stary[i]<shigh+sdown && starx[i]>0) {
  901. star[i].style.top=stary[i]+"px";
  902. starx[i]+=(i%5-2)/5;
  903. star[i].style.left=starx[i]+"px";
  904. }
  905. else {
  906. star[i].style.visibility="hidden";
  907. starv[i]=0;
  908. return;
  909. }
  910. }
  911.  
  912. else {
  913. tinyv[i]=50;
  914. tiny[i].style.top=(tinyy[i]=stary[i])+"px";
  915. tiny[i].style.left=(tinyx[i]=starx[i])+"px";
  916. tiny[i].style.width="2px";
  917. tiny[i].style.height="2px";
  918. tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
  919. star[i].style.visibility="hidden";
  920. tiny[i].style.visibility="visible"
  921. }
  922. }
  923.  
  924. function update_tiny(i) {
  925. if (--tinyv[i]==25) {
  926. tiny[i].style.width="1px";
  927. tiny[i].style.height="1px";
  928. }
  929.  
  930. if (tinyv[i]) {
  931. tinyy[i]+=1+Math.random()*3;
  932. if (tinyy[i]<shigh+sdown && tinyx[i]>0) {
  933. tiny[i].style.top=tinyy[i]+"px";
  934. tinyx[i]+=(i%5-2)/5;
  935. tiny[i].style.left=tinyx[i]+"px";
  936. }
  937.  
  938. else {
  939. tiny[i].style.visibility="hidden";
  940. tinyv[i]=0;
  941. return;
  942. }
  943. }
  944. else tiny[i].style.visibility="hidden";
  945. }
  946.  
  947. document.onmousemove=mouse;
  948. function mouse(e) {
  949. set_scroll();
  950. y=(e)?e.pageY:event.y+sdown;
  951. x=(e)?e.pageX:event.x+sleft;
  952. }
  953.  
  954. function set_scroll() {
  955. if (typeof(self.pageYOffset)=="number") {
  956. sdown=self.pageYOffset;
  957. sleft=self.pageXOffset;
  958. }
  959. else if (document.body.scrollTop || document.body.scrollLeft) {
  960. sdown=document.body.scrollTop;
  961. sleft=document.body.scrollLeft;
  962. }
  963. else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  964. sleft=document.documentElement.scrollLeft;
  965. sdown=document.documentElement.scrollTop;
  966. }
  967. else {
  968. sdown=0;
  969. sleft=0;
  970. }
  971. }
  972.  
  973. window.onresize=set_width;
  974. function set_width() {
  975. if (typeof(self.innerWidth)=="number") {
  976. swide=self.innerWidth;
  977. shigh=self.innerHeight;
  978. }
  979.  
  980. else if (document.documentElement && document.documentElement.clientWidth) {
  981. swide=document.documentElement.clientWidth;
  982. shigh=document.documentElement.clientHeight;
  983. }
  984.  
  985. else if (document.body.clientWidth) {
  986. swide=document.body.clientWidth;
  987. shigh=document.body.clientHeight;
  988. }
  989. }
  990.  
  991. function createDiv(height, width) {
  992. var div=document.createElement("div");
  993. div.style.position="absolute";
  994. div.style.height=height+"px";
  995. div.style.width=width+"px";
  996. div.style.overflow="hidden";
  997. return (div);
  998. }
  999.  
  1000. function newColour() {
  1001. var c=new Array();
  1002. c[0]=255;
  1003. c[1]=Math.floor(Math.random()*256);
  1004. c[2]=Math.floor(Math.random()*(256-c[1]/2));
  1005. c.sort(function(){return (0.5 - Math.random());});
  1006. return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
  1007. }
  1008.  
  1009. // ]]>
  1010. </script>
  1011.  
  1012.  
  1013.  
  1014. <!--END SCRIPTS-->
  1015.  
  1016.  
  1017.  
  1018.  
  1019.  
  1020. <a href="http://voicelessthemes.tumblr.com" id="th-cred">&#169;</a>
  1021.  
  1022.  
  1023.  
  1024. </body>
  1025. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement