Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Theme no.4 (Twins)

By: bakerrstreet on Jun 14th, 2012  |  syntax: None  |  size: 16.57 KB  |  hits: 1,871  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.  
  10.  
  11.         <!--CUSTOMIZABLE-->
  12.         <meta name="color:background" content="#fbfbfb"/>
  13.         <meta name="color:post" content="#f1f0f0"/>
  14.         <meta name="color:sidebar" content="#f1f0f0"/>
  15.         <meta name="color:description" content="#f8f8f8"/>
  16.         <meta name="color:text" content="#adadad"/>
  17.         <meta name="color:tags" content="#b49999"/>
  18.         <meta name="color:tags bg" content="#fafafa"/>
  19.         <meta name="color:main title" content="#fec122"/>
  20.         <meta name="color:title" content="#000000"/>
  21.         <meta name="color:links" content="#070707"/>
  22.         <meta name="color:links hover" content="#000000"/>
  23.         <meta name="color:sidelinks" content="#faf5f5"/>
  24.         <meta name="color:border" content="#fec122"/>
  25.         <meta name="color:link1" content="#3ffda6"/>
  26.         <meta name="color:link2" content="#5fc4d3"/>
  27.         <meta name="color:link3" content="#cbea1c"/>
  28.         <meta name="color:link4" content="#df7aac"/>
  29.         <meta name="color:link5" content="#e99511"/>
  30.         <meta name="color:scrollbar" content="#f0c9b8"/>
  31.         <meta name="color:scrollbg" content="#ebe5cf"/>
  32.         <!--image-->
  33.         <meta name="image:background" content=""/>
  34.         <meta name="image:sideimage1" content=""/>
  35.         <meta name="image:sideimage2" content=""/>
  36.         <!--text-->
  37.         <meta name="text:Link1 Url" content="" />
  38.         <meta name="text:Link1 Title" content="" />
  39.         <meta name="text:Link2 Url" content="" />
  40.         <meta name="text:Link2 Title" content="" />
  41.         <meta name="text:Link3 Url" content="" />
  42.         <meta name="text:Link3 Title" content="" />
  43.  
  44. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day">
  45. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Fredericka+the+Great">
  46. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Gloria+Hallelujah">
  47.  
  48. <style type="text/css">
  49. ::-webkit-scrollbar {width: 10px; height:auto; background:{color:scrollbg}}
  50. ::-webkit-scrollbar-corner {background:{color:scrollbg}}
  51. ::-webkit-scrollbar-button:vertical {height:4px; display: block; background:{color:scrollbar}}
  52. ::-webkit-scrollbar-button:horizontal {width: 7px; height: 4px; display: block; background:{color:scrollbar}}
  53. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar}; border-top: 1px solid {color:scrollbg}; border-bottom: 1px solid {color:scrollbg}}
  54. ::-webkit-scrollbar-thumb:horizontal {background: {color:scrollbg}; border: 0px solid {color:scrollbg}}
  55. ::-webkit-scrollbar-thumb {background: {color:scrollbar}; border-top: 0pt solid {color:scrollbg}; border-bottom: 0pt solid {color:scrollbg}}
  56. ::-webkit-scrollbar-thumb:hover {background: {color:scrollbar}; cursor:url(http://i53.tinypic.com/zycxmw.png), auto}
  57. ::-webkit-scrollbar-track-piece {background: {color:scrollbg}; border-top: 1pt solid {color:scrollbg}; border-bottom: 1pt solid {color:scrollbg}; width:4pt;}
  58.  
  59.  
  60. body {
  61.     font-family: calibri;
  62.     font-size:10px;
  63.     color: {color:text};
  64.     background-color:{color:background};
  65.     background-image:url({image:Background});
  66.     background-position:center top;
  67.     background-repeat: repeat;
  68.     background-attachment:fixed;
  69.     }
  70.    
  71. a, a:active, a:visited{color:{color:links}; text-decoration: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  72. a:hover { color:{color:links hover};-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;}
  73. blockquote{padding:0px 5px 0px 10px; margin:0px; border-left:2px solid {color:border};}
  74. blockquote img{display:block; max-width:250px;}
  75. blockquote blockquote{position:relative; left:6px; margin:-5px; padding:0px 5px 0px 10px}
  76.  
  77.  
  78. #entry {
  79.     width:500px;
  80.     left:500px;
  81.     position:absolute;
  82.     top: 20px;
  83.         font-style:
  84. }
  85.  
  86. #post {
  87.         line-height:9px;
  88.         width:500px;
  89.         padding:10px;
  90.         margin-bottom:-2px;
  91.         text-align:justify;
  92.         background-color:{color:post};
  93.         border-bottom: 2px solid {color:link2};
  94. }
  95.  
  96. #notes {
  97.     color:{color:tags};
  98.     text-align:center;
  99.     font-size:8px;
  100.     width:80px;
  101.         height:auto;
  102.         position:absolute;
  103.         right:-200px;
  104.         padding:10px;
  105.         font-family: 'Gloria Hallelujah';
  106.     opacity:0;
  107.     transition: all 0.8s ease-in-out 0s; -webkit-transition: all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out 0s; -o-transition: all 0.8s ease-in-out 0s; box-transition: all 0.8s ease-in-out 0s;
  108.         background-color:{color:tags bg};
  109. }
  110.  
  111. #notes a {color:{color:tags};}
  112.  
  113. #post:hover #notes {opacity:1; right:-120px; transition: all 0.8s ease-in-out 0s; -webkit-transition: all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out 0s; -o-transition: all 0.8s ease-in-out 0s; box-transition: all 0.8s ease-in-out 0s;}
  114.  
  115. #tags {
  116.     color:{color:tags};
  117.         border-top: 2px dashed {color:border};
  118.     width:500px;
  119.     height:auto;
  120.     padding:5px 10px;
  121.     font-size:8px;
  122.     line-height:9px;
  123.     margin-bottom:20px;
  124.     }
  125.  
  126. #tags a {color:{color:tags}; background-color:{color:tags bg}; padding:2px 5px;}
  127.  
  128.  
  129. #post .title {
  130.         text-align:center;
  131.         letter-spacing: 2;
  132.         color: {color:title};
  133.         font-size: 25px;
  134.         line-height: 18px;
  135.         font-family: 'bebas';
  136.         text-shadow: 1px 1px 2px #e7e5e3;}
  137.  
  138. #post .quote {
  139.         color: {color:title};
  140.         text-align:center;
  141.         text-transform:lowercase;
  142.         font-family:'Dawning of a New Day';
  143.         font-size:30px;
  144.         line-height: 1;
  145. }
  146.  
  147. #post .audio img {
  148.         border: 5px solid {color:border};
  149.         border-radius: 20px 2px 20px 2px;
  150.     -moz-border-radius: 20px 2px 2px 20px;}
  151.  
  152. #sidebar {
  153.         width:400px;
  154.         height:300px;
  155.         position:fixed;
  156.         left: 50px;
  157.         top:25%;
  158.         padding:0px;
  159. }
  160.  
  161. #sidebar .sideimage1 {
  162.         position:relative;
  163.         width: 420px;
  164.         height:150px;
  165.         top: 0px;
  166.         padding:0px;
  167.         border-bottom: 10px solid {color:border};
  168.         z-index:9999; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;
  169. }
  170.  
  171. #sidebar .sideimage2 {
  172.         position:relative;
  173.         width: 420px;
  174.         height:150px;
  175.         bottom: 0px;
  176.         padding:0px;
  177.         border-top: 10px solid {color:border};
  178.         z-index:9999; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;
  179. }
  180.  
  181. #sidebar:hover .sideimage1 {top:-100px; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  182. #sidebar:hover .sideimage2 {bottom:-100px; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  183.        
  184.  
  185. #description {
  186.         position: absolute;
  187.         top:50px;
  188.         width: 400px;
  189.         height: 200px;
  190.         background-color:{color:sidebar};
  191.         padding: 15px 10px 0px 10px;
  192.         z-index:999;
  193. }
  194.  
  195. #description .title {
  196.         font-size:40px;
  197.         font-family:'Dawning of a New Day';
  198.         z-index:999;
  199.         text-align:center;
  200.         letter-spacing: 2;
  201.         line-height: 18px;
  202. }
  203.  
  204. #description .title a{
  205.         color:{color:main title};}
  206.  
  207. #description .desc {
  208.         width: 250px;
  209.         font-size:10px;
  210.     line-height:11px;
  211.     background-color:{color:description};
  212.     border-radius: 10px;
  213.     -moz-border-radius: 10px;
  214.         padding:10px;
  215.         position:relative;
  216.         top:10px;
  217.         left:10px;
  218.         margin-bottom:20px;
  219.         z-index: 99;}
  220.        
  221. #description .link {
  222.     width:25px;
  223.         font-size:9px;
  224.         color:{color:sidelinks};
  225.         opacity:0; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s;                  box-transition: all 0.7s ease-in-out 0s;
  226. }
  227.  
  228. #description .link1 {text-align:center; width:25px; padding-top:20px; height:10px; position:absolute; right:100px; bottom:0px; background-color: {color:link1}; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  229. #description .link1:hover {height: 45px;        transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  230. #description .link1:hover .link{opacity:1;  transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  231.  
  232. #description .link2 {text-align:center; width:25px; padding-top:20px; height:65px; position:absolute; right:75px; bottom:0px; background-color: {color:link2}; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  233. #description .link2:hover {height: 95px;        transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  234. #description .link2:hover .link{opacity:1;  transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  235.  
  236. #description .link3 {text-align:center; width:25px; padding-top:20px; height:40px; position:absolute; right:50px; bottom:0px; background-color: {color:link3}; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  237. #description .link3:hover {height: 70px;        transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  238. #description .link3:hover .link{opacity:1;  transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  239.  
  240. #description .link4 {text-align:center; width:25px; padding-top:20px; height:25px; position:absolute; right:25px; bottom:0px; background-color: {color:link4}; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  241. #description .link4:hover {height: 55px;        transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  242. #description .link4:hover .link{opacity:1;  transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  243.  
  244. #description .link5 {text-align:center;width:25px; padding-top:20px; height:55px; position:absolute; right:0px; bottom:0px; background-color: {color:link5}; transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  245. #description .link5:hover {height: 85px;        transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  246. #description .link5:hover .link{opacity:1;  transition: all 0.7s ease-in-out 0s; -webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; box-transition: all 0.7s ease-in-out 0s;}
  247.  
  248. .askbox {
  249.         width:490px;
  250.         height:auto;
  251.         padding:10px 5px;
  252.         position:relative;
  253.         background-color:{color:tags bg};
  254. }
  255.  
  256. .audio img {
  257. width: 40px;
  258. height: 40px;
  259. float: left;
  260. margin-right: 5px;
  261. }
  262.  
  263. .player {
  264. background-color: #fff;
  265. height: 27px;
  266. margin-left: 45px;
  267. }
  268.  
  269. #navigation {
  270.     width:auto;
  271.         height:auto;
  272.         position:fixed;
  273.         bottom: 20px;
  274.         left: 250px;
  275.     font-size:18px;
  276. }
  277.  
  278. @font-face {
  279. font-family: "bebas";
  280. src: url('http://static.tumblr.com/rmj06l2/N0vlwxkt8/bebaslp.otf');
  281. }
  282.  
  283. </style>
  284. </head>
  285. <body>
  286. <div id="sidebar">
  287. <div class="sideimage1"><img src="{image:sideimage1}"></div>
  288.         <div id="description">
  289.         <div class="title"> <a href="/">{Title}</a> </div>
  290.         <div class="desc"> {block:Description}{Description}{/block:Description}</div>
  291.         <div class="link1"><a href="/" class="link">home</a></div>
  292.         <div class="link2"><a href="/ask" class="link">ask</a></div>
  293.         <div class="link3"><a href="{text:Link1 Url}" class="link">{text:Link1 Title}</a></div>
  294.         <div class="link4"><a href="{text:Link2 Url}" class="link">{text:Link2 Title}</a></div>
  295.         <div class="link5"><a href="{text:Link3 Url}" class="link">{text:Link3 Title}</a></div>
  296.      </div>
  297. <div class="sideimage2"><img src="{image:sideimage2}"></div>
  298. </div>
  299.  
  300. <div id="navigation">    
  301.     {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  302.     {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}
  303. </div>
  304.  
  305. <div id="entry">
  306. {block:Posts}
  307. <div id="post">
  308.  
  309.        
  310.         <div id="notes">
  311.     <a href="{Permalink}" style="font-size:14px; font-family:'bebas';">{NoteCountWithLabel}</a><br>
  312.     {block:RebloggedFrom}<a href="{ReblogParentURL}">from</a>  |  {/block:RebloggedFrom}{block:ContentSource}<a href="{SourceURL}">originally</a>{/block:ContentSource}
  313.     </div>
  314.  
  315.    <!--TITLE-->
  316.     {block:Title}<div class="title">{Title}</div>{/block:Title}
  317.     {block:Text}{Body}{/block:Text}
  318.          
  319.     <!--QUOTE-->
  320.     {block:Quote}<div class="quote">"{Quote}"</div>{/block:Quote}
  321.     {block:Source}<div style="text-align:right; font-stlye:italic;">— {Source}</div>{/block:Source}
  322.      
  323.     <!--LINK-->
  324.     {block:Link}<a href="{URL}" class="title">{Target}{Name}&nbsp;</a>
  325.     {block:Description}{Description}{/block:Description}{/block:Link}
  326.            
  327.     <!--PHOTO-->
  328.     {block:Photo}
  329.         <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  330.     {block:Caption}{Caption}{/block:Caption}
  331.     {/block:Photo}
  332.    
  333.         <!--PHOTOSETS-->
  334.     {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  335.    
  336.     <!--CHAT-->  
  337.     {block:Chat}
  338.     {block:Title}{Title}{/block:Title}
  339.     {block:Lines}
  340.     {block:Label}<b>{Label}</b>{/block:Label}
  341.     {Line}<br />
  342.     {/block:Lines}<br />
  343.     {/block:Chat}
  344.    
  345.     <!--VIDEO-->
  346.     {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  347.    
  348.     <!--AUDIO-->
  349.     {block:Audio}
  350.     {block:AlbumArt}
  351.     <div class="audio"><img src="{AlbumArtURL}" alt=""></div>
  352.     {/block:AlbumArt}
  353.     <div class="player">{AudioPlayer}</div>
  354.     {block:TrackName}{TrackName} - {/block:TrackName}{block:Artist}<i>{Artist}</i> | {/block:Artist}<b>{FormattedPlayCount}</b> plays
  355.     {block:IfShowCaptions}{block:Caption}<br />{Caption}{/block:Caption}{/block:IfShowCaptions}
  356.     {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<br />
  357.     {Caption}
  358.     {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  359.     {/block:Audio}
  360.    
  361.     <!--ANSWER-->
  362.     {block:Answer}<div class="askbox">
  363.     <b><div style="font-family:'bebas'; font-size:16px; display:inline;">{Asker} asked:</div></b>   {Question}</div>
  364.     {Answer}
  365.     {/block:answer}
  366.  
  367.     </div>
  368.     <div id="tags">{block:HasTags}tags:&nbsp; {block:Tags}<a href="{TagUrl}">#{Tag}</a>&nbsp; {/block:Tags}{/block:HasTags}</div>
  369.         {block:PermalinkPage}{block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}
  370.     {/block:Posts}
  371.    </div>  
  372.        
  373.     </div>
  374.    
  375.     <div style="position:fixed; bottom:5px; left:5px; font-size:10px; font-family:'Gloria Hallelujah'; text-algin:center; line-height:9px"><a href="http://bakerrstreet.tumblr.com/">theme by:<br>Shaira</a></div>
  376.  
  377. </body>
  378. </html>
create a new version of this paste RAW Paste Data