Advertisement
voicelessthemes

Theme #6

Aug 10th, 2017
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.57 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---THEME #6 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:ShowAskLink" content="0" />
  25.  
  26. <!--COLOR VARIABLES-->
  27. <meta name="color:Gradient 1" content="#ffb5c0" />
  28. <meta name="color:Gradient 2" content="#cab5ff" />
  29. <meta name="color:Page BG" content="#ffb5c0" />
  30. <meta name="color:Text" content="#818181" />
  31. <meta name="color:Bold Text" content="#818181" />
  32. <meta name="color:Italic Text" content="#818181" />
  33. <meta name="color:Bold Italic Text" content="#818181" />
  34. <meta name="color:Links" content="#000" />
  35. <meta name="color:Links Hover" content="#ffb5c0" />
  36. <meta name="color:Scrollbar" content="#000" />
  37. <meta name="color:Blockquote" content="#818181" />
  38. <meta name="color:Quote" content="#818181" />
  39. <meta name="color:Ask" content="black" />
  40. <meta name="color:Ask Text" content="white" />
  41. <meta name="color:Side BG" content="white" />
  42. <meta name="color:Blog Title" content="#818181" />
  43. <meta name="color:Blog Title Shadow" content="white" />
  44. <meta name="color:postinfbg" content="#818181" />
  45. <meta name="color:postinftxt" content="black" />
  46. <meta name="color:postinflnk" content="black" />
  47. <meta name="color:postinflnkhov" content="#818181" />
  48. <meta name="color:tags" content="#000" />
  49. <meta name="color:Post BG" content="#fff" />
  50. <meta name="color:Pagi" content="black" />
  51.  
  52. <!--IMAGE VARIABLES-->
  53. <meta name="image:Page BG" content="" />
  54. <meta name="image:Sidebar Tall" content="" />
  55. <meta name="image:Sidebar Wide" content="" />
  56.  
  57. <!--LINK VARIABLES-->
  58. <meta name="if:Link1" content="0" title="Custom Link 1" />
  59. <meta name="text:Link 1 URL" content="/" />
  60. <meta name="text:Link 1 Title" content="" />
  61. <meta name="if:Link2" content="0" title="Custom Link 2" />
  62. <meta name="text:Link 2 URL" content="/" />
  63. <meta name="text:Link 2 Title" content="" />
  64. <meta name="if:Link3" content="0" title="Custom Link 3" />
  65. <meta name="text:Link 3 URL" content="/" />
  66. <meta name="text:Link 3 Title" content="" />
  67. <meta name="if:Link4" content="0" title="Custom Link 4" />
  68. <meta name="text:Link 4 URL" content="/" />
  69. <meta name="text:Link 4 Title" content="" />
  70. <meta name="if:Link5" content="0" title="Custom Link 5" />
  71. <meta name="text:Link 5 URL" content="/" />
  72. <meta name="text:Link 5 Title" content="" />
  73. <meta name="if:Link6" content="0" title="Custom Link 6" />
  74. <meta name="text:Link 6 URL" content="/" />
  75. <meta name="text:Link 6 Title" content="" />
  76.  
  77. <!--END THEME OPTIONS-->
  78.  
  79. <!--FONTAWESOME ICONS-->
  80. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  81.  
  82. <!--JQUERY-->
  83. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  84.  
  85. <!--GOOGLE FONTS-->
  86. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  87.  
  88. <!--SHYTHEMES VIDEO RESIZER-->
  89. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  90.  
  91. <!--PIXEL UNION PHOTOSETS-->
  92. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  93. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  94.  
  95. <!--MASONRY-->
  96. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  97.  
  98. <!--CSS-->
  99. <style>
  100.  
  101. /*---BASIC---*/
  102. body {
  103.     {block:IfGradientBG}
  104.         background: linear-gradient({color:Gradient 1}, {color:Gradient 2});
  105.         background-size: cover;
  106.         background-attachment: fixed;
  107.     {/block:IfGradientBG}
  108.     {block:IfNotGradientBG}
  109.         background-color: {color:Page BG};
  110.         background-image: url({image:Page BG});
  111.         background-attachment: fixed;
  112.         background-position: center;
  113.         {block:IfFullPageBGImage}
  114.         background-size: cover;
  115.         {/block:IfFullPageBGImage}
  116.     {/block:IfNotGradientBG}
  117.     color: {color:Text};
  118.     font-family: 'Roboto Condensed', sans-serif;
  119. }
  120.  
  121. b, strong {
  122.     color: {color:Bold Text};
  123. }
  124.  
  125. i, em {
  126.     color: {color:Italic Text};
  127. }
  128.  
  129. b i, i b, strong i, i strong, em b, b em, em strong, strong em {
  130.     color: {color:Bold Italic Text};
  131. }
  132.  
  133. a {
  134.     color: {color:Links};
  135.     text-decoration: none;
  136.     transition: all 0.6s ease-in-out;
  137.     -moz-transition: all 0.6s ease-in-out;
  138.     -o-transition: all 0.6s ease-in-out;
  139.     -ms-transition: all 0.6s ease-in-out;
  140.     -webkit-transition: all 0.6s ease-in-out;
  141. }
  142.  
  143. a:hover {
  144.     color: {color:Links Hover};
  145.     font-weight: 800;
  146.     transition: all 0.6s ease-in-out;
  147.     -moz-transition: all 0.6s ease-in-out;
  148.     -o-transition: all 0.6s ease-in-out;
  149.     -ms-transition: all 0.6s ease-in-out;
  150.     -webkit-transition: all 0.6s ease-in-out;
  151. }
  152.  
  153.  
  154. ::-webkit-scrollbar {
  155.     width:3px;
  156.     height:3px;
  157.     background: transparent;
  158. }
  159.  
  160. ::-webkit-scrollbar-track {
  161.     width: 3px;
  162.     height: 3px;
  163.     background: transparent;
  164. }
  165.  
  166. ::-webkit-scrollbar-thumb {
  167.     background-color: {color:Scrollbar};
  168. }
  169.  
  170. blockquote {
  171.     padding: 0px 0px 0px 5px;
  172.     margin: 0px 0px 0px 3px;
  173.     border-left: solid 1px {color:Blockquote};
  174. }
  175.  
  176.  
  177. .sidebar {
  178.     width: 350px;
  179.     position: fixed;
  180.     right: calc(50% + 300px);
  181.     top: 10px;
  182. }
  183.  
  184. .blog-tit {
  185.     font-style: italic;
  186.     font-size: 30px;
  187.     color: {color:Blog Title};
  188.     text-shadow: 3px 3px 0px {color:Blog Title Shadow};
  189.     text-align: center;
  190. }
  191.  
  192. .sidetall {
  193.     width: 150px;
  194.     border: solid 10px {color:Side BG};
  195.     height: 210px;
  196. }
  197.  
  198. .desc {
  199.     width: 150px;
  200.     margin-left: 10px;
  201.     padding: 10px;
  202.     background: {color:Side BG};
  203.     float: right;
  204.     font-size: 13px;
  205.     text-align: center;
  206.     height: 210px;
  207.     overflow-y: scroll;
  208. }
  209.  
  210. .sidewide {
  211.     margin-top: 8px;
  212.     width: 330px;
  213.     border: solid 10px {color:Side BG};
  214.     height: 200px;
  215. }
  216.  
  217. .pagi {
  218.     font-size: 14px;
  219.     line-height: 20px;
  220.     width: 100%;
  221.     background: {color:Side BG};
  222.     margin-top: 10px;
  223. }
  224.  
  225. .prev {
  226.     color: {color:Pagi};
  227.     text-align: left;
  228.     display: inline-block;
  229.     width: 100px;
  230. }
  231.  
  232. .pageno {
  233.     color: {color:Pagi};
  234.     text-align: center;
  235.     display: inline-block;
  236.     width: 100px;
  237. }
  238.  
  239. .next {
  240.     color: {color:Pagi};
  241.     text-align: right;
  242.     display: inline-block;
  243.     width: 100px;
  244. }
  245.  
  246. .prev:hover, .next:hover {
  247.     color: black;
  248.     font-weight: bold;
  249. }
  250.  
  251. .content {
  252.     position: absolute;
  253.     left: calc(50% - 270px);
  254.     width: 540px;
  255.     margin-top: 0px;
  256.     margin-bottom: 0px;
  257.     height: 100%;
  258. }
  259.  
  260. .entry {
  261.     width: 520px;
  262.     margin: 10px 10px 30px;
  263. }
  264.  
  265. .post, .post-info {
  266.     width: 500px;
  267.     padding: 10px;
  268.     background: {color:Post BG};
  269. }
  270.  
  271. .post {
  272.     margin-bottom: 10px;
  273. }
  274.  
  275. .photo-img {
  276.     width: 100%;
  277.     height: auto;
  278. }
  279.  
  280. .title {
  281.     font-size: 26px;
  282.     margin: 0px;
  283. }
  284.  
  285. .text {
  286.     font-size: 13px;
  287. }
  288.  
  289. .text img {
  290.     width: 100%;
  291.     height: auto;
  292. }
  293.  
  294. .quo-txt {
  295.     font-size: 20px;
  296.     color: {color:Quote};
  297. }
  298.  
  299. .quo-src {
  300.     text-align: right;
  301. }
  302.  
  303. .cht-line {
  304.     font-size: 14px;
  305.     border-bottom: solid 1px black;
  306.     padding: 3px;
  307.     color: black;
  308. }
  309.  
  310. .cht-line:last-of-type {
  311.     border-bottom: solid 0px transparent;
  312. }
  313.  
  314. .audio-cont {
  315.     width: 100%;
  316. }
  317.  
  318. .t-player {
  319.     height: 120px;
  320.     width: 500px;
  321. }
  322.  
  323. .art {
  324.     width: 120px;
  325.     height: 120px;
  326.     background-color: #000;
  327.     {block:AlbumArt}background-image: url({AlbumArt});{/block:AlbumArt}
  328.     background-size: 120px;
  329.     float: left;
  330. }
  331.  
  332. .player {
  333.     width: 30px;
  334.     height: 30px;
  335.     overflow: hidden;
  336.     margin-top: 45px;
  337.     margin-left: 45px;
  338. }
  339.  
  340. .info {
  341.     width: 380px;
  342.     text-align: right;
  343.     height: 120px;
  344.     float: right;
  345.     margin-bottom: -120px;
  346. }
  347.  
  348. .ask-quest {
  349.     width: 100%;
  350.     margin: 0px 0px 10px;
  351. }
  352. .ask-quest .question-content {
  353.     padding: 10px;
  354.     color: {color:Ask Text};
  355.     border-radius: 15px;
  356.     font-size: 14px;
  357.     background-color: {color:Ask};
  358.     text-align: center;
  359. }
  360.  
  361. .ask-quest .triangle {
  362.     height: 0px;
  363.     width: 0px;
  364.     margin-left: 250px;
  365.     border-top: solid 10px {color:Ask};
  366.     border-left: solid 15px transparent;
  367.     border-right: solid 15px transparent;
  368. }
  369.  
  370. .asker {
  371.     text-align: right;
  372. }
  373.  
  374. .asker span {
  375.     margin: 0px 20px 0px auto;
  376.     padding: 0px;
  377.     display: block;
  378.     line-height: 40px;
  379.     font-size: 13px;
  380.     float: right;
  381. }
  382.  
  383. .asker img {
  384.     display: block;
  385.     width: 30px;
  386.     float: right;
  387.     height: 30px;
  388.     border-radius: 50%;
  389.     border: solid 1px {color:Ask};
  390. }
  391.  
  392. .answer {
  393.     border: dotted 1px {color:Ask};
  394.     margin: 60px 10px 10px;
  395.     padding: 10px;
  396. }
  397.  
  398. .answer img {
  399.     width: 100%;
  400.     height: auto;
  401. }
  402.  
  403. .answer .answererpic {
  404.     width: 30px!important;
  405.     height: 30px!important;
  406.     float: left;
  407.     margin-right: 5px;
  408.     border-radius: 50%;
  409.     border: solid 1px {color:Ask};
  410. }
  411.  
  412. .inf {
  413.     background-color: {color:postinfbg};
  414.     padding: 3px;
  415.     margin-bottom: 10px;
  416.     font-size: 13px;
  417.     color: {color:postinftxt};
  418. }
  419.  
  420. .inf a {
  421.     color:{color:postinflnk};
  422. }
  423.  
  424. .inf a:hover {
  425.     color:{color:postinflnkhov};
  426. }
  427.  
  428. .tags {
  429.     font-size: 12px;
  430. }
  431.  
  432. .tags a {
  433.     color: {color:tags};
  434. }
  435.  
  436. .tags a:hover {
  437.     letter-spacing: 5px;
  438. }
  439.  
  440. .links {
  441.     width: 120px;
  442.     position: fixed;
  443.     left: calc(50% + 300px);
  444.     bottom: 0px;
  445.     background: {color:Side BG};
  446. }
  447.  
  448. .links img {
  449.     width: 100px;
  450.     margin: 10px;
  451. }
  452.  
  453. .links a {
  454.     display: block;
  455.     line-height: 18px;
  456.     font-size: 13px;
  457.     padding: 5px 0px;
  458.     margin: 0px 10px 10px;
  459.     background: black;
  460.     color: white;
  461. }
  462.  
  463. .links a:hover {
  464.     background: {color:Links Hover};
  465. }
  466.  
  467. /*---CREDIT---*/
  468. #th-cred {
  469.     position: fixed;
  470.     bottom: 10px;
  471.     right: 15px;
  472.     color: black;
  473.     font-weight: 600;
  474.     font-size: 36px;
  475.     z-index: 99999999999999;
  476.     display: block;
  477. }
  478.  
  479. #th-cred:hover {
  480.     text-decoration: none;
  481.     color: white;
  482. }
  483.  
  484. </style>
  485. <!--END CSS-->
  486. </head>
  487. <body>
  488.  
  489. <div class="sidebar">
  490.     <h1 class="blog-tit">{Title}</h1>
  491.     <img src="{image:Sidebar Tall}" class="sidetall" />
  492.     <div class="desc">{Description}</div>
  493.     <img src="{image:Sidebar Wide}" class="sidewide" />
  494.     {block:Pagination}<div class="pagi" align="center">
  495.         {block:PreviousPage}<a class="prev" href="{PreviousPage}">&#8810;</a>{/block:PreviousPage}
  496.         <span class="pageno">{CurrentPage}/{TotalPages}</span>
  497.         {block:NextPage}<a class="next" href="{NextPage}">&#8811;</a>{/block:NextPage}
  498.     </div>{/block:Pagination}
  499. </div>
  500.  
  501.  
  502.  
  503. <!--POSTS-->
  504. <div class="content">
  505.     {block:Posts}
  506.     <div class="entry">
  507.    
  508.     <div class="post">
  509.    
  510.     {block:Text}
  511.         {block:Title}<h4 class="title">{Title}</h4>{/block:Title}
  512.         <article class="text">{Body}</article>
  513.         {block:More}<a href="{Permalink}" align="center">read more</a>{/block:More}
  514.     {/block:Text}
  515.    
  516.     {block:Photo}
  517.         <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="photo-img" />
  518.         {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  519.     {/block:Photo}
  520.    
  521.     {block:Photoset}
  522.         <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  523.         {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  524.     {/block:Photoset}
  525.    
  526.     {block:Quote}
  527.         <div class="quo-txt">&ldquo;{Quote}&rdquo;</div>
  528.         <div class="quo-src">&#8212;{Source}</div>
  529.     {/block:Quote}
  530.    
  531.     {block:Link}
  532.         <h4 class="title"><a href="{URL}">{Name}</a></h4>
  533.         {block:Description}<article class="text">{Description}</article>{/block:Description}
  534.     {/block:Link}
  535.    
  536.     {block:Chat}
  537.         {block:Title}<h4 class="title">{Title}</h4>{/block:Title}
  538.         {block:Lines}<article class="cht-line">{block:Label}<strong>{Label} </strong>{/block:Label}{Line}</article>{/block:Lines}
  539.     {/block:Chat}
  540.    
  541.     {block:Audio}
  542.         <div class="audio-cont" >
  543.             {block:AudioPlayer}<div class="t-player">
  544.             <div class="art"><div class="player">{AudioPlayer}</div></div>
  545.             <div class="info"><strong><p>
  546.                 {block:TrackName}{TrackName}<br>{/block:TrackName}
  547.                 {block:Album}{Album}<br>{/block:Album}
  548.                 {block:Artist}{Artist}{/block:Artist}
  549.             </p></strong></div></div>
  550.             {/block:AudioPlayer}
  551.             {block:AudioEmbed}<div class="sc-player">{AudioEmbed}</div>{/block:AudioEmbed}
  552.         </div>
  553.         {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  554.     {/block:Audio}
  555.    
  556.     {block:Video}
  557.         <div class="video">{Video-500}</div>
  558.         {block:Caption}<article class="text">{Caption}</article>{/block:Caption}
  559.     {/block:Video}
  560.    
  561.     {block:Answer}
  562.         <div class="ask-quest">
  563.             <div class="question-content">{Question}</div><div class="triangle"></div>
  564.         </div>
  565.         <div class="asker"><img src="{AskerPortraitURL-96}" /><span>{Asker}</span></div>
  566.         {block:Answerer}
  567.             <div class="answer"><img class="answererpic" src="{AnswererPortraitURL-96}" /><strong>{Answerer} replied:</strong><br>{Answer}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</div>
  568.         {/block:Answerer}
  569.         {block:NotReblog}<div class="answer">{Answer}{block:More}<p><a href="{Permalink}" align="center">read more</a></p>{/block:More}</div>{/block:NotReblog}
  570.         {block:RebloggedFrom}<div class="text">{Replies}</div>{/block:RebloggedFrom}
  571.     {/block:Answer}
  572.     </div>
  573.    
  574.     <div class="post-info" align="center">{block:IndexPage}
  575.         <div class="inf">{block:Date}<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>&ensp;&#9671;&ensp;{/block:Date}{block:NoteCount}<a href="{Permalink}#postnotes">{NoteCountWithLabel}</a>&ensp;&#9671;&ensp;{/block:NoteCount}<a href="{ReblogURL}">Reblog</a></div>
  576.     {block:HasTags}<div class="tags">
  577.         {block:Tags}<a href="{TagURL}">#{Tag}</a>&#8195;{/block:Tags}
  578.     </div>{/block:HasTags}{/block:IndexPage}
  579.     </div>
  580.    
  581.     </div>
  582.    
  583.     {block:PermalinkPage}
  584.     <div class="entry">
  585.         {block:PostNotes}
  586.         <div class="post" id="postnotes">
  587.             {PostNotes}
  588.         </div>
  589.         {/block:PostNotes}
  590.     </div>
  591.     {/block:PermalinkPage}
  592.    
  593.     {/block:Posts}
  594. </div>
  595.  
  596. <!--END POSTS-->
  597.  
  598. <div class="links" align="center">
  599.     <img src="{PortraitURL-128}" />
  600.     <a href="/">Home</a>
  601.     <a href="/archive">Archive</a>
  602.     {block:IfShowAskLink}{block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}{/block:IfShowAskLink}
  603.     {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  604.     {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>{/block:IfLink1}
  605.     {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>{/block:IfLink2}
  606.     {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:IfLink3}
  607.     {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:IfLink4}
  608.     {block:IfLink5}<a href="{text:Link 5 URL}">{text:Link 5 Title}</a>{/block:IfLink5}
  609.     {block:IfLink6}<a href="{text:Link 6 URL}">{text:Link 6 Title}</a>{/block:IfLink6}
  610. </div>
  611.  
  612. <!--SCRIPTS-->
  613.  
  614.  
  615. <!--SHYTHEMES MINIMAL SOUNDCLOUD PLAYER-->
  616. <script>
  617. $(document).ready(function(){
  618.    var color = '{color:Audio Player}';  
  619.    $('.soundcloud_audio_player').each(function(){
  620.        $(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%' });
  621.    });
  622. });
  623. </script>
  624.  
  625. <script>
  626. $(document).ready(function(){
  627.    $('.photo-slideshow').pxuPhotoset({
  628.        lightbox: true,
  629.        rounded: false,
  630.        gutter: '5px',
  631.        photoset: '.photo-slideshow',
  632.        photoWrap: '.photo-data',
  633.        photo: '.pxu-photo'
  634.    });
  635. });
  636. </script>
  637.  
  638.  
  639.  
  640.  
  641. <!--END SCRIPTS-->
  642.  
  643.  
  644. {block:ContentSource}
  645. <!– {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  646. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  647. {/block:SourceLogo}
  648. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} –>
  649. {/block:ContentSource}
  650.  
  651.  
  652. <a href="http://voicelessthemes.tumblr.com" id="th-cred">&#169;</a>
  653.  
  654.  
  655.  
  656. </body>
  657. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement