API tools faq
paste
Advertisement
voicelessthemes

Theme #5

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