API tools faq
paste
Advertisement
voicelessthemes

Theme #4

voicelessthemes
Apr 24th, 2017
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--THEME #4 BY VOICELESSTHEMES
  6. DO NOT CLAIM AS YOUR OWN OR STEAL PARTS OF MY CODE
  7. LEAVE CREDIT INTACT-->
  8.  
  9.  
  10. <title>{Title}</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}
  14.     <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16.  
  17. <meta name="color:Page Background" content="#ccc" />
  18. <meta name="color:Text" content="#000" />
  19. <meta name="color:Links" content="#91ff87" />
  20. <meta name="color:Links Hover" content="#adf0e8" />
  21. <meta name="color:Bold Text" content="#55d0c7" />
  22. <meta name="color:Italic Text" content="#93a5d8" />
  23. <meta name="color:Bold Italic Text" content="#916bab" />
  24. <meta name="color:Selection Text" content="#000" />
  25. <meta name="color:Selection" content="#b834e1" />
  26. <meta name="color:Scrollbar Track" content="#ccc" />
  27. <meta name="color:Scrollbar Thumb" content="#000" />
  28. <meta name="color:Blog Title" content="#000" />
  29. <meta name="color:Sidebar Background" content="#fff" />
  30. <meta name="color:Post Background" content="#fff" />
  31. <meta name="color:Body Heading" content="#69c9ee" />
  32. <meta name="color:Ask" content="#ccc" />
  33. <meta name="color:Song Info" content="#69c9ee" />
  34.  
  35. <meta name="image:Page Background" content="" />
  36. <meta name="image:Sidebar" content="" />
  37.  
  38. <meta name="if:Full Page Background" content="0" />
  39. <meta name="if:Monochrome Images" content="0" />
  40. <meta name="if:Show Ask Link" content="0" />
  41. <meta name="if:Show Submit Link" content="0" />
  42. <meta name="if:Link 1" content="0" />
  43. <meta name="if:Link 2" content="0" />
  44. <meta name="if:Link 3" content="0" />
  45. <meta name="if:Link 4" content="0" />
  46. <meta name="if:Twitter Link" content="0" />
  47. <meta name="if:Instagram Link" content="0" />
  48.  
  49. <meta name="text:Link 1 URL" content="/" />
  50. <meta name="text:Link 1 Label" content="" />
  51. <meta name="text:Link 2 URL" content="/" />
  52. <meta name="text:Link 2 Label" content="" />
  53. <meta name="text:Link 3 URL" content="/" />
  54. <meta name="text:Link 3 Label" content="" />
  55. <meta name="text:Link 4 URL" content="/" />
  56. <meta name="text:Link 4 Label" content="" />
  57. <meta name="text:Twitter Username" content="" />
  58. <meta name="text:Instagram Username" content="" />
  59.  
  60.  
  61. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  64. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  65. <script src="https://use.fontawesome.com/1796a42c5c.js"></script>
  66.  
  67. <style>
  68.  
  69. body {
  70.     background-color: {color:Page Background};
  71.     background-image: url("{image:Page Background}");
  72.     background-attachment: fixed;
  73.     {block:IfFullPageBackground}background-size: cover;{/block:IfFullPageBackground}
  74.     {block:IfNotFullPageBackground}background-size: auto;{/block:IfNotFullPageBackground}
  75.     font-family: 'Open Sans', sans-serif;
  76.     color: {color:Text};
  77. }
  78.  
  79. a {
  80.     text-decoration: none;
  81.     color: {color:Links};
  82.     transition: all 0.5s ease-in-out;
  83.     -webkit-transition: all 0.5s ease-in-out;
  84.     -moz-transition: all 0.5s ease-in-out;
  85.     -o-transition: all 0.5s ease-in-out;
  86.     -ms-transition: all 0.5s ease-in-out;
  87. }
  88.  
  89. a:hover {
  90.     color: {color:Links Hover};
  91.     text-decoration: line-through;
  92.     transition: all 0.5s ease-in-out;
  93.     -webkit-transition: all 0.5s ease-in-out;
  94.     -moz-transition: all 0.5s ease-in-out;
  95.     -o-transition: all 0.5s ease-in-out;
  96.     -ms-transition: all 0.5s ease-in-out;
  97. }
  98.  
  99. b, strong {
  100.     color: {color:Bold Text};
  101.     font-weight: 700;
  102. }
  103.  
  104. i, em {
  105.     color: {color:Italic Text};
  106. }
  107.  
  108. b i, i b, strong i, i strong, em b, b em, em strong, strong em {
  109.     color: {color:Bold Italic Text};
  110.     font-weight: 800;
  111. }
  112.  
  113. ::selection {
  114.     color: {color:Selection Text};
  115.     background: {color:Selection};
  116.     opacity: 1!important;
  117. }
  118.  
  119. ::-webkit-scrollbar {
  120.     width: 6px;
  121.     height: 6px;
  122. }
  123.  
  124. ::-webkit-scrollbar-track {
  125.     background-color: {color:Scrollbar Track};
  126. }
  127.  
  128. ::-webkit-scrollbar-thumb {
  129.     background-color: {color:Scrollbar Thumb};
  130.     border: solid 2px {color:Scrollbar Track};
  131. }
  132.  
  133. {block:IfMonochromeImages}
  134. img {
  135.     -webkit-filter: grayscale(1);
  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.  
  144. img:hover {
  145.     -webkit-filter: grayscale(0);
  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. {/block:IfMonochromeImages}
  153. #sidebar {
  154.     position: fixed;
  155.     width: 320px;
  156.     left: 30px;
  157.     top: 80px;
  158. }
  159.  
  160. .blog-tit {
  161.     text-align: right;
  162.     font-size: 30px;
  163.     font-weight: 700;
  164.     color: {color:Blog Title};
  165.     margin: 5px;
  166.     padding: 5px;
  167. }
  168.  
  169. .side-cont {
  170.     background-color: {color:Sidebar Background};
  171.     padding: 10px;
  172.     width: 300px;
  173.     height: auto;
  174. }
  175.  
  176. .side-pic {
  177.     width: 300px;
  178.     height: auto;
  179. }
  180.  
  181. .side-icon {
  182.     width: 80px;
  183.     height: 80px;
  184.     margin-top: -70px;
  185.     margin-left: -30px;
  186.     border-radius: 50%;
  187.     border: solid 5px {color:Sidebar Background};
  188. }
  189.  
  190. .side-desc {
  191.     font-size: 11px;
  192. }
  193.  
  194. .desc {
  195.     max-height: 120px;
  196.     overflow-y: scroll;
  197.     width: 300px;
  198. }
  199.  
  200. .desc p {
  201.     margin: 3px;
  202.     padding: 3px;
  203. }
  204.  
  205. .pagi {
  206.     text-align: right;
  207.     margin-top: 5px;
  208. }
  209.  
  210. .side-links {
  211.     text-align: center;
  212.     width: 300px;
  213.     font-size: 14px;
  214. }
  215.  
  216. .side-links a {
  217.     display: inline-block;
  218.     margin: 2px 5px;
  219. }
  220.  
  221. #content {
  222.     width: 550px;
  223.     position: absolute;
  224.     height: 100%;
  225.     left: 450px;
  226. }
  227.  
  228. .post-cont {
  229.     display: block;
  230. }
  231.  
  232. .post {
  233.     width: 400px;
  234.     margin: 10px;
  235.     float: left;
  236.     background: {color:Post Background};
  237.     padding: 10px;
  238.     text-align: justify;
  239.     z-index: 1;
  240. }
  241.  
  242. .post h2 {
  243.     color: {color:Body Heading};
  244. }
  245.  
  246. .post img {
  247.     width: 100%;
  248. }
  249.  
  250. .post .title {
  251.     font-size: 22px;
  252.     font-weight: bold;
  253. }
  254.  
  255. .post .text {
  256.     font-size: 12px;
  257.     width: 100%;
  258.     line-height: 19px;
  259. }
  260.  
  261. blockquote img {
  262.     width: 100%;
  263.     height: auto;
  264. }
  265.  
  266. .quo-cont {
  267.     width: 400px;
  268.     display: block;
  269. }
  270.  
  271. .post .fa {
  272.     width: 50px;
  273.     height: 50px;
  274.     float: left;
  275. }
  276.  
  277. .post .quo {
  278.     font-size: 18px;
  279.     text-align: center;
  280.     font-weight: bold;
  281.     width: calc(100% - 50px);
  282.     float: left;
  283. }
  284.  
  285. .post .lnk-pst {
  286.     display: block;
  287.     background-color: {color:Links};
  288.     border: solid 2px black;
  289.     font-size: 18px;
  290.     font-weight: 700;
  291.     color: black;
  292.     padding: 15px;
  293.     text-align: center;
  294.     width: auto;
  295.     border-radius: 20px;
  296. }
  297.  
  298. .post .lnk-pst:hover {
  299.     background-color: {color:Links Hover};
  300.     text-decoration: none;
  301. }
  302.  
  303. .post .chat-line {
  304.     font-size: 14px;
  305.     border-bottom: solid 1px black;
  306.     margin: 0px;
  307.     padding: 5px;
  308. }
  309.  
  310. .post .chat-line:last-child {
  311.     border-bottom: 0px solid transparent;
  312. }
  313.  
  314. .post .question {
  315.     font-size: 15px;
  316.     font-weight: 800;
  317.     background-color: {color:Ask};
  318.     text-align: center;
  319.     margin: 10px;
  320.     padding: 5px;
  321. }
  322.  
  323. .post .answer {
  324.     font-size: 13px;
  325.     text-align: justify;
  326.     margin: 5px 15px 10px;
  327.     padding: 5px;
  328.     border: solid 1px {color:Ask};
  329. }
  330.  
  331. .post .answer p {
  332.     margin: 2px 0px;
  333. }
  334.  
  335. .post .answer img {
  336.     width: 100%;
  337.     height: auto;
  338. }
  339.  
  340. .audio-post {
  341.     height: 50px;
  342. }
  343.  
  344. .audio-content {
  345.     width: 30px;
  346.     height: 30px;
  347.     overflow:hidden;
  348.     margin: 10px;
  349.     float: left;
  350. }
  351.  
  352. .audio-post h4 {
  353.     width: calc(100% - 60px);
  354.     margin: 0px;
  355.     padding: 5px;
  356.     height: 40px;
  357.     float: left;
  358.     color: {color:Song Info};
  359.     font-size: 13px;
  360. }
  361.  
  362. blockquote {
  363.     margin: 0px 0px 0px 4px;
  364.     padding: 0px 0px 0px 8px;
  365.     border-left: solid 1px black;
  366. }
  367.  
  368. .info {
  369.     width: 100px;
  370.     float: left;
  371.     margin-top: 5px;
  372.     text-align: center;
  373.     font-size: 11px;
  374. }
  375.  
  376. .rb {
  377.     width: 30px;
  378.     height: 30px;
  379.     line-height: 30px;
  380.     padding: 5px;
  381.     margin: 5px;
  382.     background-color: white;
  383.     float: left;
  384. }
  385.  
  386. .like {
  387.     width: 30px;
  388.     height: 30px;
  389.     line-height: 30px;
  390.     padding: 5px;
  391.     margin: 5px;
  392.     background-color: white;
  393.     float: left;
  394. }
  395.  
  396. .date {
  397.     width: 90px;
  398.     margin: 5px;
  399.     background-color: white;
  400. }
  401.  
  402. .note-count {
  403.     width: 90px;
  404.     margin: 5px;
  405.     background-color: white;
  406. }
  407.  
  408. .tags {
  409.     width: 400px;
  410.     text-align: center;
  411.     display: block;
  412.     margin-bottom: 30px;
  413.     background: transparent;
  414. }
  415.  
  416. .tags a {
  417.     display: inline-block;
  418.     font-size: 12px;
  419.     color: {color:Text};
  420.     background-color: {color:Links};
  421.     border: solid 1px {color:Text};
  422.     border-radius: 5px;
  423.     padding: 5px;
  424.     margin: 5px;
  425. }
  426.  
  427. .tags a:hover {
  428.     background-color: {color:Links Hover};
  429. }
  430.  
  431.     #postnotes {
  432.         font-size: 14px;
  433.         line-height: 24px;
  434.         max-height: 350px;
  435.         text-align: center;
  436.         overflow-y: scroll;
  437.     }
  438.  
  439.     #postnotes ol.notes {
  440.         padding: 0px;
  441.         margin: 25px 0px;
  442.         list-style-type: none;
  443.         border-bottom: solid 1px {color:Text};
  444.     }
  445.  
  446.     #postnotes ol.notes li.note {
  447.         border-top: solid 1px {color:Text};
  448.         padding: 5px 0px 0px;
  449.     }
  450.  
  451.     #postnotes ol.notes li.note img.avatar {
  452.         display: none;
  453.     }
  454.  
  455.     #postnotes ol.notes li.note span.action {
  456.         font-weight: bold;
  457.     }
  458.  
  459.     #postnotes ol.notes li.note .answer_content {
  460.         font-weight: normal;
  461.     }
  462.  
  463. #credit {
  464.     position: fixed;
  465.     right: 5px;
  466.     bottom: 5px;
  467.     color: black;
  468. }
  469.  
  470. #credit:hover {
  471.     color: white;
  472. }
  473.  
  474. {CustomCSS}
  475. </style>
  476.  
  477. <script>
  478. $(document).ready(function(){
  479.    $('.photo-slideshow').pxuPhotoset({
  480.        lightbox: true,
  481.        rounded: false,
  482.        gutter: '10px',
  483.        borderRadius: '0px',
  484.        photoset: '.photo-slideshow',
  485.        photoWrap: '.photo-data',
  486.        photo: '.pxu-photo'
  487.    });
  488. });
  489. </script>
  490.  
  491. </head>
  492. <body>
  493. <div id="container">
  494.  
  495. <div id="sidebar">
  496.     <h1 class="blog-tit">{Title}</h1>
  497.     <div class="side-cont">
  498.         <img class="side-pic" src="{image:Sidebar}" />
  499.         <img class="side-icon" src="{PortraitURL-128}" />
  500.         <div class="side-desc">
  501.             <div class="desc">
  502.                 {Description}
  503.             </div>
  504.             {block:Pagination}
  505.             <div class="pagi">
  506.                     {block:PreviousPage}<a href="{PreviousPage}">Back</a> | {/block:PreviousPage}
  507.                     {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  508.                 </div>
  509.             {/block:Pagination}
  510.         </div>
  511.     </div>
  512.         <div class="side-links">
  513.             <a href="/">Home</a>
  514.             <a href="/archive">Past</a>
  515.             {block:IfShowAskLink}<a href="/ask">{AskLabel}</a>{/block:IfShowAskLink}
  516.             {block:IfShowSubmitLink}<a href="/submit">{SubmitLabel}</a>{/block:IfShowSubmitLink}
  517.             {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  518.             {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1 Label}</a>{/block:IfLink1}
  519.             {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2 Label}</a>{/block:IfLink2}
  520.             {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3 Label}</a>{/block:IfLink3}
  521.             {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4 Label}</a>{/block:IfLink4}
  522.             {block:IfTwitterLink}<a href="http://www.twitter.com/{text:Twitter Username}">Twitter</a>{/block:IfTwitterLink}
  523.             {block:IfInstagramLink}<a href="http://www.instagram.com/{text:Instagram Username}">Instagram</a>{/block:IfInstagramLink}
  524.         </div>
  525. </div>
  526.  
  527. <div id="content">
  528.     {block:Posts}
  529.     <div class="post-cont">
  530.         <div class="post">
  531.            
  532.             {block:Text}
  533.                 {block:Title}
  534.                     <div class="title">{Title}</div>
  535.                 {/block:Title}
  536.                 <div class="text">{Body}</div>        
  537.             {/block:Text}
  538.  
  539.             {block:Photo}
  540.                 <a href="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
  541.  
  542.                 {block:Caption}
  543.                     <div class="text">{Caption}</div>
  544.                 {/block:Caption}
  545.             {/block:Photo}
  546.  
  547.             {block:Photoset}
  548.                 <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>
  549.  
  550.                 {block:Caption}
  551.                     <div class="text">{Caption}</div>
  552.                 {/block:Caption}
  553.             {/block:Photoset}
  554.  
  555.             {block:Quote}
  556.                 <div class="quo-cont"><i class="fa fa-quote-left" style="color: {color:Text}; font-size: 50px; float: left;" aria-hidden="true"></i><div class="quo" style="font-style: italic; float: left">{Quote}</div></div>
  557.  
  558.                 {block:Source}
  559.                     <div class="text">~ {Source}</div>
  560.                 {/block:Source}
  561.             {/block:Quote}
  562.  
  563.             {block:Link}
  564.                 <a class="lnk-pst" href="{URL}" class="title" {Target}>{Name}</a>
  565.  
  566.                 {block:Description}
  567.                     <div class="text">{Description}</div>
  568.                 {/block:Description}
  569.             {/block:Link}
  570.  
  571.             {block:Chat}
  572.                 {block:Title}
  573.                     <div class="title">{Title}</div>
  574.                 {/block:Title}
  575.                
  576.                 {block:Lines}
  577.                 <div class="chat-line">
  578.                 {block:Label}<strong>{Label} </strong>{/block:Label}{Line}
  579.                 </div>
  580.                 {/block:Lines}
  581.             {/block:Chat}
  582.  
  583.             {block:Video}
  584.                 {Video-400}
  585.  
  586.                 {block:Caption}
  587.                     <div class="text">{Caption}</div>
  588.                 {/block:Caption}
  589.             {/block:Video}
  590.            
  591.             {block:Answer}
  592.                 <div class="question">{Asker} said: {Question}</div>
  593.                 {block:Answerer}
  594.                     <div class="answer"><p><strong>{Answerer} replied:</strong></p>{Answer}</div>
  595.                 {/block:Answerer}
  596.                 {block:NotReblog}<div class="answer">{Answer}</div>{/block:NotReblog}
  597.                 {block:RebloggedFrom}<div class="text">{Replies}</div>{/block:RebloggedFrom}
  598.             {/block:Answer}
  599.  
  600.             {block:Audio}
  601.                 <div class="audio-post">
  602.                     <div class="audio-content">{AudioPlayerBlack}</div>
  603.                         <h4>{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}&nbsp;||&nbsp;{Artist}{/block:Artist}</h4>
  604.                 </div>
  605.                 {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  606.             {/block:Audio}
  607.         </div>
  608.        
  609.         <div class="info">
  610.             <div class="rb">{ReblogButton}</div> <div class="like">{LikeButton}</div>
  611.             {block:Date}<div class="date"><a href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear}<br />
  612.             {12Hour}:{Minutes}{AmPm}</a></div>{/block:Date}
  613.             {block:NoteCount}<div class="note-count"><a href="{Permalink}#postnotes">{NoteCount}</a></div>{/block:NoteCount}
  614.         </div>
  615.        
  616.         {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag} </a>{/block:Tags}</div>{/block:hasTags}
  617.        
  618.         </div>
  619.     {/block:Posts}
  620.    
  621.    
  622.     {block:PermalinkPage}{block:PostNotes}
  623.         <div class="post">
  624.             <div id="postnotes">
  625.                 {PostNotes}
  626.             </div>
  627.         </div>
  628.         {/block:PostNotes}
  629.     {/block:PermalinkPage}
  630. </div>
  631.  
  632. <a id="credit" href="http://voicelessthemes.tumblr.com">&copy;</a>
  633.  
  634. </div>
  635. </body>
  636. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!