Advertisement
bakerrstreet

Theme no.3 (Star Spangled)

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