API tools faq
paste
Advertisement
hellmouths

THEME #010: SUBMARINES

hellmouths
Jan 31st, 2013
6,934
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.69 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME #010: SUBMARINES
  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. [ Background image by subtlepatterns.com ]
  14.  
  15. -->
  16.  
  17.  
  18. <html>
  19. <head>
  20.  
  21. <title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <!-- IMAGES -->
  26. <meta name="image:sidebar" content="">
  27. <meta name="image:sidebar image" content="">
  28. <meta name="image:background" content="http://static.tumblr.com/f01836e813bad197d4bf0214e3355f02/747hq6z/XfWmhicel/tumblr_static_linedpaper.png">
  29.  
  30. <!-- CUSTOM COLORS -->
  31. <meta name="color:background" content="#ffffff">
  32. <meta name="color:font" content="#858585">
  33. <meta name="color:a" content="#a0babb">
  34. <meta name="color:hover" content="#3f968c">
  35. <meta name="color:border" content="#f1f1f1">
  36. <meta name="color:post bg" content="#ffffff">
  37. <meta name="color:sidebar bg" content="#fbfbfb">
  38. <meta name="color:sidebar border" content="#f1f1f1">
  39. <meta name="color:sidebar image bg" content="#ffffff">
  40. <meta name="color:sidebar text" content="#ffffff">
  41. <meta name="color:scrollbar" content="#b3b3b3">
  42. <meta name="color:scrollbar bg" content="#f0f0f0">
  43. <meta name="color:sidelinks border" content="#ddeaec">
  44. <meta name="color:sidelinks bg" content="#ffffff">
  45. <meta name="color:sidelinks hover" content="#ffffff">
  46. <meta name="color:sidelinks hover bg" content="#008d8d">
  47.  
  48. <!-- BLOCKS -->
  49. <meta name="if:Hover for Tags" content="1">
  50. <meta name="if:Show Static Tags" content="0">
  51. <meta name="if:Show Blog Title" content="0">
  52.  
  53. <!-- LINKS -->
  54. <meta name="text:Link 1 URL" content="">
  55. <meta name="text:Link 1" content="">
  56. <meta name="text:Link 2 URL" content="">
  57. <meta name="text:Link 2" content="">
  58. <meta name="text:Link 3 URL" content="">
  59. <meta name="text:Link 3" content="">
  60. <meta name="text:Link 4 URL" content="">
  61. <meta name="text:Link 4" content="">
  62. <meta name="text:Link 5 URL" content="">
  63. <meta name="text:Link 5" content="">
  64. <meta name="text:Link 6 URL" content="">
  65. <meta name="text:Link 6" content="">
  66. <meta name="text:Link 7 URL" content="">
  67. <meta name="text:Link 7" content="">
  68. <meta name="text:Link 8 URL" content="">
  69. <meta name="text:Link 8" content="">
  70.  
  71. <!-- FONTS -->
  72. <meta name="text:Main Font" content="Times New Roman, serif">
  73. <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  74. <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
  75.  
  76.  
  77. </head>
  78. <style type="text/css">
  79.  
  80.  
  81. /* scrollbar */
  82.  
  83. ::-webkit-scrollbar {width:5px; height:auto; background:{color:scrollbar bg};}
  84. ::-webkit-scrollbar-corner {background:{color:scrollbar};}
  85. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar};}
  86. ::-webkit-scrollbar-thumb:horizontal {background:{color:scrollbar};}
  87.  
  88.  
  89. /* body */
  90.  
  91. body {
  92. background-color:{color:background};
  93. background-image: url('{image:background}');
  94. color: {color:font};
  95. line-height: 150%;
  96. font-family: {text:Main Font};
  97. font-size: 10px; }
  98.  
  99.  
  100. a {
  101. text-decoration: none;
  102. -webkit-transition: all 0.2s ease-out;
  103. -o-transition: all 0.2s ease-out;
  104. -webkit-transition: all 0.2s ease-out;
  105. -moz-transition: all 0.2s ease-out;
  106. color:{color:a}; }
  107.  
  108. a:hover {
  109. text-decoration: none;
  110. -webkit-transition: all 0.2s ease-out;
  111. -o-transition: all 0.2s ease-out;
  112. -webkit-transition: all 0.2s ease-out;
  113. -moz-transition: all 0.2s ease-out;
  114. color:{color:hover}; }
  115.  
  116. blockquote {
  117. margin-left: 10px;
  118. padding-left: 5px;
  119. border-left: 1px solid {color:border}; }
  120.  
  121. small { font-size:10px; }
  122.  
  123. /* sidebar, pagination, links */
  124.  
  125.  
  126. #sidebar {
  127. width:195px;
  128. height:100%;
  129. position: fixed;
  130. top:0;
  131. margin-left:620px;
  132. background-color:{color:sidebar bg};
  133. padding:100px 30px 5px 30px;
  134. border-left:1px solid {color:sidebar border};
  135. border-right:1px solid {color:sidebar border};
  136. }
  137.  
  138.  
  139.  
  140. /* sidebar image + title */
  141.  
  142.  
  143. #simage {
  144. margin:auto;
  145. margin-top:10px;
  146. float:center;
  147. }
  148.  
  149. #simage img {
  150. padding:15px;
  151. width:160px;
  152. height:160px;
  153. background-color:{color:sidebar image bg};
  154. border:1px solid {color:sidebar border}; }
  155.  
  156.  
  157. #blogtitle {
  158. margin:auto;
  159. float:center;
  160. font-size:10px;
  161. margin-right:6px;
  162. font-family:'Bitter';
  163. font-style:italic;
  164. color:{color:a};
  165. text-align:right;
  166. }
  167.  
  168.  
  169. /* sidebar description + menu */
  170.  
  171. #desc {
  172. margin:auto;
  173. width:155px;
  174. padding:10px 5px;
  175. font-size:9px;
  176. border-top:1px solid {color:border};
  177. text-align:justify;
  178. float:center;
  179. background-color: {color:sidebar text};
  180. }
  181.  
  182.  
  183. #menu {
  184. margin:auto;
  185. width:155px;
  186. padding:5px;
  187. text-align:center;
  188. margin-top:10px;
  189. float:center; }
  190.  
  191. #menu a {
  192. font-family:'Droid Sans';
  193. text-transform:uppercase;
  194. font-size:8px;
  195. display:inline-block;
  196. margin:0 2px; }
  197.  
  198.  
  199.  
  200. /* sidebar links bottom */
  201.  
  202. #slinks {
  203. margin:auto;
  204. width:185px;
  205. padding:0 3px;
  206. margin-top:-156px;
  207. opacity:0;
  208. float:center;
  209. position:absolute;
  210. text-align:center;
  211. -webkit-transition: all 0.2s ease-out;
  212. -o-transition: all 0.2s ease-out;
  213. -webkit-transition: all 0.2s ease-out;
  214. -moz-transition: all 0.2s ease-out;
  215. }
  216.  
  217. #slinks a {
  218. width:100px;
  219. font-family:'Droid Sans';
  220. text-transform:uppercase;
  221. font-size:7px;
  222. letter-spacing:1px;
  223. border-bottom:1px solid {color:sidelinks border};
  224. height:15px;
  225. padding:3px 0 1px 0;
  226. display:inline-block;
  227. background-color:{color:sidelinks bg};
  228. color:{color:sidelinks}; }
  229.  
  230. #slinks a:hover {
  231. background-color: {color:sidelinks hover bg};
  232. color:white;
  233. -webkit-transition: all 0.2s ease-out;
  234. -o-transition: all 0.2s ease-out;
  235. -webkit-transition: all 0.2s ease-out;
  236. -moz-transition: all 0.2s ease-out; }
  237.  
  238.  
  239. #simage:hover #slinks {
  240. opacity:1;
  241. -webkit-transition: all 0.2s ease-out;
  242. -o-transition: all 0.2s ease-out;
  243. -webkit-transition: all 0.2s ease-out;
  244. -moz-transition: all 0.2s ease-out; }
  245.  
  246.  
  247. /* pagination */
  248.  
  249. #pagination {
  250. text-align:center;
  251. font-family:'Droid Sans';
  252. font-size:7px;
  253. letter-spacing:5px; }
  254.  
  255.  
  256.  
  257. /* posts */
  258.  
  259.  
  260.  
  261. #entry { 
  262. float:left; margin:40px; }
  263.  
  264. .post {
  265. width:500px;
  266. padding:15px 15px 10px 15px;
  267. border:1px solid {color:sidebar border};
  268. background-color:{color:post bg};
  269. margin-bottom:30px;
  270. }
  271.  
  272.  
  273. .title {
  274. font-size:12px;
  275. margin:5px 0 15px 5px ;
  276. font-style:italic;
  277. letter-spacing:1px;}
  278.  
  279. .quote { font-size:14px; font-style:italic; text-align:center; }
  280. .source { width:400px; float:center; margin:auto; margin-top:10px; padding-top:5px; text-align:center; border-top:3px double {color:sidebar border}; }
  281.  
  282. /* date, source, tags */
  283.  
  284. .info {
  285. margin-top:20px;
  286. text-transform:uppercase;
  287. letter-spacing:1px;
  288. font-family:cambria;
  289. font-size:7px;
  290. }
  291.  
  292.  
  293. .info a { color:{color:font}; padding:1px; }
  294. .info a:hover { color:{color:post bg}; background-color:{color:a}; }
  295.  
  296.  
  297. {block:ifHoverforTags}
  298. .tagholder {
  299. position:absolute;
  300. width:500px;
  301. padding-top:0px;
  302. text-align:center;
  303. opacity:0;
  304. -webkit-transition: all 0.2s ease-out;
  305. -o-transition: all 0.2s ease-out;
  306. -webkit-transition: all 0.2s ease-out;
  307. -moz-transition: all 0.2s ease-out;
  308. }
  309.  
  310. .post:hover .tagholder {
  311. opacity:1;
  312. -webkit-transition: all 0.2s ease-out;
  313. -o-transition: all 0.2s ease-out;
  314. -webkit-transition: all 0.2s ease-out;
  315. -moz-transition: all 0.2s ease-out; }
  316.  
  317. .tags {
  318. width:400px;
  319. background: rgba(00,00,00,0.8);
  320. margin:auto;
  321. letter-spacing:1px;
  322. font-size:9px;
  323. padding:4px 0;
  324. text-transform:lowercase;
  325. font-style:italic;
  326. -moz-box-shadow: 1px 1px 2px rgba(00,00,00,0.2);
  327. -webkit-box-shadow: 1px 1px 2px rgba(00,00,00,0.2);
  328. box-shadow: 1px 1px 2px rgba(00,00,00,0.2);
  329. }
  330. {/block:ifHoverforTags}
  331.  
  332.  
  333. {block:ifShowStaticTags}
  334. .tags {
  335. margin-top:2px;
  336. border-top:1px solid {color:sidebar border};;
  337. font-size:6px;
  338. text-transform:uppercase;
  339. letter-spacing:1px;
  340. font-family:'Droid Sans';
  341. }
  342. {/block:ifShowStaticTags}
  343.  
  344.  
  345. span.taghead { display:none; }
  346. a.tag + span.taghead { display:inline; }
  347.  
  348.  
  349.  
  350. /* audio */
  351.  
  352. .audio {
  353. height:60px;
  354. padding:5px;
  355. margin-bottom:55px; }
  356.  
  357. .audio-album {
  358. position:absolute;
  359. width:110px; }
  360.  
  361. .audio-player {
  362. opacity:0.1;
  363. filter:alpha(opacity=90);
  364. border:30px solid {color:post bg};
  365. width:25px;
  366. height:25px;
  367. overflow:hidden;
  368. position:absolute;
  369. z-index:2;
  370. margin-left:13px;
  371. margin-top:13px; }
  372.  
  373. .audio-info {
  374. margin-top:-5px;
  375. position:relative;
  376. margin-left:120px;
  377. line-height:180%;
  378. padding:4px; }
  379.  
  380. .audio:hover .audio-player { opacity:0.7; }
  381.  
  382. .audiocaption { opacity:0; }
  383. .post:hover .audiocaption { opacity:1; }
  384.  
  385.  
  386. /* notes */
  387.  
  388.  
  389. .notes img{display:none;}
  390. ol.notes, .notes li{width:490px; list-style:none; margin:0px 0 10px 5px; padding:0px}
  391.  
  392. /* credit */
  393.  
  394. .credit {
  395. float:left;
  396. right: 10px;
  397. padding:5px;
  398. font-size: 8px;
  399. background-color:white;
  400. border:1px solid #efefef;
  401. text-transform:uppercase;
  402. position: fixed;
  403. bottom: 10px;}
  404.  
  405. </style>
  406. <body>
  407.  
  408. <div class="credit"><a href="http://hellmouths.tumblr.com/">HM THEMES</a></div>
  409.  
  410.  
  411. <div id="sidebar">
  412.  
  413.  
  414. {block:ifShowBlogTitle}<div id="blogtitle">{Title}</div>{/block:ifShowBlogTitle}
  415.  
  416. <div id="simage">
  417.  
  418. <img src="{image:sidebar image}" width="160" height="160" />
  419.  
  420. <div id="slinks">
  421. <a href="{text:Link 3 URL}">{text:Link 3}</a><br>
  422. <a href="{text:Link 4 URL}">{text:Link 4}</a><br>
  423. <a href="{text:Link 5 URL}">{text:Link 5}</a><br>
  424. <a href="{text:Link 6 URL}">{text:Link 6}</a><br>
  425. <a href="{text:Link 7 URL}">{text:Link 7}</a><br>
  426. <a href="{text:Link 8 URL}">{text:Link 8}</a> </div>
  427.  
  428. </div>
  429.  
  430. <div id="menu">
  431. <a href="/">home</a>
  432. <a href="/ask">ask</a>
  433. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  434. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  435. </div>
  436.  
  437. <div id="desc">{description}</div>
  438.  
  439.  
  440. <div id=pagination>{block:Pagination}
  441. {block:PreviousPage}
  442. <a href="{PreviousPage}">-</a>
  443. {/block:PreviousPage}
  444.  
  445. {block:JumpPagination length="5"}
  446. {block:CurrentPage}
  447. <span class="current_page">{PageNumber}</span>
  448. {/block:CurrentPage}
  449.  
  450. {block:JumpPage}
  451. <a class="jump_page" href="{URL}">{PageNumber}</a>
  452. {/block:JumpPage}
  453. {/block:JumpPagination}
  454.  
  455. {block:NextPage}
  456. <a href="{NextPage}">+</a>
  457. {/block:NextPage}
  458. {/block:Pagination}
  459.  
  460. </div>
  461.  
  462. </div>
  463.  
  464.  
  465.  
  466.  
  467. <div id="entry">
  468.  
  469. {block:Posts}
  470.  
  471. <div class="post">
  472.  
  473. {block:ifHoverforTags} {block:HasTags}
  474. <div class="tagholder">
  475. <div class="tags">
  476. tagged: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
  477. </div>
  478. </div>{/block:HasTags}{/block:ifHoverforTags}
  479.  
  480.  
  481.  
  482. {block:Text}
  483. {block:Title}
  484. <div class="title"><a href="{Permalink}">{Title}</a></div>
  485. {/block:Title}
  486. {Body}
  487. {/block:Text}
  488.  
  489. {block:Photo}
  490. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  491. {block:Caption}
  492. <div class="caption">{Caption}</div>
  493. {/block:Caption}
  494. {/block:Photo}
  495.  
  496. {block:Photoset}
  497. <center>{Photoset-500}</center>
  498. {block:Caption}
  499. <div class="caption">{Caption}</div>
  500. {/block:Caption}
  501. {/block:Photoset}
  502.  
  503. {block:Quote}
  504. <div class="quote">"{Quote}"</div>
  505. {block:Source}
  506. <div class="source">- {Source}</div>
  507. {/block:Source}
  508. {/block:Quote}
  509.  
  510. {block:Link}
  511. <center><div class="title"><a href="{URL}" class="link" {Target}>{Name}</a></div></center>
  512. {block:Description}
  513. {Description}
  514. {/block:Description}
  515. {/block:Link}
  516.  
  517. {block:Chat}{block:Title}<div class="title">{Title}</div>{/block:Title}<p>
  518. <div style="margin:-10px 0px;">
  519. {block:Lines}<div style="padding:7px 3px; border-bottom: 1px solid {color:border}; ">{block:Label}<span style="color: {color:a}; text-transform: uppercase; letter-spacing: 1px;">{Label}</span>{/block:Label}&nbsp;{Line}<br></div>{/block:Lines}</div><br />{/block:Chat}
  520.  
  521. {block:Video}
  522. <center>{Video-500}</center>
  523. {block:Caption}
  524. {Caption}
  525. {/block:Caption}
  526. {/block:Video}
  527.  
  528. {block:Answer}<div style="color: {color:post bg}; background: #474747; padding: 15px;"><span style="font-size:12px; font-style:italic;">{Asker} asked:</span><br> {Question}</div><br><p>{Answer}{/block:answer}
  529.  
  530. {block:Audio}
  531. <div class="audio">
  532. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  533. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  534.  
  535. <div class="audio-info">
  536. {block:TrackName}<b>Title:</b> {TrackName}<BR>{/block:TrackName}
  537. {block:Artist}<b>Artist:</b> {Artist}<BR>{/block:Artist}
  538. {block:Album}<b>Album:</b> {Album}<BR>{/block:Album}
  539. {block:PlayCount}<b>Plays:</b> {PlayCount}<BR>{/block:PlayCount}
  540. </div></div>
  541. <div class="audiocaption">{block:Caption}{Caption}{/block:Caption}</div>
  542. {/block:Audio}
  543.  
  544.  
  545. <div class="info">{block:Date}<a href="{Permalink}">{TimeAgo}</a> | <a href="{Permalink}">{NoteCount}</a>{/block:Date} <div style="float:right;">{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} {block:ContentSource}| <a href="{SourceURL}">source</a>
  546. {/block:ContentSource}</div></div>
  547.  
  548. {block:ifShowStaticTags}{block:HasTags}
  549. <div class="tags">
  550. {block:Tags}<span class="taghead">,&nbsp;&nbsp;</span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
  551. </div>{/block:HasTags}
  552. {/block:ifShowStaticTags}
  553.  
  554.  
  555. {block:PostNotes}
  556. <div style="height:30px; width:100%; "></div>
  557. {PostNotes}
  558. {/block:PostNotes}
  559.  
  560. </div>
  561. {/block:Posts}
  562.  
  563.  
  564. </div>
  565.  
  566.  
  567.  
  568.  
  569. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!