Advertisement
voicelessthemes

Theme #7

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