Advertisement
hellmouths

THEME #005: STRAWBERRY SWING

Jul 17th, 2012
5,063
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.54 KB | None | 0 0
  1. <!--
  2.  
  3. THEME #005: STRAWBERRY
  4. by hellmouths.tumblr.com
  5.  
  6. · DON'T REDISTRIBUTE
  7. · DON'T USE AS BASE
  8. · DON'T REMOVE CREDIT
  9.  
  10. Contact me if there are any complications.
  11. -->
  12.  
  13. <html>
  14. <head>
  15.  
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}"/>
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description} <meta name="description" content="{MetaDescription}"/> {/block:Description}
  20.  
  21. <meta name="color:bg" content="#ffffff" />
  22. <meta name="color:text" content="#ccbfba" />
  23. <meta name="color:link" content="#c38f84" />
  24. <meta name="color:hover" content="#a4d2d5" />
  25. <meta name="color:posts" content="#ffffff" />
  26. <meta name="color:info" content="#ffffff" />
  27. <meta name="color:info border" content="#f7f2f2" />
  28. <meta name="color:info link" content="#dbd4d1" />
  29. <meta name="color:tags" content="#ccbfba" />
  30. <meta name="color:blockquote border" content="#e0d9d1" />
  31. <meta name="color:stext" content="#ffffff" />
  32. <meta name="color:page" content="#fff9f7" />
  33. <meta name="color:pagea" content="#d6ada4" />
  34. <meta name="color:slinks a" content="#ffffff" />
  35. <meta name="color:slinks hover" content="#c38f84" />
  36. <meta name="color:shadow" content="#c4a087" />
  37. <meta name="color:shadow2" content="#f2d9cf" />
  38. <meta name="color:stexta" content="#c08275" />
  39.  
  40. <meta name="text:link1" content="">
  41. <meta name="text:link1 url" content="">
  42. <meta name="text:link2" content="">
  43. <meta name="text:link2 url" content="">
  44. <meta name="text:link3" content="">
  45. <meta name="text:link3 url" content="">
  46. <meta name="text:link4" content="">
  47. <meta name="text:link4 url" content="">
  48. <meta name="text:link5" content="">
  49. <meta name="text:link5 url" content="">
  50. <meta name="text:link6" content="">
  51. <meta name="text:link6 url" content="">
  52. <meta name="text:link7" content="">
  53. <meta name="text:link7 url" content="">
  54. <meta name="text:link8" content="">
  55. <meta name="text:link8 url" content="">
  56.  
  57. <meta name="image:Sidebar" content="">
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  60. <link href='http://fonts.googleapis.com/css?family=Homenaje' rel='stylesheet' type='text/css'>
  61. <link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>
  62.  
  63.  
  64. <style type="text/css">
  65.  
  66.  
  67. body {
  68. background-color: {color:bg};
  69. color: {color:text};
  70. font-family: Droid Serif;
  71. font-size:9px;
  72. line-height:140%;
  73. }
  74.  
  75. a, a:active, a:visited{
  76. text-decoration: none;
  77. color: {color:link};
  78. -webkit-transition: all 0.4s ease-out;
  79. -o-transition: all 0.4s ease-out;
  80. -webkit-transition: all 0.4s ease-out;
  81. -moz-transition: all 0.4s ease-out;
  82. }
  83.  
  84. a:hover{
  85. color: {color:hover};
  86. -webkit-transition: all 0.4s ease-out;
  87. -o-transition: all 0.4s ease-out;
  88. -webkit-transition: all 0.4s ease-out;
  89. -moz-transition: all 0.4s ease-out;
  90. }
  91.  
  92. b, strong{ font-weight:700; color:{color:link};}
  93. i, em { font-weight:700;;}
  94.  
  95.  
  96. /* SIDEBAR */
  97.  
  98. #sidebar {
  99. width:245px;
  100. padding:15px;
  101. height:auto;
  102. background-color:transparent;
  103. margin-top:80px;
  104. margin-left:182px;
  105. position:fixed;
  106. }
  107.  
  108.  
  109. #stext {
  110. background-color:{color:link};
  111. color:{color:stext};
  112. text-align:center;
  113. width:251px;
  114. height:37px;
  115. opacity:0.9;
  116. margin-left:-3px;
  117. padding:5px 0px;
  118. position:absolute;
  119. margin-top:-60px;
  120. font-family:'Droid Serif';
  121. font-size:9px;
  122. -moz-box-shadow:1px 1px 4px {color:shadow2};
  123. -webkit-box-shadow:1px 1px 4px {color:shadow2};
  124. box-shadow: 0px 2px 7px {color:shadow2};
  125. -webkit-transition: all 0.7s ease;
  126. -moz-transition: all 0.7s ease;
  127. -o-transition: all 0.7s ease;}
  128.  
  129.  
  130. #stext:hover { opacity:1; -webkit-transition: all 0.7s ease;
  131. -moz-transition: all 0.7s ease;
  132. -o-transition: all 0.7s ease;}
  133. #stext a { color:{color:stexta}; }
  134. #stext a:hover { color:{color:stext}; }
  135.  
  136. #sideimg {
  137. width:245px;
  138. padding:0px;
  139. background-color:#trans;
  140. }
  141.  
  142. #sideimg:hover .links{
  143. opacity: 1;
  144. margin-left: -5px;
  145. -webkit-transition: all 0.7s ease;
  146. -moz-transition: all 0.7s ease;
  147. -o-transition: all 0.7s ease;}
  148.  
  149.  
  150. .links{
  151. margin-left: -205px;
  152. opacity: 0;
  153. margin-top: -202px;
  154. font-size: 10px;
  155. letter-spacing: 1px;
  156. font-family: consolas;
  157. background-color: transparent;
  158. width: 230px;
  159. position: absolute;
  160. text-transform: lowercase;
  161. text-align: center;
  162. padding: 10px;
  163. -webkit-transition: all 0.7s ease;
  164. -moz-transition: all 0.7s ease;
  165. -o-transition: all 0.7s ease;}
  166.  
  167. .links a{
  168. margin-left: 2px;
  169. opacity: 0.9;
  170. margin-bottom: 5px;
  171. width: 70px;
  172. display: inline-block;
  173. padding: 2px;
  174. color:{color:slinks a};
  175. background-color: {color:slinks hover};
  176. -moz-box-shadow:1px 1px 3px {color:shadow};
  177. -webkit-box-shadow:1px 1px 3px {color:shadow};
  178. box-shadow: 1px 1px 3px {color:shadow};
  179.  
  180. -webkit-transition: all 0.7s ease;
  181. -moz-transition: all 0.7s ease;
  182. -o-transition: all 0.7s ease;}
  183.  
  184. .links a:hover{
  185. color: {color:slinks hover};
  186. background-color:{color:slinks a};
  187. -webkit-transition: all 0.7s ease;
  188. -moz-transition: all 0.7s ease;
  189. -o-transition: all 0.7s ease;}
  190.  
  191.  
  192. #pagination {
  193. margin-top:400px;
  194. background:#trans;
  195. width:265px;
  196. opacity:0.9;
  197. height:25px;
  198. margin-left:185px;
  199. position:fixed;
  200. color:{color:text};
  201. text-align:center;
  202. line-height:20px;
  203. font-family:calibri;
  204. font-size:10px;
  205. }
  206.  
  207. #pagination a {
  208. text-decoration:none;
  209. background:{color:page};
  210. padding: 2px 4px 2px 4px;
  211. color:{color:pagea};
  212. }
  213.  
  214. #pagination a:hover {
  215. background-color:{color:bg};
  216. color:{color:pagea};
  217. }
  218.  
  219.  
  220.  
  221. /* POSTS */
  222.  
  223. #posts {
  224. width:480px;
  225. height:auto;
  226. margin-top:20px;
  227. position:relative;
  228. left: 510px;
  229. }
  230.  
  231. .post {
  232. width:520px;
  233. padding:30px 15px 0px 15px;
  234. text-align: justify;
  235. background: {color:posts};
  236. letter-spacing:0;
  237. }
  238.  
  239. .post img { margin-top:5px; }
  240.  
  241.  
  242. .right{ background:transparent; opacity:0; font-size:9px; margin-top:0px; text-align:left; margin-left:526px; position:absolute;
  243. -webkit-transition: all 0.4s ease-out;
  244. -o-transition: all 0.4s ease-out;
  245. -webkit-transition: all 0.4s ease-out;
  246. -moz-transition: all 0.4s ease-out;
  247. }
  248.  
  249. .rblinks { text-transform:lowercase; color:{color:info link}; background-color:transparent; font-family:calibri; line-height:140%; padding:0px 2px 5px 22px; width:200px; text-transform:NONE; }
  250.  
  251. .tags { text-transform:lowercase; padding-top:5px; border-top:1px solid #efefef; width:120px; margin-top:5px; color:{color:link};}
  252.  
  253. .post:hover .right { opacity:1;
  254. -webkit-transition: all 0.4s ease-out;
  255. -o-transition: all 0.4s ease-out;
  256. -webkit-transition: all 0.4s ease-out;
  257. -moz-transition: all 0.4s ease-out;}
  258.  
  259.  
  260. .info {
  261. opacity:1;
  262. padding:5px 5px 5px 5px;
  263. width:500px;
  264. margin-left:1%;
  265. position:relative;
  266. background-color:{color:info};
  267. color:{color:link};
  268. border-top:1px solid {color:info border};
  269. margin-top:30px;
  270. margin-bottom: 35px;
  271. }
  272.  
  273. .info a { color:{color:link}; }
  274.  
  275.  
  276. .datenotes {
  277. text-transform:uppercase;
  278. letter-spacing:1px;
  279. opacity:1;
  280. text-align:center;
  281. font-size:8px;
  282. font-family:consolas;}
  283.  
  284.  
  285. blockquote {
  286. margin-left: 10px;
  287. border-left: 1px solid {color:blockquote border};
  288. padding-left:8px;
  289. }
  290.  
  291. .caption {
  292. margin-left:10px;
  293. }
  294.  
  295. h1, h2 { font-size:20px; font-family:'Homenaje'; color:{color:link}; margin-top:0px; padding-bottom:5px;}
  296.  
  297. .quote { font-size:23px; font-family:'Homenaje'; color:{color:link}; margin-top:10px; margin-left:5px; line-height:140%; }
  298.  
  299. .source {font-size:9px; font-family: droid serif; letter-spacing: 0px; margin-left:10px; margin-top:5px; opacity:0.7;}
  300.  
  301.  
  302.  
  303. ::-webkit-scrollbar-thumb:vertical {
  304. background-color:{color:link};
  305. border-top:2px solid {color:link};
  306. border-bottom:2px solid {color:link};
  307. height:auto;
  308. }
  309.  
  310. ::-webkit-scrollbar-thumb:vertical:hover{
  311. background-color:{color:link};
  312. }
  313.  
  314. ::-webkit-scrollbar-thumb:horizontal{
  315. background-color:{color:link};
  316. height:auto;
  317. }
  318.  
  319. ::-webkit-scrollbar-thumb:horizontal:hover{
  320. background-color:{color:link};
  321. }
  322.  
  323. ::-webkit-scrollbar{
  324. height:10px;
  325. width:5px;
  326. background-color: #trans;
  327. }
  328.  
  329.  
  330.  
  331. /* CREDIT | DO NOT REMOVE THIS SECTION */
  332.  
  333. .cred { font-family:tinytots; font-size:10px; bottom:0px; right:5px; position:fixed; background-color:#trans; padding:10px; -webkit-transition: all 0.2s ease-out;
  334. -o-transition: all 0.2s ease-out;
  335. -webkit-transition: all 0.2s ease-out;
  336. -moz-transition: all 0.2s ease-out; }
  337.  
  338. .cred:hover { padding-bottom:20px; -webkit-transition: all 0.2s ease-out;
  339. -o-transition: all 0.2s ease-out;
  340. -webkit-transition: all 0.2s ease-out;
  341. -moz-transition: all 0.2s ease-out; }
  342.  
  343. .cred img { opacity:0.4; }
  344.  
  345. @font-face {
  346. font-family: mane;
  347. src: url('http://static.tumblr.com/amm1lw6/Mwqm2qtbb/pfarmafive.ttf');}
  348.  
  349. @font-face {
  350. font-family: "tinytots";
  351. src: url('http://tinyurl.com/6rljj32');
  352. }
  353.  
  354.  
  355.  
  356. </style>
  357. </head>
  358. <body>
  359.  
  360. <div class="cred">
  361. <img src="http://www.swimchick.net/resources/website-bullets/bull7.gif"> <a href="http://hellmouths.tumblr.com">HELLMOUTHS</a></div>
  362.  
  363. <div id="sidebar">
  364. <div id="sideimg"><img src="{image:sidebar}">
  365. <div class="links"><br>
  366.  
  367. <a href="{text:link1 url}">{text:link1}</a>
  368. <a href="{text:link2 url}">{text:link2}</a><br />
  369.  
  370. <a href="{text:link3 url}">{text:link3}</a>
  371. <a href="{text:link4 url}">{text:link4}</a><br />
  372.  
  373. <a href="{text:link5 url}">{text:link5}</a>
  374. <a href="{text:link6 url}">{text:link6}</a><br />
  375.  
  376. <a href="{text:link7 url}">{text:link7}</a>
  377. <a href="{text:link8 url}">{text:link8}</a>
  378.  
  379. </div>
  380.  
  381. <div id="stext">{Description}</div>
  382. </div>
  383.  
  384.  
  385. </div>
  386.  
  387. <div id="pagination">{block:Pagination}
  388. {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  389. {block:JumpPagination length="6"}{block:CurrentPage}
  390. <span class="current_page" style="padding-right:3px;padding-left:3px;">{PageNumber}</span>
  391. {/block:CurrentPage}
  392. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  393. {/block:JumpPagination}
  394. {block:NextPage}<a href="{NextPage}">»</a> {/block:NextPage}
  395. </div>{/block:Pagination} </div><br>
  396.  
  397. <div id="posts">
  398.  
  399. {block:Posts}
  400.  
  401. <div class="post">
  402.  
  403. <div class="right"><div class="rblinks">
  404. <a href="{ReblogURL}" target="_blank" title="reblog this">REBLOG</a>
  405. {block:ContentSource}· <a href="{SourceURL}">SOURCE</a>{/block:ContentSource}</a>
  406. {block:RebloggedFrom}· <a href="{ReblogParentURL}">VIA</a>{/block:RebloggedFrom}<br />
  407.  
  408. <div class="tags">{block:HasTags}{block:Tags}
  409. - <a href="{TagURL}">{Tag}</a><br />
  410. {/block:Tags}{/block:HasTags}</div>
  411.  
  412. </div></div>
  413.  
  414. {block:Text}
  415. {block:Title}
  416. <h1><a href="{Permalink}">{Title}</a></h1>
  417. {/block:Title}
  418. {Body}
  419. {/block:Text}
  420.  
  421. {block:Photo}
  422. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  423. {block:Caption}
  424. <div class="caption">{Caption}</div>
  425. {/block:Caption}
  426. {/block:Photo}
  427.  
  428. {block:Photoset}
  429. <center>{Photoset-500}</center>
  430. {block:Caption}
  431. <div class="caption">{Caption}</div>
  432. {/block:Caption}
  433. {/block:Photoset}
  434.  
  435. {block:Quote}
  436. <div class="quote">"{Quote}"</div>
  437. {block:Source}
  438. <div class="source">- {Source}</div>
  439. {/block:Source}
  440. {/block:Quote}
  441.  
  442. {block:Link}
  443. <center><h1><a href="{URL}" class="link" {Target}>{Name}</a></h1></center>
  444. {block:Description}
  445. {Description}
  446. {/block:Description}
  447. {/block:Link}
  448.  
  449. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}<p>
  450. {block:Lines}<div style="background: {color:info}; color: {color:text}; padding: 5px; width:500px; margin-left:5px; border-bottom: 1px solid {color:posts}">{block:Label}<span style="color: {color:link}; text-transform: uppercase; letter-spacing: 1px">{Label}</span>{/block:Label}&nbsp;{Line}<br></div>{/block:Lines}{/block:Chat}
  451.  
  452. {block:Video}
  453. <center>{Video-500}</center>
  454. {block:Caption}
  455. {Caption}
  456. {/block:Caption}
  457. {/block:Video}
  458.  
  459. {block:Answer}<div style="color: {color:text}; background: {color:bg}; padding: 15px; border:1px solid #efefef;">{Asker}: {Question}</div><br><p>{Answer}{/block:answer}
  460.  
  461. {block:Audio}
  462. {block:AlbumArt}
  463. <img src="{AlbumArtURL}" height="100px">
  464. {/block:AlbumArt}<div style="margin-top: -103px; margin-left: 102px; background: {color:link}; font-family: 'Droid Serif'; width: 348px; border-bottom: 2px solid {color:posts}; color: {color:posts}; text-align: left; font-size: 10px; height: 8px; padding: 26px 25px; letter-spacing: 2px;">{block:trackname}{TrackName}{/block:TrackName} ⋅ {block:Artist}{Artist}{/block:Artist}
  465. </div>
  466. <div style="background-color:#e4e4e4; width: 388px; padding: 5px; margin-left: 102px;">{AudioPlayerGrey}</div>{/block:Audio}
  467.  
  468.  
  469. <div class="info">
  470. <div class="datenotes">{block:Date}
  471. posted <a href="{Permalink}">{TimeAgo}</a> with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:Date}</div>
  472. </div>
  473.  
  474. </div>
  475.  
  476. {block:PermalinkPage}{block:PostNotes}{PostNotes}{/block:PostNotes}{/block:PermalinkPage}
  477. {/block:Posts}
  478.  
  479. </div>
  480. </div>
  481.  
  482. </body>
  483. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement