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

Theme 15

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