API tools faq
paste
Advertisement
voicelessthemes

Theme #8

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