Advertisement
theirins

CATALLENA / theme #03

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