API tools faq
paste
Petra1999

MAGNUM OPUS THEME | cloudythms.tumblr.com

Petra1999
Apr 21st, 2017
536
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 24.50 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2.  
  3.  
  4.  {   cloudythms
  5.           magnum opus theme    }
  6.          
  7.        
  8. - http://cloudythms.tumblr.com/
  9. - visit me if you have questions!
  10.  
  11.  
  12.     .. rules
  13.    
  14. - You may move, but not remove the credit
  15. - Leave this comment
  16. - Edit the rest as much as you want
  17. - Do not redistribute without permission / use as base
  18. - Do not claim as your own
  19.  
  20.  
  21.     .. credits
  22.    
  23. - base code by sorrism
  24. - svg icons from flaticon.com
  25. - lazy load script by mika tuupola
  26. - smooth scroll tutorial by zacharyfury
  27.  
  28.  
  29.    .. guide
  30.  
  31. - correct place to paste css code: ctrl+f "pastecsshere"
  32. - correct place to paste html code: ctrl+f "pastehtmlhere"
  33.  
  34.  
  35. ---------------------------------------------------------------------->
  36.  
  37.  
  38. <!DOCTYPE html>
  39. <head>
  40. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  41. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  42.  
  43. <!-- Text that appears on the tab / browser window
  44.    Change the {Title} to any text if you want to. -->
  45. <title>{Title}</title>
  46.  
  47. <!-- Favicon (little image that shown in browser)
  48.    Change {Favicon} to your image URL. Leave the "". -->
  49. <link rel="shortcut icon" href="{Favicon}"/>
  50.  
  51. <!-- jQuery -->
  52.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53.  
  54. <!-- Fonts -->
  55. <link href="https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans|PT+Serif" rel="stylesheet">
  56.  
  57.  
  58.  <!------ S C R I P T S! ------>
  59.  
  60. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  61. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  62. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  63.  
  64. <script type="text/javascript">
  65. $(window).load(function(){
  66. var $wall = $('#entries');
  67. $wall.imagesLoaded(function(){
  68. $wall.masonry({
  69. itemSelector: '.post',
  70. isAnimated : true
  71. });
  72. });
  73. $wall.infinitescroll({
  74. navSelector : "div#navigation",
  75. nextSelector : "div#navigation a#nextPage",
  76. itemSelector : '.post',
  77. loadingImg : "",
  78. loadingText : " ",
  79. donetext : " ",
  80. extraScrollPx : 0,
  81. bufferPx : 10000,
  82. debug : false,
  83. errorCallback: function() {
  84. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  85. }},
  86. function( newElements ) {
  87. var $newElems = $( newElements );
  88. $newElems.hide();
  89. $newElems.imagesLoaded(function(){
  90. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  91. });
  92. }); $('#entries').show(500);
  93. });
  94. </script>
  95.  
  96. <script language="JavaScript">
  97. function function1(){
  98. window.scrollTo(0,5);
  99. }
  100. function function2(){
  101. window.scroll(0,2);
  102. }
  103. </script>
  104. <!---- end masonry scripts -->
  105.  
  106. <!-- tumblr controls -->
  107. <style>
  108. iframe.tmblr-iframe {
  109.     z-index:99999999999999!important;
  110.     top:0!important;
  111.     right:0!important;
  112.     opacity:0.4;
  113.         filter:invert(1) contrast(150%);
  114.         -webkit-filter:invert(1) contrast(150%);
  115.         -o-filter:invert(1) contrast(150%);
  116.         -moz-filter:invert(1) contrast(150%);
  117.         -ms-filter:invert(1) contrast(150%);
  118.     transform:scale(0.65);
  119.     transform-origin:100% 0;
  120.     -webkit-transform:scale(0.65);
  121.     -webkit-transform-origin:100% 0;
  122.     -o-transform:scale(0.65);
  123.     -o-transform-origin:100% 0;
  124.     -moz-transform:scale(0.65);
  125.     -moz-transform-origin:100% 0;
  126.     -ms-transform:scale(0.65);
  127.     -ms-transform-origin:100% 0;
  128. }
  129. iframe.tmblr-iframe:hover {
  130.     opacity:0.6!important;
  131. }
  132. </style>
  133. <!-- ----------------------------- options ---------------------------- -->
  134.  
  135.  
  136. <!-- Images -->
  137. <meta name="image:Background Image" content="0"/>
  138. <meta name="image:Sidebar Image" content="0"/>
  139.  
  140.  
  141. <!-- Colors -->
  142. <meta name="color:Background" content="#ffffff" />
  143. <meta name="color:Post Background" content="#ffffff" />
  144.  
  145. <meta name="color:Text" content="#5e5e5e" />
  146. <meta name="color:Bold Text" content="#000000" />
  147. <meta name="color:Italic Text" content="#000000" />
  148. <meta name="color:Link" content="#3c3c3c" />
  149. <meta name="color:Link Hover" content="#9b9b9b" />
  150.  
  151.  
  152. <!-- Dropdowns -->
  153. <meta name="select:Font" content="Open Sans" title="Open Sans">
  154. <meta name="select:Font" content="PT Sans" title="PT Sans">
  155.  
  156. <meta name="select:Navigation Style" content="inline" title="In one line">
  157. <meta name="select:Navigation Style" content="block" title="List">
  158.  
  159. <meta name="select:Scroll to Top Button" content="sttbnone" title="None">
  160. <meta name="select:Scroll to Top Button" content="sttbright" title="Bottom Right">
  161. <meta name="select:Scroll to Top Button" content="sttbleft" title="Bottom Left">
  162.  
  163.  
  164. <!-- Options: Basics -->
  165. <meta name="if:Sidebar" content="0"/>
  166. <meta name="if:Pagination in menu" content="0"/>
  167. <meta name="if:Borders" content="1"/>
  168. <meta name="if:Rounded Borders" content="1"/>
  169. <meta name="if:Lazy Load" content="0"/>
  170.  
  171. <meta name="if:--- BACKGROUND ---" content="0"/>
  172. <meta name="if:Fixed Background Image" content="1"/>
  173. <meta name="if:Cover Background Image" content="1"/>
  174. <meta name="if:Repeat Background Image" content="0"/>
  175.  
  176. <meta name="if:--- ENTRIES ---" content="0"/>
  177. <meta name="if:Show Caption" content="0"/>
  178. <meta name="if:Post Background" content="1"/>
  179.  
  180. <meta name="if:--- LINKS ---" content="0"/>
  181. <meta name="if:Show Submit Link" content="0"/>
  182. <meta name="if:Show Archive Link" content="0"/>
  183. <meta name="if:Show Random Link" content="0"/>
  184. <meta name="if:Show Blog Pages" content="1"/>
  185.  
  186.  
  187. <!-- Text -->
  188. <meta name="text:Home Link Text" content="Index"/>
  189. <meta name="text:Ask Link Text" content="Contact"/>
  190. <meta name="text:Ask Link" content="/ask"/>
  191.  
  192. <meta name="text:Link1 Title" content=""/>
  193. <meta name="text:Link1 URL" content="/link1"/>
  194. <meta name="text:Link2 Title" content=""/>
  195. <meta name="text:Link2 URL" content="/link2"/>
  196. <meta name="text:Link3 Title" content=""/>
  197. <meta name="text:Link3 URL" content="/link3"/>
  198. <meta name="text:Link4 Title" content=""/>
  199. <meta name="text:Link4 URL" content="/link4"/>
  200. <meta name="text:Link5 Title" content=""/>
  201. <meta name="text:Link5 URL" content="/link5"/>
  202.  
  203.  
  204.  
  205. <!-- ---------------------- scroll to top button  --------------------- -->
  206.  
  207.  
  208. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  209. <script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  210. <a href="javascript:;" title="scroll to top" id="scrollToTop"
  211. class="{select:Scroll To Top Button}" rel="nofollow">
  212.     <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI4NC45MjkgMjg0LjkyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjg0LjkyOSAyODQuOTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTI4Mi4wODIsMTk1LjI4NUwxNDkuMDI4LDYyLjI0Yy0xLjkwMS0xLjkwMy00LjA4OC0yLjg1Ni02LjU2Mi0yLjg1NnMtNC42NjUsMC45NTMtNi41NjcsMi44NTZMMi44NTYsMTk1LjI4NSAgIEMwLjk1LDE5Ny4xOTEsMCwxOTkuMzc4LDAsMjAxLjg1M2MwLDIuNDc0LDAuOTUzLDQuNjY0LDIuODU2LDYuNTY2bDE0LjI3MiwxNC4yNzFjMS45MDMsMS45MDMsNC4wOTMsMi44NTQsNi41NjcsMi44NTQgICBjMi40NzQsMCw0LjY2NC0wLjk1MSw2LjU2Ny0yLjg1NGwxMTIuMjA0LTExMi4yMDJsMTEyLjIwOCwxMTIuMjA5YzEuOTAyLDEuOTAzLDQuMDkzLDIuODQ4LDYuNTYzLDIuODQ4ICAgYzIuNDc4LDAsNC42NjgtMC45NTEsNi41Ny0yLjg0OGwxNC4yNzQtMTQuMjc3YzEuOTAyLTEuOTAyLDIuODQ3LTQuMDkzLDIuODQ3LTYuNTY2ICAgQzI4NC45MjksMTk5LjM3OCwyODMuOTg0LDE5Ny4xODgsMjgyLjA4MiwxOTUuMjg1eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
  213. </a>
  214.  
  215. <style>
  216.  
  217.     #scrollToTop:link, #scrollToTop:visited {
  218.         word-spacing:-3px;
  219.         display: none;
  220.         position: fixed;
  221.         bottom: 20px;
  222.         opacity: 0.3; /* 0=invisible; 0.5=half; 1=normal */
  223.     }
  224.    
  225.     #scrollToTop img{
  226.         height:16px;
  227.         width:16px;
  228.     }
  229.    
  230.     #scrollToTop:hover {
  231.         opacity:1;
  232.     }
  233.    
  234.     .sttbnone, .sttbnone:hover{
  235.         opacity:0;
  236.         left:-100px;
  237.     }
  238.     .sttbleft{
  239.         left:20px;
  240.         bottom:40px;
  241.     }
  242.     .sttbright{
  243.         right:40px;
  244.         bottom:20px;
  245.     }
  246.  
  247. </style>
  248.  
  249.  
  250. <!-- ------------------------ smooth scroll  ----------------------- -->
  251.  
  252. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  253.  
  254.  
  255. <!-- --------------------------- lazy load ------------------------- -->
  256.  
  257. {block:ifLazyLoad}  
  258. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  259. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  260. <script type="text/javascript" charset="utf-8">
  261.     var $j = jQuery.noConflict();
  262.     $j(function() {
  263.     if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  264.     $j("img").lazyload({
  265.     placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  266.     effect: "fadeIn",
  267.     });
  268.     });
  269. </script>
  270. {/block:ifLazyLoad}  
  271.  
  272.  
  273.  
  274. <!-- --------------------------- tooltips -------------------------- -->
  275.  
  276. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  277. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  278. <script>
  279.     (function($){
  280.     $(document).ready(function(){
  281.     $("a[title]").style_my_tooltips({
  282.     tip_follows_cursor:true,
  283.      
  284.     /* Change your tooltip times here. */
  285.     tip_delay_time:30, /* put a higher number for more delay */
  286.     tip_fade_speed:400, /* put a higher number for a slower fade */
  287.     /* recommended: delay:10-100 fade:200-600 */
  288.      
  289.     attribute:"title"
  290.     });
  291.     });
  292.     })(jQuery);
  293. </script>
  294. <style>
  295.     .tooltip{
  296.         display: inline;
  297.         position: relative;
  298.     }
  299.     #s-m-t-tooltip {
  300.         max-width:300px;
  301.         border-radius: 0px;
  302.         padding:3px 4px 5px 4px;
  303.         margin:20px 7px -2px 20px;
  304.         background-color:#ffffff;
  305.         border:1px solid #E0E0E0;
  306.         border-radius: 5px 5px 5px 5px;
  307.         -moz-border-radius: 5px 5px 5px 5px;
  308.         -webkit-border-radius: 5px 5px 5px 5px;
  309.         font-family:calibri;
  310.         font-size:10px;
  311.         letter-spacing:1px;
  312.         color:#000;
  313.         z-index:999999999999999999999999999999999999;
  314.     }
  315. </style>
  316.  
  317.  
  318.  
  319. <!-- ---------------------------------------------------------------- -->
  320. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  321. <!-- ---------------------------------------------------------------- -->
  322.  
  323.  
  324. <style>
  325.  
  326.  
  327.    
  328.  
  329. /*               basics             */
  330.  
  331. body {
  332.    
  333.     background-color:{color:background};
  334.     color:{color:text};  
  335.     font-family: "{select:Font}", Arial, sans-serif;
  336.     font-size: 13px;
  337.     text-align:justify;
  338.     margin:0;
  339.     line-height:16px;
  340.    
  341.    
  342.     /* background image */
  343.    
  344.     {block:IfBackgroundImage}
  345.     background-image:url({image:Background Image});
  346.     {/block:IfBackgroundImage}
  347.      
  348.     background-repeat: no-repeat;
  349.     {block:IfRepeatBackgroundImage}
  350.     background-repeat: repeat;
  351.     {/block:IfRepeatBackgroundImage}
  352.      
  353.     background-attachment:center;
  354.     {block:IfFixedBackgroundImage}
  355.     background-attachment:fixed;
  356.     {/block:IfFixedBackgroundImage}
  357.    
  358.     {block:IfCoverBackgroundImage}
  359.     background-size:cover;
  360.     {/block:IfCoverBackgroundImage}
  361.  
  362. }
  363.  
  364. pre {
  365.     white-space: pre-wrap;
  366.     white-space: -moz-pre-wrap;
  367.     white-space: -pre-wrap;
  368.     white-space: -o-pre-wrap;
  369.     word-wrap: break-word;
  370. }
  371.  
  372. blockquote{
  373.    border-left:1px solid #d3d3d3;
  374.    padding-left:10px;
  375.    margin-left:10px;
  376. }
  377.    
  378. ::selection {
  379.   background: #CACACA;
  380.   color: #ffffff;
  381. }
  382. ::-moz-selection {
  383.   background: #CACACA;
  384.   color: #ffffff;
  385. }
  386.  
  387. hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
  388.  
  389. b, strong {
  390.     color:{color:bold text};
  391. }
  392.  
  393. i, em {
  394.     color:{color:italic text};
  395. }
  396.  
  397. a, a:visited, a:link, a:active {
  398.     color:{color:link};
  399.     text-decoration:none;
  400. }
  401.  
  402. a:hover {
  403.     color:{color:link hover};
  404. }
  405.  
  406. img{
  407.     opacity:1;
  408.     border:none;
  409.     text-decoration:none;
  410. }
  411.  
  412. h1, h2, h3, h4, h5, h6{
  413.     margin:0;
  414.     font-family: {select:Font};
  415.     color:{color:Link};
  416. }
  417.  
  418. h1 {
  419.     font-size:18px;
  420. }
  421.  
  422. h2 {
  423.     font-size:17px;
  424. }
  425.  
  426. h3 {
  427.     font-size:16px;
  428. }
  429.  
  430. h4, h5, h6 {
  431.     font-size:15px;
  432. }
  433.  
  434. small {
  435. font-size:9px;}
  436.  
  437. big {
  438. font-size:12px;}
  439.  
  440. ul li:before {
  441.   content: '\00BB';
  442.   margin:0 5px;
  443. }
  444.  
  445. ol{
  446.    list-style-type: decimal-leading-zero;
  447. }
  448.  
  449. ul{
  450.    list-style: none;
  451.    padding-left:20px;
  452. }
  453.  
  454. a, a:focus {   outline: 0; }
  455.  
  456.  
  457.  
  458.  
  459. /*              sidebar             */
  460.  
  461.  
  462. #sidebar {
  463.     text-align:left;
  464.     position:fixed;
  465.     padding:10px;
  466.    
  467.     {block:IfSidebar}
  468.     left:50px;
  469.     margin-top:100px;
  470.     width:400px;
  471.     {/block:IfSidebar}
  472.    
  473.     {block:IfNotSidebar}
  474.     margin-top:-200px;
  475.     background-color:{color:Background};
  476.     width:542px;
  477.     padding-bottom:30px;
  478.     padding-top:30px;
  479.    
  480.     border-bottom: 0px solid #fff;
  481.     {block:IfBorders}
  482.     border-bottom: 1px solid #ededed;
  483.     {/block:IfBorders}
  484.    
  485.     z-index:999999999;
  486.     {/block:IfNotSidebar}
  487. }
  488.  
  489.  
  490. #sidebarim {
  491.     margin-bottom:20px;
  492. }
  493.  
  494. #sidebarim img {
  495.     width:125px;
  496. }
  497.  
  498. #blogt {
  499.     font-size:25px;
  500.     font-weight:bold;
  501.     text-transform:lowercase;
  502. }
  503.  
  504. a#blogt, a#blogt:link, a#blogt:visited, a#blogt:active,
  505. a#blogt:hover {
  506.     color:{color:Link};
  507. }
  508.  
  509. #links {
  510.     line-height:16px;
  511.     text-transform:lowercase;
  512. }
  513.  
  514. #links a {
  515.     font-size:18px;
  516.     margin-right:5px;
  517.     margin-bottom:5px;
  518. }
  519.  
  520. .block a{
  521.     display: block;
  522. }
  523. .inline a{
  524.     display: inline-block;
  525.     margin-right:5px;
  526. }
  527.    
  528.  
  529. #description {
  530.     font-size:14px;
  531.     margin:20px 0;
  532.     text-align:justify;
  533. }
  534.  
  535. .pagination {
  536.     margin:50px 0;
  537.     text-transform:lowercase;
  538. }
  539.  
  540. #sidebar .pagination {
  541.     margin:0;
  542. }
  543.  
  544. #entries .pagination {
  545.     font-size:18px;
  546.     width:100%;
  547.     text-align:center;
  548.     display:inline-block;
  549.     padding:30px;
  550.     margin-top:-50px;
  551. }
  552.  
  553.  
  554. .pagination a {
  555.     padding:0;
  556. }
  557.  
  558.  
  559.  
  560.  
  561. #con {
  562.    
  563.     padding-bottom:50px;
  564.    
  565.     {block:IfNotSidebar}
  566.     margin:0 auto;
  567.     width:50%;
  568.     {/block:IfNotSidebar}
  569.     {block:IfSidebar}
  570.     right:15%;
  571.     position:absolute;
  572.     {/block:IfSidebar}
  573. }
  574.  
  575.  
  576.  
  577.  
  578. /*            content / posts           */
  579.  
  580.  
  581.  
  582. #entries {
  583.    
  584.     width:500px;
  585.     {block:IfNotSidebar}
  586.     margin-top:200px;
  587.     {/block:IfNotSidebar}
  588.     {block:IfSidebar}
  589.     margin-top:75px;
  590.     {/block:IfSidebar}
  591. }
  592.  
  593.  
  594.  
  595. .post {
  596.     float:left;
  597.     width:500px;
  598.     padding:30px;
  599.     margin-bottom:75px;
  600.    
  601.     {block:PermalinkPage}
  602.     margin-bottom:25px;
  603.     {/block:PermalinkPage}
  604.    
  605.     border: 0px solid #fff;
  606.     {block:IfBorders}
  607.     border: 1px solid #ededed;
  608.     {/block:IfBorders}
  609.        
  610.     {block:IfRoundedBorders}
  611.     border-radius: 5px 5px 5px 5px;
  612.     -moz-border-radius: 5px 5px 5px 5px;
  613.     -webkit-border-radius: 5px 5px 5px 5px;
  614.     {/block:IfRoundedBorders}
  615.              
  616.     {block:IfPostBackground}
  617.     background-color:{color:Post Background};
  618.     {/block:IfPostBackground}
  619. }
  620.  
  621. .post a {
  622.     padding-bottom:2px;
  623.     border-bottom:1px solid {color:Link};
  624. }
  625. .post a:hover {
  626.     border-bottom:1px solid {color:Link Hover};
  627. }
  628.  
  629. .post img a, .post img a:hover {
  630.     padding-bottom:0;
  631.     border-bottom:0;
  632. }
  633.  
  634.  
  635.  
  636.  
  637. .post img, .post li, .post blockquote {max-width: 100%;}
  638. .caption {
  639.     width:100%;
  640.     margin-top:10px;
  641. }
  642.  
  643. #title {
  644.     font-size:18px;
  645.     color:{color:Link};
  646.     line-height:120%;
  647.     margin-bottom:10px;
  648.     text-transform:lowercase;
  649.     font-weight:bold;
  650.     text-align:left;
  651. }
  652.  
  653.  
  654. /*quote*/
  655.  
  656. #titlequote{text-align:left;
  657. font-size:14px;
  658. line-height:18px;
  659. font-weight:bold;
  660. }
  661. #source {
  662. margin-top:15px;
  663. margin-left:15px;}
  664.  
  665. /*audio*/
  666.  
  667. .player {
  668. width:25px;
  669. height:25px;
  670. overflow:hidden;
  671. position:absolute;
  672. background:white;}
  673.  
  674. .audioinfo {
  675. margin-left:50px;
  676. }
  677.  
  678.  
  679. /*asks*/
  680. .q {margin-bottom:10px;
  681. }
  682. .as {
  683. font-weight:bold;}
  684. .as a {
  685.     padding-bottom:0;
  686.     border-bottom:0;
  687. }
  688. .a {
  689. margin-top:10px;
  690. }
  691.  
  692.  
  693. /*chat*/
  694.  
  695. .chat ol {
  696. padding:0;
  697. list-style:none;
  698. }
  699. .line {padding:5px 0;}
  700.  
  701. .label {font-weight:bold;
  702. }
  703.  
  704. /*video*/
  705. .tumblr_video_container {
  706.      max-height:540px!important;
  707.      /*overflow:hidden!important;*/
  708. }
  709.  
  710.  
  711.  
  712. #permalink {
  713.     margin-top:15px;
  714.     font-size:12px;
  715. }
  716.  
  717. #permalink a {
  718.     padding-bottom:0;
  719.     border-bottom:0;
  720.     cursor:pointer;
  721.     text-transform:lowercase;
  722.     padding-top:10px;
  723. }
  724.  
  725. #date {
  726.     margin-right:10px;
  727.     font-size:20px;
  728.     text-align:center;
  729.     display:inline-block;
  730.     width:100%;
  731.     margin-top:20px;
  732.    
  733. }
  734.  
  735. .tags {
  736.     word-break:break-all;
  737. }
  738.  
  739. .pagenotes {
  740.     {block:IndexPage}
  741.     display: none!important;
  742.     {/block:IndexPage}
  743.     width:400px;
  744.     text-align:left;
  745.     font-size:10px;
  746. }
  747.  
  748. .pagenotes img {
  749.     display:none!important;
  750. }
  751.  
  752. .pagenotes li {
  753.     padding:1px 0px;
  754.     text-align:left;
  755.     margin:0 0 0 -20px;
  756. }
  757.  
  758. div.retags, .note div.retags {
  759.     font-size:8px;
  760.     margin-bottom:0px;
  761. }
  762.  
  763.  
  764.  
  765. /*  like and reblog buttons  */
  766.  
  767. svg {
  768.    width:10px;
  769.    height:auto;
  770.    opacity:.5;
  771.    padding:1px;
  772.    display:block;
  773.    overflow:visible;
  774. }
  775. .controls {
  776.     padding-bottom:0px;
  777.     margin-bottom:0px;
  778. }
  779. .controls a {
  780.    position:relative;
  781.    display:inline-block;
  782.    overflow:hidden;
  783.    padding-bottom:0px;
  784.    width:12px;
  785.    height:12px;
  786.    margin-top:-10px;
  787. }
  788. .controls .reblog {
  789.    opacity:.93;
  790. }
  791. .controls .reblog svg {
  792.    width:9px;
  793.    margin-top:1px;
  794. }
  795. .controls .like .liked + svg {
  796.    opacity:1;
  797. }
  798. .controls .like .liked + svg path {
  799.    fill:#ec5a5a;
  800. }
  801. .controls .like .like_button {
  802.    position:relative;
  803. }
  804. .controls .like .like_button iframe {
  805.    position:absolute;
  806.    top:0;
  807.    left:0;
  808.    bottom:0;
  809.    right:0;
  810.    z-index:2;
  811.    opacity:0;
  812. }
  813.  
  814. /*          more          */
  815.  
  816. /* pastecsshere */
  817.  
  818. {CustomCSS}
  819.  
  820. </style>
  821. </head>
  822. <body>
  823.  
  824. <!-- ---------------------------------------------------------------- -->
  825. <!-- ----------------------- H T M L - S T A R T -------------------- -->
  826. <!-- ---------------------------------------------------------------- -->
  827. <!-- pastehtmlhere -->
  828.  
  829.  
  830. <div id="con">
  831.  
  832.  
  833. <!-- ----------------------------- sidebar --------------------------- -->
  834.  
  835.  
  836. <div id="sidebar" >
  837.  
  838. {block:IfSidebarImage}
  839. <div id="sidebarim"><img src="{image:Sidebar Image}"></div>
  840. {/block:IfSidebarImage}
  841.  
  842. <a href="/" id="blogt">{Title}</a>
  843. <div id="description">{Description}</div>
  844.  
  845.  
  846. <!--       navigation     -->
  847.  
  848. <div id="links" class="{select:Navigation Style}">
  849.  
  850. <a href="/">{text:Home Link Text}.</a>
  851.  
  852. {block:AskEnabled}
  853. <a href="{text:Ask Link}">{text:Ask Link Text}.</a>
  854. {/block:AskEnabled}
  855.  
  856. {block:SubmissionsEnabled}{block:IfShowSubmitLink}
  857. <a href="/submit">Submit.</a>
  858. {/block:IfShowSubmitLink}{/block:SubmissionsEnabled}
  859.  
  860. {block:IfLink1Title}<a href="{text:Link1 URL}">{text:Link1 Title}.</a>{/block:IfLink1Title}
  861. {block:IfLink2Title}<a href="{text:Link2 URL}">{text:Link2 Title}.</a>{/block:IfLink2Title}
  862. {block:IfLink3Title}<a href="{text:Link3 URL}">{text:Link3 Title}.</a>{/block:IfLink3Title}
  863. {block:IfLink4Title}<a href="{text:Link4 URL}">{text:Link4 Title}.</a>{/block:IfLink4Title}
  864. {block:IfLink5Title}<a href="{text:Link5 URL}">{text:Link5 Title}.</a>{/block:IfLink5Title}
  865.  
  866. {block:IfShowBlogPages}{block:HasPages}
  867. {block:Pages}<a href="{URL}">{Label}.</a>{/block:Pages}
  868. {/block:HasPages}{/block:IfShowBlogPages}
  869.  
  870. {block:IfShowRandomLink}
  871. <a href="/random">Random.</a>
  872. {/block:IfShowRandomLink}
  873. {block:IfShowArchiveLink}
  874. <a href="/archive">Archive.</a>
  875. {/block:IfShowArchiveLink}
  876.  
  877.  
  878. <!--     pagination     -->
  879.  
  880. {block:IfPaginationInMenu}
  881. <span class="pagination">
  882. {block:Pagination}
  883. {block:PreviousPage}
  884. <a href="{PreviousPage}">previous. </a>
  885. {/block:PreviousPage}
  886.  
  887.  
  888. {block:NextPage}
  889. <a href="{NextPage}">next.</a>
  890. {/block:NextPage}
  891. {/block:Pagination}
  892. </span>
  893. {/block:IfPaginationInMenu}
  894.  
  895. </div>
  896.  
  897.  
  898.  
  899.  
  900.  
  901.  
  902.  
  903.  
  904.  
  905. </div>
  906.  
  907.  
  908.  
  909.  
  910.  
  911. <!-- ----------------------------- content --------------------------- -->
  912.  
  913.  
  914. <div id="entries">
  915.  
  916. {block:Posts}
  917.  
  918. <div class="post" id="{PostID}">
  919.  
  920.  
  921. {block:Quote}
  922. <div id="titlequote">“{Quote}”</div>
  923. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  924. {/block:Quote}
  925.  
  926. {block:Text}
  927.  
  928. {block:Title}
  929. <div id="title">{Title}</div>{/block:Title}
  930. {Body}
  931. {/block:Text}
  932.  
  933. {block:Link}
  934. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  935. {/block:Link}
  936.  
  937. {block:Chat}
  938. {block:Title}
  939. <h1>{Title}</h1>
  940. {/block:Title}
  941. <div class="chat">
  942. <ol>{block:Lines}
  943. <li class="line {Alt}">
  944. {block:Label}
  945. <span class="label">
  946. {Label}</span>
  947. {/block:Label}{Line}</li>
  948. {/block:Lines}
  949. </ol></div>
  950. {/block:Chat}
  951.  
  952. {block:Photo}
  953. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  954. {/block:Photo}
  955.  
  956. {block:Photoset}{Photoset-500}{/block:Photoset}
  957.  
  958. {block:Video}{Video-500}{/block:Video}
  959.  
  960. {block:Audio}
  961. <div class="player">{AudioPlayerWhite}</div>
  962. <div class="audioinfo">
  963. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
  964. </div>
  965. {/block:Audio}
  966.  
  967. {block:Answer}
  968. <div class="q">
  969. <div class="as">{Asker} said: </div>
  970. <blockquote>{Question}</blockquote></div>
  971. <div class="a">{Answer}</div>
  972. {/block:Answer}
  973.  
  974.  
  975.  
  976. <!--      caption      -->
  977. {block:IfShowCaption}
  978. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  979. {/block:IfShowCaption}
  980.  
  981.  
  982.  
  983. <!--      post infos      -->
  984. <script type="text/javascript">
  985.     jQuery(document).ready(function() {
  986.        
  987.     jQuery(".sub").hide();
  988.     //toggle the componenet with class msg_body
  989.     jQuery(".opensub").click(function(){
  990.         jQuery(".sub").slideToggle(500);
  991.     });
  992.        
  993.     });
  994. </script>
  995.  
  996.  
  997. {block:Date}
  998. <div id="permalink">
  999.  
  1000. <div style="border-top:1px solid #ededed;"></div>
  1001.  
  1002. <a id="date" {block:IndexPage}href="{Permalink}"{/block:IndexPage}
  1003. {block:PermalinkPage}{block:PostNotes}
  1004. class="opensub" style="cursor:help;"
  1005. {/block:PostNotes}{/block:PermalinkPage}>
  1006. {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}
  1007. </a>
  1008.  
  1009.  
  1010. <div class="sub">
  1011.  
  1012. {block:NoteCount}
  1013. <a class="opensub2" style="cursor:help;">
  1014. {NoteCount} notes</a>
  1015. {/block:NoteCount}
  1016.  
  1017. {block:RebloggedFrom}
  1018. <a href="{ReblogParentURL}" title="{ReblogParentName}">(via)</a>
  1019. {block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">(source)</a> {/block:ContentSource}
  1020. {/block:RebloggedFrom}
  1021.  
  1022. {block:HasTags}<div class="tags">
  1023. {block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}
  1024. </div>{/block:HasTags}
  1025.  
  1026.  
  1027. <script type="text/javascript">
  1028.     jQuery(document).ready(function() {
  1029.        
  1030.     jQuery(".sub2").hide();
  1031.     //toggle the componenet with class msg_body
  1032.     jQuery(".opensub2").click(function(){
  1033.         jQuery(".sub2").slideToggle(500);
  1034.     });
  1035.        
  1036.     });
  1037. </script>
  1038. {block:PostNotes}
  1039. <div class="pagenotes sub2">
  1040.     {PostNotes}
  1041. </div>
  1042. {/block:PostNotes}
  1043.  
  1044.  
  1045. </div>
  1046.  
  1047. </div>
  1048. {/block:Date}
  1049.  
  1050.  
  1051.  
  1052. </div>
  1053.  
  1054.  
  1055.  
  1056.  
  1057.  
  1058. {/block:Posts}
  1059.  
  1060.  
  1061. {block:IfNotPaginationInMenu}
  1062. <span class="pagination" style="font-size:18px;margin-bottom:20px">
  1063. {block:Pagination}
  1064. {block:PreviousPage}
  1065. <a href="{PreviousPage}">previous. </a>
  1066. {/block:PreviousPage}
  1067.  
  1068.  
  1069. {block:NextPage}
  1070. <a href="{NextPage}">next.</a>
  1071. {/block:NextPage}
  1072. {/block:Pagination}
  1073. </span>
  1074. {/block:IfNotPaginationInMenu}
  1075.  
  1076. </div>
  1077.  
  1078. </div>
  1079.  
  1080.  
  1081. {block:ContentSource}
  1082. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1083. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1084. {/block:SourceLogo}
  1085. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1086. {/block:ContentSource}
  1087.  
  1088.  
  1089.  
  1090.  
  1091. <!-- credit link. you may move but not remove. -->
  1092. <div style="position:fixed;bottom:10px;left:15px;font-size:12px;opacity:0.5;"><a href="http://cloudythms.tumblr.com/" title="theme by cloudythms"
  1093. style="text-decoration:none;">☁</a></div>
  1094.  
  1095.  
  1096.  
  1097. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!