Advertisement
voicelessthemes

Theme #9

Jan 9th, 2018
223
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.35 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---THEME #9 BY VOICELESSTHEMES
  6. DO NOT CLAIM AS YOUR OWN OR STEAL PARTS OF MY CODE
  7. LEAVE CREDIT INTACT--->
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}
  13.     <meta name="description" content="{MetaDescription}" />
  14. {/block:Description}
  15.  
  16. <meta name="if:Header" content="1" />
  17. <meta name="if:GradientBG" content="0" />
  18. <meta name="if:FullPageBGImage" content="0" />
  19. <meta name="if:Link1" content="0" />
  20. <meta name="if:Link2" content="0" />
  21. <meta name="if:Link3" content="0" />
  22. <meta name="if:Link4" content="0" />
  23. <meta name="if:Twitter Link" content="0" />
  24. <meta name="if:Insta Link" content="0" />
  25.  
  26. <meta name="color:Page Background" content="#c4c4c4" />
  27. <meta name="color:Gradient 1" content="#ffb5c0" />
  28. <meta name="color:Gradient 2" content="#cab5ff" />
  29. <meta name="color:Text" content="#000" />
  30. <meta name="color:Links" content="#8331db" />
  31. <meta name="color:Links Hover" content="#51dfd4" />
  32. <meta name="color:Bold Text" content="#000" />
  33. <meta name="color:Italic Text" content="#000" />
  34. <meta name="color:Bold Italic Text" content="#000" />
  35. <meta name="color:Selection Text" content="#000" />
  36. <meta name="color:Selection" content="#00ffa4" />
  37. <meta name="color:Scrollbar Track" content="#c4c4c4" />
  38. <meta name="color:Scrollbar Thumb" content="#000" />
  39. <meta name="color:Top Bar" content="#000" />
  40. <meta name="color:Top Bar Links" content="#8331db" />
  41. <meta name="color:Top Bar Links Hover" content="#51dfd4" />
  42. <meta name="color:Blog Title" content="#fff" />
  43. <meta name="color:Sidebar Stuff" content="#ffaad7" />
  44. <meta name="color:Body Heading" content="#69c9ee" />
  45. <meta name="color:Quote" content="#000" />
  46. <meta name="color:Ask" content="#ccc" />
  47. <meta name="color:Ask Text" content="#000" />
  48.  
  49. <meta name="image:Page BG" content="" />
  50. <meta name="image:Header Pic" content="" />
  51.  
  52. <meta name="text:Header Quote" content="" />
  53. <meta name="text:Link 1 URL" content="" />
  54. <meta name="text:Link 1 Title" content="" />
  55. <meta name="text:Link 2 URL" content="" />
  56. <meta name="text:Link 2 Title" content="" />
  57. <meta name="text:Link 3 URL" content="" />
  58. <meta name="text:Link 3 Title" content="" />
  59. <meta name="text:Link 4 URL" content="" />
  60. <meta name="text:Link 4 Title" content="" />
  61. <meta name="text:Twitter Username" content="" />
  62. <meta name="text:Instagram Username" content="" />
  63.  
  64. <!--JQUERY-->
  65. <script src="https://dl.dropboxusercontent.com/s/u3gjc35avv9gchc/jquery-3.2.1.min.js"></script>
  66.  
  67. <!--SHYTHEMES VIDEO RESIZER-->
  68. <script src ="https://dl.dropboxusercontent.com/s/m49onom4slre2wm/shythemes-vr.js"></script>
  69.  
  70. <!--PIXEL UNION PHOTOSETS-->
  71. <script src="https://dl.dropboxusercontent.com/s/nv98cmeng3g3cqk/pxu-photosets.js"></script>
  72. <link href="https://dl.dropboxusercontent.com/s/fls0c1nyqz4y99p/pxu-photosets.css" rel="stylesheet" type="text/css"/>
  73.  
  74. <!--SMOOTH SCROLL-->
  75. <script src="https://dl.dropboxusercontent.com/s/oc6o191q6hobc7r/smooth%20scroll.js"></script>
  76.  
  77.  
  78. <style>
  79.  
  80. body {
  81.     {block:IfGradientBG}
  82.         background: linear-gradient({color:Gradient 1}, {color:Gradient 2});
  83.         background-size: cover;
  84.         background-attachment: fixed;
  85.     {/block:IfGradientBG}
  86.     {block:IfNotGradientBG}
  87.         background-color: {color:Page BG};
  88.         background-image: url({image:Page BG});
  89.         background-attachment: fixed;
  90.         background-position: center;
  91.         background-size: 200px;
  92.         {block:IfFullPageBGImage}
  93.         background-size: cover;
  94.         {/block:IfFullPageBGImage}
  95.     {/block:IfNotGradientBG}
  96.     color: {color:Text};
  97.     font-family: 'Exo', sans-serif;
  98. }
  99.  
  100. a {
  101.     text-decoration: none;
  102.     color: {color:Links};
  103.     transition: all 0.5s ease-in-out;
  104.     -webkit-transition: all 0.5s ease-in-out;
  105.     -moz-transition: all 0.5s ease-in-out;
  106.     -o-transition: all 0.5s ease-in-out;
  107.     -ms-transition: all 0.5s ease-in-out;
  108. }
  109.  
  110. a:hover {
  111.     color: {color:Links Hover};
  112.     transition: all 0.5s ease-in-out;
  113.     -webkit-transition: all 0.5s ease-in-out;
  114.     -moz-transition: all 0.5s ease-in-out;
  115.     -o-transition: all 0.5s ease-in-out;
  116.     -ms-transition: all 0.5s ease-in-out;
  117. }
  118.  
  119. b, strong {
  120.     font-weight: 700;
  121.     color: {color:Bold Text};
  122. }
  123.  
  124. i, em {
  125.     color: {color:Italic Text};
  126. }
  127.  
  128. b i, i b, strong i, i strong, em b, b em, em strong, strong em {
  129.     font-weight: 800;
  130.     color: {color:Bold Italic Text};
  131. }
  132.  
  133. ::selection {
  134.     color: {color:Selection Text};
  135.     background-color: {color:Selection};
  136. }
  137.  
  138. ::-webkit-scrollbar {
  139.     width: 6px;
  140.     height: 6px;
  141. }
  142.  
  143. ::-webkit-scrollbar-track {
  144.     background: {color:Scrollbar Track};
  145. }
  146.  
  147. ::-webkit-scrollbar-thumb {
  148.     background-color: {color:Scrollbar Thumb};
  149.     border-radius: 10px;
  150. }
  151.  
  152. blockquote {
  153.     padding: 0px 0px 0px 10px;
  154.     margin: 0px 0px 0px 5px;
  155.     border-left: solid 1px {color:Text};
  156. }
  157.  
  158. blockquote img {
  159.     width: 100%;
  160.     height: auto;
  161. }
  162.  
  163.     .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
  164.         z-index: 999999999999999999999999999999!important;
  165.     }
  166.    
  167.     #topbar {
  168.         height: 90px;
  169.         position: fixed;
  170.         z-index: 9;
  171.         background-color: {color:Top Bar};
  172.         width: 100%;
  173.         left: 0px;
  174.         right: 0px;
  175.         top: 0px;
  176.     }
  177.    
  178.     #topbar h1 {
  179.         font-size: 46px;
  180.         line-height: 60px;
  181.         color: {color:Blog Title};
  182.         margin: 0px;
  183.         padding: 0px;
  184.         font-family: 'blackoutmidnight';
  185.     }
  186.    
  187.     #topbar a {
  188.         color: {color:Top Bar Links};
  189.         text-transform: uppercase;
  190.         display: inline-block;
  191.         padding: 4px 15px;
  192.         font-size: 20px;
  193.         line-height: 22px;
  194.     }
  195.    
  196.     #topbar a:hover {
  197.         color: {color:Top Bar Links Hover};
  198.         letter-spacing: 4px;
  199.     }
  200.  
  201.     {block:IfHeader}
  202.    
  203.     #header {
  204.         position: absolute;
  205.         top: 50px;
  206.         width: 100%;
  207.         height: 100%;
  208.         left: 0px;
  209.         right: 0px;
  210.         background-image: url({image:Header Pic});
  211.         background-position: center top;
  212.         background-size: cover;
  213.         z-index: 8!important;
  214.         border-bottom: solid 10px {color:Top Bar};
  215.     }
  216.    
  217.     #header .header-quo {
  218.         background-color: rgba(255,255,255,0.5);
  219.         color: black;
  220.         text-shadow: 0px 0px 5px white;
  221.         height: auto;
  222.         width: 240px;
  223.         font-weight: 700;
  224.         padding: 30px;
  225.         text-align: center;
  226.         font-style: 6px;
  227.         margin-top: calc(30%);
  228.         margin-left: calc(50% - 150px);
  229.     }
  230.    
  231.     {/block:IfHeader}
  232.     #sidebar {
  233.         position: fixed;
  234.         top: 120px;
  235.         right: calc(50% + 450px);
  236.         width: 180px;
  237.     }
  238.    
  239.     .side-pic {
  240.         width: 130px;
  241.         height: 130px;
  242.         margin: 10px auto;
  243.     }
  244.    
  245.     .blog-desc {
  246.         height: auto;
  247.         margin: 10px auto;
  248.         width: 170px;
  249.         font-size: 11px;
  250.         text-transform: lowercase;
  251.         background-color: {color:Sidebar Stuff};
  252.     }
  253.    
  254.     .blog-desc div {
  255.         width: 148px;
  256.         margin: 0px;
  257.         padding: 5px 10px;
  258.         color: {color:Italic Text};
  259.         font-style: italic;
  260.         background: rgba(0,0,0,0.2);
  261.         border-left: solid 2px black;
  262.     }
  263.    
  264.     .blog-desc article {
  265.         padding: 5px;
  266.         width: 160px;
  267.         max-height: 200px;
  268.         overflow-y: scroll;
  269.     }
  270.    
  271.     .blog-desc p {
  272.         margin: 3px;
  273.     }
  274.    
  275.     .pagi a {
  276.         display: inline-block;
  277.         font-size: 13px;
  278.         padding: 5px auto;
  279.         text-align: center;
  280.         margin: 5px;
  281.         padding: 10px 15px;
  282.         color: {color:Text};
  283.         background-color: {color:Sidebar Stuff};
  284.     }
  285.    
  286.     .pagi a:hover {
  287.         color: black;
  288.         text-decoration: none;
  289.         background-color: {color:Italic Text};
  290.     }
  291.    
  292. #content {
  293.     width: 550px;
  294.     top: 140px;
  295.     {block:IfHeader}top: calc(100% + 100px);{/block:IfHeader}
  296.     position: absolute;
  297.     left: calc(50% - 293px);
  298.     padding-bottom: 20px;
  299. }
  300.  
  301. .post {
  302.     width: 500px;
  303.     padding: 10px;
  304.     margin: 25px 15px 10px;
  305.     background: white;
  306. }
  307.  
  308. .post .title {
  309.     font-size: 26px;
  310.     line-height: 30px;
  311.     font-weight: bold;
  312.     margin: 0px;
  313.     padding: 0px 2px;
  314. }
  315.  
  316. .post .text {
  317.     font-size: 13px;
  318. }
  319.  
  320. .post .picpost {
  321.     width: 100%;
  322.     height: auto;
  323. }
  324.  
  325. .post .quo-txt {
  326.     font-size: 20px;
  327.     font-style: italic;
  328.     color: {color:Quote};
  329.     line-height: 20px;
  330. }
  331.  
  332. .post .quo-txt i.fa {
  333.     font-size: 30px;
  334.     float: left;
  335.     display: block;
  336.     color: {color:Quote};
  337.     width: 40px;
  338.     line-height: 40px;
  339.     text-align: center;
  340. }
  341.  
  342. .post .quo-src {
  343.     font-size: 13px;
  344.     text-align: right;
  345. }
  346.  
  347. .cht-line {
  348.     border-top: dotted 1px {color:Text};
  349.     line-height: 20px;
  350. }
  351.  
  352. .cht-line:last-child {
  353.     border-bottom: dotted 1px {color:Text};
  354. }
  355.  
  356. .spotify_audio_player {
  357.     height: 80px!important;
  358. }
  359.  
  360. .ask-quest {
  361.     width: 100%;
  362.     margin: 0px 0px 10px;
  363. }
  364. .ask-quest .question-content {
  365.     padding: 10px;
  366.     color: {color:Ask Text};
  367.     border-radius: 15px;
  368.     font-size: 14px;
  369.     background-color: {color:Ask};
  370. }
  371.  
  372. .ask-quest .triangle {
  373.     height: 0px;
  374.     width: 0px;
  375.     margin-left: 400px;
  376.     border-top: solid 10px {color:Ask};
  377.     border-left: solid 15px transparent;
  378.     border-right: solid 15px transparent;
  379. }
  380.  
  381. .asker {
  382.     text-align: right;
  383. }
  384.  
  385. .asker span {
  386.     margin: 0px 20px 0px auto;
  387.     padding: 0px;
  388.     display: block;
  389.     line-height: 40px;
  390.     font-size: 13px;
  391.     float: right;
  392. }
  393.  
  394. .asker img {
  395.     display: block;
  396.     width: 34px;
  397.     float: right;
  398.     height: 34px;
  399.     border-radius: 50%;
  400.     border: solid 3px {color:Ask};
  401. }
  402.  
  403. .answer {
  404.     border: dotted 1px {color:Ask};
  405.     margin: 60px 10px 10px;
  406.     padding: 10px;
  407. }
  408.  
  409. .answer img {
  410.     width: 100%;
  411.     height: auto;
  412. }
  413.  
  414. .post-info {
  415.     width: 500px;
  416.     padding: 10px;
  417.     margin: 10px 15px;
  418.     background: white;
  419.     height: 22px;
  420. }
  421.  
  422. .post-info .perma {
  423.     float: left;
  424.     display: block;
  425.     font-size: 12px;
  426.     line-height: 22px;
  427.     height: 22px;
  428. }
  429.  
  430. .post-info .like-rb {
  431.     float: right;
  432.     display: block;
  433.     font-size: 12px;
  434.     line-height: 22px;
  435. }
  436.  
  437. .post-info .like-rb div {
  438.     display: inline-block;
  439. }
  440.  
  441. .tags {
  442.     width: 500px;
  443.     margin: 10px 30px 25px;
  444.     text-align: center;
  445. }
  446.  
  447. .tags a {
  448.     display: inline-block;
  449.     font-size: 12px;
  450.     line-height: 20px;
  451.     padding: 4px 10px;
  452.     background-color: black;
  453.     color: white;
  454.     margin: 3px 5px;
  455. }
  456.  
  457. .tags a:hover {
  458.     background-color: white;
  459.     color: black;
  460. }
  461.  
  462.     #postnotes {
  463.         font-size: 14px;
  464.         line-height: 24px;
  465.         max-height: 350px;
  466.         text-align: center;
  467.         overflow-y: scroll;
  468.     }
  469.  
  470.     #postnotes ol.notes {
  471.         padding: 0px;
  472.         margin: 25px 0px;
  473.         list-style-type: none;
  474.         border-bottom: solid 1px {color:Text};
  475.     }
  476.  
  477.     #postnotes ol.notes li.note {
  478.         border-top: solid 1px {color:Text};
  479.         padding: 5px 0px 0px;
  480.     }
  481.  
  482.     #postnotes ol.notes li.note img.avatar {
  483.         display: none;
  484.     }
  485.  
  486.     #postnotes ol.notes li.note span.action {
  487.         font-weight: bold;
  488.     }
  489.  
  490.     #postnotes ol.notes li.note .answer_content {
  491.         font-weight: normal;
  492.     }
  493.  
  494.     #credit {
  495.     position: fixed;
  496.     right: 5px;
  497.     bottom: 5px;
  498. }
  499.  
  500.  
  501.  
  502. /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 30, 2017 */
  503.  
  504.  
  505.  
  506. @font-face {
  507.     font-family: 'blackoutmidnight';
  508.     src: url('https://dl.dropboxusercontent.com/s/sgu25gtxoa6drpc/blackout-midnight-webfont.woff2') format('woff2'),
  509.          url('https://dl.dropboxusercontent.com/s/2aggqiwn1z4on74/blackout-midnight-webfont.woff') format('woff'),
  510.          url('https://dl.dropboxusercontent.com/s/q3b0cvi5v8hdznh/blackout-midnight-webfont.ttf') format('truetype');
  511.     font-weight: normal;
  512.     font-style: normal;
  513.  
  514. }
  515.    
  516. {CustomCSS}
  517. </style>
  518. </head>
  519. <body>
  520. <div id="container">
  521.  
  522. <div id="topbar" align="center">
  523.     <h1>{Title}</h1>
  524.     <a href="/">Home</a>
  525.     {block:HasPages}
  526.         {block:Pages}
  527.         <a href="{URL}">{Label}</a>
  528.         {/block:Pages}
  529.     {/block:HasPages}
  530.     {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>{/block:IfLink1}
  531.     {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>{/block:IfLink2}
  532.     {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:IfLink3}
  533.     {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:IfLink4}
  534.     {block:IfTwitterLink}<a href="http://www.twitter.com/{text:Twitter Username}">Twitter</a>{/block:IfTwitterLink}
  535.     {block:IfInstaLink}<a href="http://www.instagram.com/{text:Instagram Username}">Instagram</a>{/block:IfInstaLink}
  536. </div>
  537.  
  538.  
  539. {block:IfHeader}
  540. <div class="item-wrapper page-{CurrentPage}">
  541. <div id="header">
  542.     <div class="header-quo">{text:Header Quote}</div>
  543. </div>
  544. </div>
  545. {/block:IfHeader}
  546.  
  547.  
  548. <div id="stuff">   
  549.    
  550.     <div id="sidebar" align="center">
  551.         <img class="side-pic" src="{PortraitURL-128}" />
  552.         <div class="blog-desc"><div style="background-color:rgba(0,0,0.1);">{Name}</div><article>{Description}</article></div>
  553.         {block:Pagination}<div class="pagi" align="center">
  554.         {block:PreviousPage}<a href="{PreviousPage}">Back</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  555.         </div>{/block:Pagination}
  556.     </div>
  557.    
  558.     <div id="content">
  559.         {block:Posts}
  560.             <div class="post">
  561.    
  562.     {block:Text}
  563.         {block:Title}<h4 class="title">{Title}</h4>{/block:Title}
  564.         <article class="text">{Body}
  565.         {block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>
  566.     {/block:Text}
  567.    
  568.     {block:Photo}
  569.         <img src="{PhotoURL-HighRes}" class="picpost" alt="{PhotoAlt}" />
  570.         {block:Caption}<article class="text">{Caption}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>{/block:Caption}
  571.     {/block:Photo}
  572.    
  573.     {block:Photoset}
  574.         {Photoset-500}
  575.         {block:Caption}<article class="text">{Caption}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>{/block:Caption}
  576.     {/block:Photoset}
  577.    
  578.     {block:Quote}
  579.         <div class="quo-txt"><i class="fa fa-quote-left" aria-hidden="true"></i>{Quote}</div>
  580.         <div class="quo-src">{Source}</div>
  581.     {/block:Quote}
  582.    
  583.     {block:Link}
  584.         <h4 class="title"><a href="{URL}">{Name}</a></h4>
  585.         {block:Description}<article class="text">{Description}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>{/block:Description}
  586.     {/block:Link}
  587.    
  588.     {block:Chat}
  589.         {block:Title}<h4 class="title">{Title}</h4>{/block:Title}
  590.         {block:Lines}<article class="cht-line">{block:Label}<strong>{Label} </strong>{/block:Label}{Line}</article>{/block:Lines}
  591.     {/block:Chat}
  592.    
  593.     {block:Audio}
  594.         {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  595.         {block:Caption}<article class="text">{Caption}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>{/block:Caption}
  596.     {/block:Audio}
  597.    
  598.     {block:Video}
  599.         <div class="video">{Video-500}</div>
  600.         {block:Caption}<article class="text">{Caption}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</article>{/block:Caption}
  601.     {/block:Video}
  602.    
  603.     {block:Answer}
  604.         <div class="ask-quest">
  605.             <div class="question-content">{Question}</div><div class="triangle"></div>
  606.         </div>
  607.         <div class="asker"><img src="{AskerPortraitURL-96}" /><span>{Asker}</span></div>
  608.         {block:Answerer}
  609.             <div class="answer"><strong>{Answerer} replied:</strong><br>{Answer}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</div>
  610.         {/block:Answerer}
  611.         {block:NotReblog}<div class="answer">{Answer}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</div>{/block:NotReblog}
  612.         {block:RebloggedFrom}<div class="text">{Replies}</div>{/block:RebloggedFrom}
  613.     {/block:Answer}
  614.     </div>
  615.    
  616.     {block:Date}<div class="post-info">
  617.         <div class="perma"><a href="{Permalink}">{TimeAgo}</a>{block:NoteCount} | <a href="{Permalink}#postnotes">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
  618.         <div class="like-rb"><div>{ReblogButton color="black"}</div>&emsp;<div>{LikeButton color="black"}</div></div>
  619.     </div>{/block:Date}
  620.    
  621.     {block:HasTags}<div class="tags">
  622.         {block:Tags}<a href="{TagURL}">#{Tag}</a>&#8195;{/block:Tags}
  623.     </div>{/block:HasTags}
  624.    
  625.     {block:PermalinkPage}
  626.         {block:PostNotes}
  627.         <div class="post" id="postnotes">
  628.             {PostNotes}
  629.         </div>
  630.         {/block:PostNotes}
  631.     {/block:PermalinkPage}
  632. {/block:Posts}
  633.  
  634. </div>
  635.  
  636.  
  637. </div>
  638.  
  639.  
  640. <script>
  641. $(document).ready(function(){
  642.    $('.photo-slideshow').pxuPhotoset({
  643.        lightbox: true,
  644.        rounded: false,
  645.        gutter: '10px',
  646.        borderRadius: '0px',
  647.        photoset: '.photo-slideshow',
  648.        photoWrap: '.photo-data',
  649.        photo: '.pxu-photo'
  650.    });
  651. });
  652. </script>
  653.  
  654. <script>
  655. // minimal soundcloud player © shythemes.tumblr
  656. $(document).ready(function(){
  657.    var color = '#000'; // color of play button (hex)
  658.    $('.soundcloud_audio_player').each(function(){
  659.        $(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%' });
  660.    });
  661. });
  662. </script>
  663.  
  664.  
  665.  
  666.  
  667. <a id="credit" href="http://voicelessthemes.tumblr.com">&copy;</a>
  668.  
  669.  
  670. </body>
  671. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement