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

Theme no.2 (Sweet Reactor)

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