Advertisement
ValarMorghulis

Theme #6: Happy

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