Advertisement
ValarMorghulis

Theme #07: Sink

Sep 3rd, 2014
244
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.42 KB | None | 0 0
  1.  
  2. <!--theme 7 by hbbits-->
  3.  
  4. <!DOCTYPE html>
  5. <head>
  6.  
  7.  
  8. <title>{Title}</title>
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14. <!--Default Variables-->
  15. <meta name="color:Background" content="#ffffff"/>
  16. <meta name="color:Text" content="#aaaaaa"/>
  17. <meta name="color:Link" content="#000000"/>
  18.  
  19. <meta name="color:navigation" content=""/>
  20. <meta name="color:navigation odd" content=""/>
  21. <meta name="color:navigation hover" content=""/>
  22. <meta name="color:blocks" content=""/>
  23. <meta name="color:blocks text" content=""/>
  24.  
  25.  
  26. <meta name="text:title" content="" />
  27. <meta name="text:Link 1 URL" content="" />
  28. <meta name="text:Link 1" content="" />
  29. <meta name="text:Link 2 URL" content="" />
  30. <meta name="text:Link 2" content="" />
  31. <meta name="text:Link 3 URL" content="" />
  32. <meta name="text:Link 3" content="" />
  33. <meta name="text:Link 4 URL" content="" />
  34. <meta name="text:Link 4" content="" />
  35. <meta name="text:Link 5 URL" content="" />
  36. <meta name="text:Link 5" content="" />
  37. <meta name="text:Link 6 URL" content="" />
  38. <meta name="text:Link 6" content="" />
  39.  
  40.  
  41. <!-- jquery for tooltips-->
  42.  
  43.  
  44. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  45.  
  46. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  47.  
  48. <script>
  49.  
  50. (function($){
  51.  
  52. $(document).ready(function(){
  53.  
  54. $("a[title]").style_my_tooltips({
  55.  
  56. tip_follows_cursor:true,
  57.  
  58. tip_delay_time:30,
  59.  
  60. tip_fade_speed:300,
  61.  
  62. attribute:"title"
  63.  
  64. });
  65.  
  66. });
  67.  
  68. })(jQuery);
  69.  
  70. </script>
  71.  
  72.  
  73.  
  74.  
  75. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  76. <script type="text/javascript">
  77. $(document).ready(function(){
  78. $(".links_body").hide();
  79. $(".links_head").click(function(){
  80. $(this).next(".links_body").slideToggle('fast');
  81. }); }); </script>
  82.  
  83.  
  84.  
  85. <!--CSS customization here. -->
  86.  
  87. <style type="text/css">
  88.  
  89. #s-m-t-tooltip{
  90. position:absolute;
  91. margin-top: 15px;
  92. z-index:9999;
  93. background:{color:background};
  94. }
  95.  
  96.  
  97.  
  98. /*basics*/
  99.  
  100. blockquote {
  101. padding:0px 0 0px 5px;
  102. border-left:1px solid {color:text};
  103. margin-left:10px;
  104. }
  105.  
  106. body {
  107. background:{color:background};
  108. color:{color:text};
  109. font-family:arial;
  110. font-size:11px;
  111. text-align:justify;
  112. margin:0;
  113. line-height:16px;}
  114.  
  115.  
  116. a {
  117. color:{color:link};
  118. text-decoration:none;
  119. }
  120.  
  121. a:hover {
  122. text-decoration:line-through;
  123. }
  124.  
  125. img{opacity:1;
  126. border:none;
  127. text-decoration:none}
  128.  
  129.  
  130. small {
  131. font-size:9px;}
  132.  
  133. big {
  134. font-size:12px;}
  135.  
  136.  
  137. #title {
  138. background:{color:blocks};
  139. color:{color:blocks text};
  140. padding:10px;
  141. border-radius:5px;
  142. font-size:12px;
  143. line-height:18px;
  144. font-weight:bold;
  145. margin-bottom:10px;
  146. text-transform:uppercase;
  147. text-align:center;}
  148.  
  149.  
  150. /*sidebar*/
  151. #sidebar {text-align:left;
  152. position:fixed;
  153. margin-left:-225px;
  154. margin-top:100px;
  155. width:125px;
  156. }
  157.  
  158. #blogt {
  159. background:{color:navigation};
  160. color:white;
  161. text-transform:uppercase;
  162. width:125px;
  163. text-align:center;
  164. border:3px black solid;
  165. padding:10px;
  166. font-size:11px;
  167. font-weight:bold;
  168. letter-spacing:4px;
  169. }
  170.  
  171. #blogt:hover {
  172. color:white;
  173. text-decoration:none;
  174. }
  175.  
  176. .links_list {
  177. font-size:11px;
  178. font-family:helvetica neue;
  179. font-weight:bold;
  180. margin:0px;
  181. padding:0px;
  182. }
  183.  
  184. .links_head {
  185. letter-spacing:4px;
  186. background:{color:navigation};
  187. color:{color:navigation odd};
  188. width:125px;
  189. margin:0px;
  190. text-align:center;
  191. border:3px black solid;
  192. padding:10px;
  193. cursor:pointer;
  194. position:relative;
  195. text-align:center;
  196. }
  197. .links_head:hover {
  198. letter-spacing:1px;
  199. }
  200.  
  201. .links_body {
  202. margin-top:-1px;
  203. margin-left:-1px;
  204. color:{color:navigation odd};
  205. text-align:center;
  206. width:125px;
  207. line-height:16px;
  208. }
  209.  
  210.  
  211. .links_body a{
  212. margin-left:1px;
  213. border-left:3px black solid;
  214. border-right:3px black solid;
  215. border-bottom:3px black solid;
  216. padding:10px;
  217. width:125px;
  218. display:inline-block;
  219. color:{color:text};
  220. }
  221.  
  222. .links_body a:hover{
  223. color:{color:navigation odd};
  224. background:{color:navigation hover};
  225. text-decoration:none;
  226. }
  227.  
  228.  
  229. #description {
  230. width:125px;
  231. border-right:3px black solid;
  232. border-left:3px black solid;
  233. padding:10px;
  234. }
  235.  
  236.  
  237. /*pagination*/
  238. #pagination {
  239. margin:0px 0px -1px 95px;
  240. border-left:3px black solid;
  241. border-right:3px black solid;
  242. border-top:3px black solid;
  243. width:50px;
  244. font-size:9px;
  245. font-weight:bold;
  246. text-transform:lowercase;
  247. text-align:center;
  248. color:{color:navigation};
  249. }
  250. #pagination a {
  251. padding-left:1px;
  252. color:{color:navigation};
  253. }
  254. #pagination a:hover {
  255. text-decoration:none;
  256. }
  257.  
  258. /*container*/
  259. #con {
  260. left:50%;
  261. margin-left:-250px;
  262. position:absolute;
  263. }
  264.  
  265.  
  266.  
  267. /*posts*/
  268.  
  269. #entries {
  270. margin-left:130px;
  271. margin-top:75px;
  272. width:400px;
  273. }
  274.  
  275.  
  276.  
  277. #posts {
  278. width:400px;
  279. {block:IndexPage}
  280. margin-bottom:75px;
  281. {/block:IndexPage}
  282. {block:PermalinkPage}
  283. margin-bottom:50px;
  284. {/block:PermalinkPage}
  285.  
  286. }
  287. #posts img {
  288. max-width:400px;
  289. }
  290.  
  291. #posts img, #posts li, #posts blockquote {max-width: 100%;}
  292. .caption {width:100%;
  293. margin-top:10px;
  294.  
  295. }
  296.  
  297. /*quote*/
  298.  
  299. #titlequote{
  300. background:{color:blocks};
  301. color:{color:blocks text};
  302. padding:10px;
  303. border-radius:5px;
  304. text-align:center;
  305. font-size:14px;
  306. line-height:18px;
  307. font-weight:bold;
  308. }
  309. #source {
  310. text-align:right;
  311. margin-top:15px;
  312. margin-left:15px;}
  313.  
  314. /*audio*/
  315.  
  316. .newplayerbutton {
  317. position: relative;
  318. width: 28px;
  319. height: 27px;
  320. overflow: hidden;
  321. }
  322.  
  323. .playerbuttonhug {
  324. position: absolute;
  325. top: -11px;
  326. left: -12px;
  327. }
  328.  
  329.  
  330. .tumblr_audio_player {
  331. border: none;
  332. padding: 0px;
  333. margin: 0px;
  334. height: 50px;
  335. width: 500px;
  336. }
  337.  
  338. .playerbuttonbg {
  339. position: absolute;
  340. left: 20px;
  341. top: 20px;
  342. width: 28px;
  343. height: 28px;
  344. background-color: #ffffff;
  345. padding: 10px;
  346. -webkit-border-radius: 40px;
  347. -moz-border-radius: 40px;
  348. border-radius: 40px;
  349. opacity: .4;
  350. filter: alpha(opacity=40);
  351. -moz-opacity: 0.4;
  352. -khtml-opacity: 0.4;
  353. transition: opacity .7s ease-in-out;
  354. -moz-transition: opacity .7s ease-in-out;
  355. -webkit-transition: opacity .7s ease-in-out;
  356. }
  357.  
  358. .playerbuttonbg:hover {
  359. opacity: 1;
  360. filter: alpha(opacity=100);
  361. -moz-opacity: 1;
  362. -khtml-opacity: 1;
  363. }
  364.  
  365. .audioimgwrapper {
  366. position: absolute;
  367. left: 0px;
  368. top: 0px;
  369. -webkit-border-radius: 50px;
  370. -moz-border-radius: 50px;
  371. border-radius: 50px;
  372. overflow: hidden;
  373. width: 88px;
  374. height: 88px;
  375. }
  376.  
  377. .audioimgwrapper img {
  378. width: 100%;
  379. height: auto;
  380. -webkit-border-radius: 50px;
  381. -moz-border-radius: 50px;
  382. border-radius: 50px;
  383. }
  384.  
  385. .trackdetails {
  386. width: auto;
  387. display:inline-block;
  388. margin-left: 100px;
  389. min-height: 85px;
  390. }
  391.  
  392. .audiowrapper {
  393. position: relative;
  394. display:inline-block;
  395. }
  396.  
  397.  
  398.  
  399. /*asks*/
  400. .q {margin-bottom:10px;
  401. background:{color:blocks};
  402. color:{color:blocks text};
  403. padding:10px;
  404. border-radius:25px;
  405. }
  406. .as {
  407. font-weight:bold;}
  408.  
  409. .a {
  410. margin-top:10px;
  411. }
  412.  
  413.  
  414. /*chat*/
  415.  
  416.  
  417. .odd, .even {padding:5px;
  418. border-radius:5px;
  419. }
  420.  
  421. .odd {
  422. background-color:{color:navigation};
  423. color:{color:navigation odd};
  424. }
  425.  
  426. .chat ol {
  427. padding:0;
  428. list-style:none;
  429. }
  430. .line {padding:5px;}
  431.  
  432. .label {font-weight:bold;
  433. text-align:center;
  434. }
  435.  
  436.  
  437.  
  438. /*permalink and notes*/
  439.  
  440. #permalink {
  441. margin-top:15px;
  442. font-size:9px;
  443. background:{color:blocks};
  444. padding:10px;
  445. border-radius:5px;
  446. }
  447. #permalink a {
  448. margin-right:10px;
  449. border-radius:5px;
  450. }
  451.  
  452. .current_page{
  453. color:{color:link};
  454. }
  455. .tags {
  456. word-break:break-all;
  457. font-size:9px;
  458. }
  459.  
  460. .pagenotes {
  461. {block:IndexPage}
  462. display: none!important;
  463. {/block:IndexPage}
  464. width:400px;
  465. text-align:left;
  466.  
  467. }
  468. .pagenotes img {
  469. display:none!important;}
  470. .pagenotes li {
  471. list-style-type:none;
  472. padding:5px 0px;
  473. text-align:left;
  474. margin:0 0 0 -40px;
  475. }
  476.  
  477. #leave {
  478. color:{color:link};
  479. padding:2px;
  480. border-radius:100px;
  481. position:fixed;
  482. font-size:17px;
  483. letter-spacing:1px;
  484. right:16px;
  485. bottom:15px;
  486. }
  487.  
  488. #leave a {
  489. padding:3px;
  490. }
  491.  
  492. #leave a:hover {
  493. text-decoration:none;
  494. color:{color:navigation hover};
  495. }
  496.  
  497.  
  498. {CustomCSS}
  499.  
  500.  
  501.  
  502.  
  503. </style>
  504.  
  505.  
  506.  
  507. </head>
  508.  
  509. <body>
  510.  
  511. <div id="con">
  512.  
  513. <div id="sidebar">
  514. <div id="pagination">
  515. {block:Pagination}
  516. {block:PreviousPage}
  517. <a href="{PreviousPage}">&larr;</a>
  518. {/block:PreviousPage}
  519.  
  520.  
  521. {block:NextPage}
  522. <a href="{NextPage}">&rarr;</a>
  523. {/block:NextPage}
  524. {/block:Pagination}
  525. </div>
  526.  
  527. <div id="blogt"><a href="/">{text:title}</a></div>
  528.  
  529. <div id="description">{Description}</div>
  530. <div class="links_list">
  531. <p class="links_head">NAVIGATION</p>
  532. <div class="links_body">
  533. <center>
  534. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  535. {block:ifLink2}<a href="{text:Link 2 URL}" >{text:Link 2}</a>{/block:ifLink2}
  536. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a> {/block:ifLink3}
  537. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  538. {block:ifLink5}<a href="{text:Link 5 URL}" >{text:Link 5}</a>{/block:ifLink5}
  539. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a> {/block:ifLink6}
  540. </center>
  541. </div></div>
  542. </div>
  543.  
  544.  
  545. <div id="leave"><a href="http://hbbits.tumblr.com">☐△</a></div>
  546.  
  547. <div id="entries">
  548.  
  549. {block:Posts}
  550. <div id="posts">
  551.  
  552.  
  553. {block:Quote}
  554.  
  555.  
  556. <div id="titlequote">“{Quote}”</div>
  557. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  558. {/block:Quote}
  559.  
  560.  
  561.  
  562. {block:Text}
  563.  
  564. {block:Title}
  565. <div id="title">{Title}</div>{/block:Title}
  566. {Body}
  567. {/block:Text}
  568.  
  569. {block:Link}
  570. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  571. {/block:Link}
  572.  
  573. {block:Chat}
  574. {block:Title}
  575. <h1>{Title}</h1>
  576. {/block:Title}
  577. <div class="chat">
  578. <ol>{block:Lines}
  579. <li class="line {Alt}">
  580. {block:Label}
  581. <span class="label">
  582. {Label}</span>
  583. {/block:Label}{Line}</li>
  584. {/block:Lines}
  585. </ol></div>
  586. {/block:Chat}
  587.  
  588. {block:Photo}
  589. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  590. {/block:Photo}
  591.  
  592. {block:Photoset}
  593. {Photoset-400}
  594. {/block:Photoset}
  595.  
  596. {block:Video}
  597. {Video-400}
  598. {/block:Video}
  599.  
  600. {block:AudioPlayer}
  601. <div class="audiowrapper">
  602. {block:AlbumArt}
  603. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  604. {/block:AlbumArt}
  605.  
  606. <div class="playerbuttonbg">
  607. <div class="newplayerbutton">
  608. <div class="playerbuttonhug">
  609.  
  610. {AudioPlayerWhite}
  611.  
  612. </div>
  613. </div>
  614. </div>
  615.  
  616. <div class="trackdetails">
  617.  
  618. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  619. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  620. {block:Album}Album: {Album}{/block:Album}<br/>
  621. {PlayCountWithLabel}
  622.  
  623. </div>
  624. </div>
  625. {/block:AudioPlayer}
  626.  
  627. {block:Answer}
  628. <div class="q">
  629. <div class="as">{Asker} said: </div>
  630. {Question}</div>
  631. <div class="a">{Answer}</div>
  632. {/block:Answer}
  633.  
  634. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  635.  
  636. {block:Date}
  637. <div id="permalink">
  638. <a href="{Permalink}" >{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a>{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</a>{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}
  639. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  640. </div>
  641. {/block:Date}
  642.  
  643.  
  644.  
  645. </div>
  646.  
  647.  
  648. {block:PostNotes}
  649. <div class="pagenotes">
  650. {PostNotes}
  651. </div>
  652. {/block:PostNotes}
  653.  
  654.  
  655. {/block:Posts}
  656.  
  657.  
  658.  
  659. </div>
  660.  
  661. </div>
  662.  
  663.  
  664. {block:ContentSource}
  665. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  666. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  667. {/block:SourceLogo}
  668. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  669. {/block:ContentSource}
  670.  
  671. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement