Advertisement
aeternaphantasia

theme #09: claire

Jun 18th, 2016
2,065
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.73 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  8.  
  9. <!--
  10.  
  11. Theme #09 REVAMP: Claire
  12. coded by kuzuriha
  13.  
  14. As this is a revamp theme, the earlier version of the theme (both the preview and the code) will be removed, and the code won't be updated unless there's a major bug/glitch. The previous version of this page was titled "Clairvoyance".
  15.  
  16. 1. Don't remove the credit.
  17. 2. Don't move the credit. Just leave it there.
  18. 3. Don't use as a base code.
  19. 4. Please enjoy! If you find any bugs, please contact me! c:
  20.  
  21. -->
  22.  
  23. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  24.  
  25. <script src="//use.edgefonts.net/lora.js"></script>
  26. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  28. <script src="https://static.tumblr.com/wdp3vza/pJvosgmgd/jquery.style-my-tooltips.js"></script>
  29.  
  30. <script>
  31.  
  32. (function($){
  33.  
  34. $(document).ready(function(){
  35.  
  36. $("a[title]").style_my_tooltips({
  37.  
  38. tip_follows_cursor:true,
  39.  
  40. tip_delay_time:0,
  41.  
  42. tip_fade_speed:0,
  43.  
  44. attribute:"title"
  45.  
  46. });
  47.  
  48. });
  49.  
  50. })(jQuery);
  51.  
  52. </script>
  53.  
  54. <script language="javascript">
  55. $(document).ready(function() {
  56. $('a#clickbutton').click(function() {
  57. $('.t',this).toggle();
  58. });
  59.  
  60. $("#maindesc").css({"left": "-140%"})
  61. $("#clickbutton").toggle(
  62. function () {
  63. $("#maindesc").animate({"left": "97px"}, "slow");
  64. },
  65. function () {
  66. $("#maindesc").animate({"left": "-140%"}, "slow");
  67. });
  68. });
  69.  
  70. </script>
  71.  
  72. <!--Variables-->
  73. <meta name="image:bg" content=""/>
  74.  
  75. <meta name="color:bg" content="#fbfbfb"/>
  76. <meta name="color:first accent" content="#FFCDC0"/>
  77. <meta name="color:second accent" content="#FFCDDC"/>
  78. <meta name="color:body" content="#121212"/>
  79. <meta name="color:postbg" content="#fff"/>
  80.  
  81. <meta name="color:sidebarbg" content="#fff"/>
  82.  
  83. <meta name="image:about icon" content=""/>
  84.  
  85. <meta name="text:link1" content=""/>
  86. <meta name="text:link1URL" content=""/>
  87. <meta name="text:link2" content=""/>
  88. <meta name="text:link2URL" content=""/>
  89. <meta name="text:link3" content=""/>
  90. <meta name="text:link3URL" content=""/>
  91. <meta name="text:link4" content=""/>
  92. <meta name="text:link4URL" content=""/>
  93. <meta name="text:link5" content=""/>
  94. <meta name="text:link5URL" content=""/>
  95. <meta name="text:link6" content=""/>
  96. <meta name="text:link6URL" content=""/>
  97. <meta name="text:musiccode" content=""/>
  98.  
  99. <meta name="if:about" content="1"/>
  100.  
  101. <style type="text/css">
  102. iframe.tmblr-iframe {
  103. z-index:99999999999999!important;
  104. {block:ifstickydescription}
  105. top:25px!important;
  106. {/block:ifstickydescription}
  107.  
  108. {block:ifnotstickydescription}
  109. top:0!important;
  110. {/block:ifnotstickydescription}
  111.  
  112. right:0!important;
  113. opacity:0.4;
  114. /* delete invert(1) from here */
  115. filter:invert(1) contrast(150%);
  116. -webkit-filter:invert(1) contrast(150%);
  117. -o-filter:invert(1) contrast(150%);
  118. -moz-filter:invert(1) contrast(150%);
  119. -ms-filter:invert(1) contrast(150%);
  120. /* to here if your blog has a dark background */
  121. transform:scale(0.65);
  122. transform-origin:100% 0;
  123. -webkit-transform:scale(0.65);
  124. -webkit-transform-origin:100% 0;
  125. -o-transform:scale(0.65);
  126. -o-transform-origin:100% 0;
  127. -moz-transform:scale(0.65);
  128. -moz-transform-origin:100% 0;
  129. -ms-transform:scale(0.65);
  130. -ms-transform-origin:100% 0;}
  131.  
  132. iframe.tmblr-iframe:hover {
  133. opacity:0.6!important;
  134. }
  135.  
  136. ::-webkit-scrollbar{
  137. width:14px;
  138. background:{color:bg};
  139. }
  140.  
  141. ::-webkit-scrollbar-thumb:vertical{
  142. background:{color:first accent};
  143. height:auto;
  144. border:6px solid #fff;
  145. }
  146. ::selection{
  147. color:{color:first accent};
  148. background:transparent;
  149. }
  150.  
  151. ::-moz-selection{
  152. color:{color:first accent};
  153. background:transparent;
  154. }
  155.  
  156. #s-m-t-tooltip {
  157. max-width:200px;
  158. padding:5px 10px 5px 10px;
  159. margin:20px 14px 7px 10px;
  160. background-color:{color:second accent}; /* change the background color */
  161. font-style: normal;
  162. font-size:10px; /* change the font size */
  163. line-height:11px;
  164. letter-spacing:1px; /* change the letter spacing */
  165. text-transform:uppercase; /* can be uppercase, lowercase, none*/
  166. color:#fff; /* change the text color */
  167. z-index:999999999999999;
  168. }
  169.  
  170. body{
  171. margin:0;
  172. padding:0;
  173. font-size:12px;
  174. color:{color:body};
  175. background:{color:bg} url('{image:bg}') fixed;
  176. font-family:lora;
  177. }
  178.  
  179. a{
  180. text-decoration:none;
  181. color:{color:first accent};
  182. }
  183.  
  184. #sidebar{
  185. height:100%;
  186. position:fixed;
  187. left:0;
  188. z-index:9999999;
  189. top:0;
  190. background:{color:sidebarbg};
  191. width:95px;
  192. }
  193.  
  194. #navbar{
  195. width:60px;
  196. height:200px;
  197. position:absolute;
  198. margin:18px;
  199. margin-top:440px;
  200. }
  201.  
  202. .navlink a{
  203. font-size:40px;
  204. line-height:100%;
  205. text-align:center;
  206. width:40px;
  207. padding:10px;
  208. display:block;
  209. margin-bottom:10px;
  210. color:{color:first accent};
  211. }
  212.  
  213. #clickbutton{
  214. width:40px;
  215. height:40px;
  216. color:{color:first accent};
  217. text-align:center;
  218. font-size:40px;
  219. position:absolute;
  220. padding:10px;
  221. line-height:100%;
  222. margin:18px;
  223. transition:.5s ease;
  224. }
  225.  
  226. #clickbutton:hover{
  227. background:{color:first accent};
  228. color:#fff;
  229. }
  230.  
  231. #maindesc{
  232. {block:ifabout}
  233. width:calc(100% - 95px);
  234. {/block:ifabout}
  235.  
  236. {block:ifnotabout}
  237. width:30%;
  238. {/block:ifnotabout}
  239.  
  240. position:fixed;
  241. top:0;
  242. background:#fff;
  243. z-index:99;
  244. height:100%;
  245. }
  246.  
  247. #blogtitle{
  248. display:inline-block;
  249. padding:10px;
  250. font-size:35px;
  251. font-weight:700;
  252. margin:10px;
  253. }
  254.  
  255. #blogtitle:first-letter{
  256. color:{color:second accent};
  257. }
  258.  
  259. #leftside{
  260. width:350px;
  261. position:absolute;
  262. top:200px;
  263. margin-left:20px;
  264. }
  265.  
  266. #desc{
  267. width:310px;
  268. padding:10px;
  269. min-height:60px;
  270. max-height:90px;
  271. position:absolute;
  272. margin:10px;
  273. text-align:justify;
  274. }
  275.  
  276. #customcont{
  277. width:310px;
  278. height:90px;
  279. position:absolute;
  280. margin-top:160px;
  281. margin-left:25px;
  282. }
  283.  
  284. .customlink a{
  285. display:inline-block;
  286. min-width:60px;
  287. margin:10px;
  288. padding:8px;
  289. text-align:center;
  290. background:{color:second accent};
  291. color:#fff;
  292. }
  293.  
  294. #searchbox{
  295. width:330px;
  296. height:20px;
  297. padding:8px;
  298. position:absolute;
  299. margin-top:320px;
  300. margin-left:10px;
  301. }
  302.  
  303. .sfm input{
  304. border:1px solid {color:second accent};
  305. width:210px;
  306. font-size:11px;
  307. text-transform:uppercase;
  308. padding:4px 8px;
  309. font-family:consolas;
  310. }
  311.  
  312. #sf{
  313. float:left;
  314. }
  315.  
  316. #sb{
  317. background:{color:second accent};
  318. color:#fff;
  319. width:90px;
  320. margin-left:10px;
  321. }
  322.  
  323. .sfm input:focus {
  324. outline:none;
  325. }
  326.  
  327. #rightside{
  328. position:absolute;
  329. margin-left:450px;
  330. top:100px;
  331. width:500px;
  332.  
  333. {block:ifnotabout}
  334. display:none;
  335. {/block:ifnotabout}
  336. }
  337.  
  338. /*about*/
  339.  
  340. #abtcont{
  341. width:650px;
  342. height:520px;
  343. background:#fff;
  344. margin-left:40px;
  345. border-left:1px solid {color:second accent};
  346. border-bottom:1px solid {color:second accent};
  347. border-right:1px solid {color:second accent};
  348. }
  349.  
  350. #abthead{
  351. display:block;
  352. padding:20px;
  353. top:0;
  354. left:0;
  355. background:{color:second accent};
  356. color:#fff;
  357. text-align:center;
  358. font-size:20px;
  359. font-weight:700;
  360. font-style:italic;
  361. }
  362.  
  363. #infoabt{
  364. display:block;
  365. padding:10px;
  366. border-bottom:1px solid {color:second accent};
  367. height:140px;
  368. }
  369.  
  370. #infoava{
  371. width:120px;
  372. height:120px;
  373. float:left;
  374. margin:10px;
  375. }
  376.  
  377. #infoava img{
  378. width:120px;
  379. height:120px;
  380. max-width:120px;
  381. max-height:120px;
  382. }
  383.  
  384. .infowrap{
  385. display:block;
  386. margin-bottom:10px;
  387. }
  388.  
  389. #infodesc{
  390. float:left;
  391. margin-left:10px;
  392. }
  393.  
  394. .infolbl, .infocont{
  395. display:inline-block;
  396. min-width:40px;
  397. text-align:center;
  398. margin-bottom:10px;
  399. padding:8px;
  400. }
  401.  
  402. .infolbl{
  403. background:{color:second accent};
  404. }
  405.  
  406. #abtt{
  407. padding:15px 20px;
  408. height:260px;
  409. max-height:260px;
  410. overflow:scroll;
  411. width:610px;
  412. overflow-x:hidden;
  413. text-align:justify;
  414. }
  415.  
  416. #abtt::-webkit-scrollbar{
  417. width:1px;
  418. }
  419.  
  420. #abtt::-webkit-scrollbar-thumb:vertical{
  421. background:{color:second accent};
  422. height:auto;
  423. }
  424.  
  425. #abtt b, strong{
  426. color:{color:first accent};
  427. }
  428.  
  429. #abtt i, em{
  430. color:{color:second accent};
  431. }
  432.  
  433. /*main layout*/
  434.  
  435. #container{
  436. margin-left:150px;
  437. {block:indexpage}
  438. margin-top:-70px;
  439. {/block:indexpage}
  440. }
  441.  
  442. .post{
  443. width:540px;
  444. position:relative;
  445. margin-bottom:90px;
  446. margin-top:180px;
  447. word-wrap:break-word;
  448.  
  449. {block:permalinkpage}
  450. margin-top:20px;
  451. margin-bottom:20px;
  452. {/block:permalinkpage}
  453. }
  454.  
  455. .cap{
  456. text-align:justify;
  457. padding:4px 15px 3px 15px;
  458. background:{color:postbg};
  459. }
  460.  
  461. .cap blockquote{
  462. padding-left:5px;
  463. border-left:2px solid {color:first accent};
  464. }
  465.  
  466. .cap blockquote blockquote{
  467. padding-left:5px;
  468. border-left:2px solid {color:first accent};
  469. }
  470.  
  471. .cap b, strong{
  472. color:{color:first accent};
  473. font-weight:400;
  474. }
  475.  
  476. .cap i, em{
  477. color:{color:second accent};
  478. }
  479.  
  480. .post img, .cap img{
  481. max-width:100%;
  482. }
  483.  
  484. .title{
  485. display:block;
  486. font-size:16px;
  487. text-transform:uppercase;
  488. font-weight:700;
  489. background:{color:first accent};
  490. color:#fff;
  491. text-align:center;
  492. padding:10px;
  493. }
  494.  
  495. #link a{
  496. display:block;
  497. padding:10px;
  498. background:{color:second accent};
  499. color:#fff;
  500. font-weight:700;
  501. font-size:16px;
  502. transition:.5s ease;
  503. text-transform:lowercase;
  504. }
  505.  
  506. #quote{
  507. font-style:italic;
  508. font-size:20px;
  509. font-weight:700;
  510. padding:8px;
  511. }
  512.  
  513. #source{
  514. font-size:14px;
  515. padding:10px;
  516. text-align:center;
  517. }
  518.  
  519. .chatwrap{
  520. padding:10px;
  521. }
  522.  
  523. .chat li{
  524. list-style-type:none !important;
  525. margin-left:-20px;
  526. margin-top:4px;
  527. padding-bottom:8px;
  528. margin-bottom:2px;
  529. font-family:lora;
  530. }
  531.  
  532. .line_odd .label{
  533. font-weight:700;
  534. color:{color:first accent};
  535. }
  536.  
  537. .line_even .label{
  538. font-weight:700;
  539. color:{color:second accent};
  540. }
  541.  
  542. .pinfo{
  543. padding:10px;
  544. margin-left:165px;
  545. }
  546.  
  547. .plab{
  548. display:inline-block;
  549. background:{color:second accent};
  550. text-align:center;
  551. min-width:40px;
  552. color:#fff;
  553. margin-right:10px;
  554. text-transform:uppercase;
  555. padding:6px;
  556. }
  557.  
  558. .reblogheader{
  559. padding:15px;
  560. position:relative;
  561. margin-top:10px;
  562. margin-bottom:10px;
  563. background:#fff;
  564. }
  565.  
  566. .plab a{
  567. color:#fff;
  568. }
  569.  
  570. .reblogcont{
  571. width:500px;
  572. padding:20px;
  573. background:{color:postbg};
  574. top:-70px;
  575. height:30px;
  576. left:0;
  577. position:absolute;
  578. }
  579.  
  580. .controls{
  581. position:absolute;
  582. right:5px;
  583. top:10px;
  584. margin:10px;
  585. }
  586.  
  587. .controls .like{
  588. display:inline-block;
  589. }
  590.  
  591. .controls .like .liked + svg {
  592. opacity:1;
  593. }
  594.  
  595. .controls .like .liked + svg path {
  596. fill:#ec5a5a;
  597. }
  598.  
  599. .controls .like .like_button {
  600. position:relative;
  601. }
  602.  
  603. .controls .like .like_button iframe {
  604. position:absolute;
  605. top:0;
  606. left:0;
  607. bottom:0;
  608. right:0;
  609. z-index:2;
  610. opacity:0;
  611. }
  612.  
  613. .controls a{
  614. display:inline-block;
  615. width:12px;
  616. text-align:center;
  617. padding:10px;
  618. height:12px;
  619. background:{color:second accent};
  620. color:#fff;
  621. margin-right:10px;
  622. }
  623.  
  624. #tagcont{
  625. margin-top:10px;
  626. position:absolute;
  627. width:520px;
  628. background:{color:postbg};
  629. max-width:520px;
  630. display:block;
  631. white-space:nowrap;
  632. padding:10px;
  633. overflow-x:scroll;
  634. }
  635.  
  636. #tagcont::-webkit-scrollbar{
  637. width:1px;
  638. background:{color:bg};
  639. }
  640.  
  641. .tag a{
  642. display:inline-block;
  643. margin-right:4px;
  644. min-width:30px;
  645. font-size:10px;
  646. color:{color:second accent};
  647. }
  648.  
  649. .usericon{
  650. background:{color:second accent};
  651. color:#fff;
  652. width:20px;
  653. height:20px;
  654. padding:10px;
  655. margin-left:-5px;
  656. margin-right:10px;
  657. text-align:center;
  658. line-height:100%;
  659. }
  660.  
  661. .username a{
  662. color:{color:second accent};
  663. padding:6px 8px;
  664. border-bottom:1px solid {color:second accent};
  665. min-width:20px;
  666. height:20px;
  667. }
  668.  
  669. .deactivated:after {
  670. content:'deactivated';
  671. position:absolute;
  672. padding-left:8px;
  673. color:#aaa;
  674. opacity:0;
  675. transition:.4s ease-in-out;
  676. }
  677.  
  678. .deactivated:hover:after {
  679. opacity:1;
  680. }
  681.  
  682. .reblogimg{
  683. max-height:48px;
  684. max-width:48px;
  685. float:left;
  686. margin-top:-8px;
  687. margin-right:15px;
  688. margin-left:-8px;
  689. }
  690.  
  691. .reblogurl{
  692. background:{color:second accent};
  693. color:#fff;
  694. margin-left:3px;
  695. padding:4px;
  696. }
  697.  
  698. .qbox{
  699. background:{color:first accent};
  700. padding:20px;
  701. }
  702.  
  703. #asker{
  704. display:block;
  705. text-transform:uppercase;
  706. margin-bottom:20px;
  707. background:#fff;
  708. text-align:center;
  709. padding:10px;
  710. }
  711.  
  712. #playcont{
  713. padding:10px;
  714. }
  715.  
  716. .playbutton{
  717. position:absolute;
  718. overflow:hidden;
  719. width:33px;
  720. height:30px;
  721. z-index:3;
  722. }
  723.  
  724. .audioinfo{
  725. position:relative;
  726. padding:6px;
  727. text-transform:lowercase;
  728. margin-left:40px;
  729. min-width:60px;
  730. font-size:12px;
  731. font-weight:700;
  732. }
  733.  
  734. #pagcont{
  735. position:fixed;
  736. bottom:20px;
  737. right:400px;
  738. }
  739.  
  740. .pag, .pag a{
  741. margin-right:10px;
  742. margin-left:10px;
  743. }
  744.  
  745. .pag.current_page{
  746. background:#fff;
  747. color:{color:second accent};
  748. font-weight:700;
  749. }
  750.  
  751. .pag a{
  752. display:inline-block;
  753. width:15px;
  754. height:15px;
  755. text-align:center;
  756. padding:5px;
  757. background:{color:second accent};
  758. color:#fff;
  759. }
  760.  
  761. div.pnotes{
  762. width:520px;
  763. padding:10px;
  764. }
  765.  
  766. .pnotes a{
  767. color:#fff;
  768. }
  769.  
  770. ol.notes{
  771. list-style-type:none !important;
  772. margin-left:-40px;
  773. }
  774.  
  775. ol.notes li.note{
  776. min-width:100px;
  777. margin-bottom:10px;
  778. float:left;
  779. padding:5px;
  780. background:linear-gradient(111deg, {color:first accent} 0%, {color:second accent} 71%);
  781. color:#fff;
  782. margin-right:10px;
  783. }
  784.  
  785. .pnotes img.avatar{
  786. display:none;
  787. }
  788.  
  789. #cred a{
  790. position:fixed;
  791. padding:8px;
  792. background:#fff;
  793. text-align:center;
  794. right:10px;
  795. bottom:10px;
  796. min-width:40px;
  797. transition:.5s linear;
  798. }
  799.  
  800. #cred a:hover{
  801. background:{color:first accent};
  802. color:#fff;
  803. }
  804. </style>
  805. <script src="http://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  806.  
  807. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  808. </head>
  809.  
  810. <body>
  811. <div id="sidebar">
  812. <a id="clickbutton" class="t" style="cursor:pointer;"><span class="t lnr lnr-menu"></span><span class="t lnr lnr-cross" style="display:none;"></span></a>
  813.  
  814. <div id="navbar">
  815. <div class="navlink"><a href="/" title="return"><span class="lnr lnr-power-switch"></span></a></div>
  816. <div class="navlink"><a href="/ask" title="message"><span class="lnr lnr-envelope"></span></a></div>
  817. <div class="navlink"><a href="/archive" title="past"><span class="lnr lnr-briefcase"></span></a></div>
  818. </div>
  819. </div>
  820.  
  821. <div id="maindesc">
  822. <div id="blogtitle">{Title}</div>
  823.  
  824. <div id="leftside">
  825. <div id="desc">{Description}</div>
  826. <div id="customcont">
  827. <div class="customlink">
  828. {block:ifLink1}
  829. <a href="{text:Link1URL}">{text:Link1}</a>
  830. {/block:ifLink1}
  831.  
  832. {block:ifLink2}
  833. <a href="{text:Link2URL}">{text:Link2}</a>
  834. {/block:ifLink2}
  835.  
  836. {block:ifLink3}
  837. <a href="{text:Link3URL}">{text:Link3}</a>
  838. {/block:ifLink3}
  839.  
  840. {block:ifLink4}
  841. <a href="{text:Link4URL}">{text:Link4}</a>
  842. {/block:ifLink4}
  843.  
  844. {block:ifLink5}
  845. <a href="{text:Link5URL}">{text:Link5}</a>
  846. {/block:ifLink5}
  847.  
  848. {block:ifLink6}
  849. <a href="{text:Link6URL}">{text:Link6}</a>
  850. {/block:ifLink6}
  851. </div>
  852. </div>
  853.  
  854. <div id="searchbox">
  855. <form action="/search" method="get" class="sfm">
  856. <input type="text" name="q" autocomplete="off" value="{SearchQuery}" id="sf"/>
  857. <input type="submit" value="query" id="sb"/>
  858.  
  859. </form>
  860. </div>
  861. </div><!--end leftside-->
  862.  
  863. {block:ifabout}
  864. <div id="rightside">
  865. <div id="abtcont">
  866. <div id="abthead">Here is your header</div>
  867. <div id="infoabt">
  868. <div id="infoava"><img src="{image:about icon}"/></div>
  869.  
  870. <div id="infodesc">
  871. <div class="infowrap">
  872. <div class="infolbl">blah</div>
  873. <div class="infocont">blah blah</div>
  874. </div>
  875. <div class="infowrap">
  876. <div class="infolbl">blah</div>
  877. <div class="infocont">blah blah</div>
  878. </div>
  879. <div class="infowrap">
  880. <div class="infolbl">blah</div>
  881. <div class="infocont">blah blah</div>
  882. </div>
  883. </div><!--end infodesc-->
  884.  
  885. </div>
  886.  
  887. <div id="abtt">
  888. Fill your information here!
  889. </div><!--end abtt-->
  890. </div><!--end abtcont-->
  891.  
  892. </div><!--end rightside-->
  893. {/block:ifabout}
  894.  
  895. </div><!--end maindesc-->
  896.  
  897. {block:Pagination}
  898. <div id="pagcont">
  899. <div class="pag">
  900. {block:PreviousPage}<a href="{PreviousPage}"><</a>{/block:PreviousPage}
  901. {block:JumpPagination length="5"}
  902. {block:CurrentPage}<span class="current_page">{CurrentPage}</span>{/block:CurrentPage}
  903. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  904. {/block:JumpPagination}
  905. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  906. </div>
  907. </div>
  908. {/block:Pagination}
  909.  
  910. <div id="container">
  911.  
  912. {block:Posts}
  913. <div class="post" id="{PostID}">
  914.  
  915. {block:Text}
  916. {block:Title}<div class="title">{Title}</div>{/block:Title}
  917. {block:NotReblog}<div class="cap">{Body}</div>{/block:NotReblog}
  918.  
  919. {block:RebloggedFrom}
  920. {block:Reblogs}
  921. <div class="reblogheader">
  922. {block:IsActive}
  923. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  924. {/block:IsActive}
  925.  
  926. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  927. </div>
  928.  
  929. <div class="cap">{Body}</div>
  930. {/block:Reblogs}
  931. {/block:RebloggedFrom}
  932.  
  933. {/block:Text}
  934.  
  935. {block:Photo}
  936. <center>
  937. {LinkOpenTag}<div class="photopost"><img src="{PhotoURL-HighRes}"/></div>
  938. {LinkCloseTag}
  939. </center>
  940. {block:NotReblog}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:NotReblog}
  941.  
  942. {block:RebloggedFrom}
  943. {block:Reblogs}
  944. <div class="reblogheader">
  945. {block:IsActive}
  946. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  947. {/block:IsActive}
  948.  
  949. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  950. </div>
  951.  
  952. <div class="cap">{Body}</div>
  953. {/block:Reblogs}
  954. {/block:RebloggedFrom}
  955. {/block:Photo}
  956.  
  957. {block:Photoset}
  958. <div class="photopost">
  959. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  960. </div>
  961.  
  962. {block:NotReblog}
  963. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  964. {/block:NotReblog}
  965.  
  966. {block:RebloggedFrom}
  967. {block:Reblogs}
  968. <div class="reblogheader">
  969. {block:IsActive}
  970. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  971. {/block:IsActive}
  972.  
  973. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  974. </div>
  975.  
  976. <div class="cap">{Body}</div>
  977. {/block:Reblogs}
  978. {/block:RebloggedFrom}
  979. {/block:Photoset}
  980.  
  981. {block:Video}
  982.  
  983. <div class="video">{Video-500}</div>
  984.  
  985. {block:NotReblog}
  986. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  987. {/block:NotReblog}
  988.  
  989. {block:RebloggedFrom}
  990. {block:Reblogs}
  991. <div class="reblogheader">
  992. {block:IsActive}
  993. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  994. {/block:IsActive}
  995.  
  996. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  997. </div>
  998.  
  999. <div class="cap">{Body}</div>
  1000. {/block:Reblogs}
  1001. {/block:RebloggedFrom}
  1002. {/block:Video}
  1003.  
  1004. {block:Quote}
  1005. <div class="cap">
  1006. <div id="dropquote"></div>
  1007. <div id="quote">{Quote}</div>
  1008. {block:Source}<div id="source">{Source}</div>{/block:Source}
  1009. </div>
  1010. {/block:IndexPage}
  1011. {/block:Quote}
  1012.  
  1013. {block:Link}
  1014. <div id="link"><a href="{URL}">{Name}</a></div>
  1015. {block:NotReblog}
  1016. {block:Description}<div class="cap">{Description}</div>{/block:Description}
  1017. {/block:NotReblog}
  1018.  
  1019. {block:RebloggedFrom}
  1020. {block:Reblogs}
  1021. <div class="reblogheader">
  1022. {block:IsActive}
  1023. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  1024. {/block:IsActive}
  1025. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  1026. </div>
  1027.  
  1028. <div class="cap">{Body}</div>
  1029. {/block:Reblogs}
  1030. {/block:RebloggedFrom}
  1031. {/block:Link}
  1032.  
  1033. {block:Chat}
  1034. <div class="chatwrap">
  1035. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1036. <div class="cap">
  1037. <ul class="chat">
  1038. {block:Lines}
  1039. <li class="line_{Alt}"><span class="label">{block:Label}{Label}{/block:Label}</span> {Line}
  1040. {/block:Lines}
  1041. </li>
  1042. </ul>
  1043. </div></div>
  1044. {/block:Chat}
  1045.  
  1046. {block:Audio}
  1047. <div id="playcont">
  1048. <div class="playbutton">{AudioPlayerWhite}</div>
  1049.  
  1050. <div class="audioinfo">
  1051. {block:TrackName}{TrackName}{/block:TrackName}
  1052. </div>
  1053. </div>
  1054.  
  1055. {block:NotReblogged}
  1056. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  1057. {/block:NotReblogged}
  1058.  
  1059. {block:RebloggedFrom}
  1060. {block:Reblogs}
  1061. <div class="cap">
  1062. <div class="reblogheader">
  1063. {block:IsActive}
  1064. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  1065. {/block:IsActive}
  1066.  
  1067. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  1068. </div>
  1069. {Body}</div>
  1070. {/block:Reblogs}
  1071. {/block:RebloggedFrom}
  1072. {/block:Audio}
  1073.  
  1074. {block:Answer}
  1075. <div class="qbox">
  1076. <div id="asker">from: {Asker}</div>
  1077. <div style="color:#fff">{Question}</div>
  1078. </div>
  1079.  
  1080. {block:NotReblog}
  1081. <div class="cap">{Replies}</div>
  1082. {/block:NotReblog}
  1083.  
  1084. {block:RebloggedFrom}
  1085. {block:Reblogs}<div class="reblogheader">
  1086.  
  1087. {block:IsActive}
  1088. <div class="username"><span class="lnr lnr-user usericon"></span><a href="{Permalink}">{Username}</a></div>
  1089. {/block:IsActive}
  1090.  
  1091. {block:IsDeactivated}<div class="username deactivated"><span class="lnr lnr-user usericon"></span>{Username}</div>{/block:IsDeactivated}
  1092. </div>
  1093.  
  1094. <div class="cap">{Body}</div>{/block:Reblogs}
  1095. {/block:RebloggedFrom}
  1096. {/block:Answer}
  1097.  
  1098. {block:IndexPage}
  1099. {block:Date}
  1100. <div class="pinfo">
  1101. <div class="plab"><a href="{Permalink}">{TimeAgo}</a></div>
  1102. <div class="plab">{NoteCountWithLabel}</div>
  1103. </div>
  1104.  
  1105. <div class="reblogcont">
  1106. <div class="controls">
  1107. <a href="{ReblogURL}" target="_blank" title="reblog?" class="reblog">
  1108. <span class="lnr lnr-redo"></span>
  1109. </a>
  1110. <a href="#" class="like" title="like this post">{LikeButton}<span class="lnr lnr-heart"></span>
  1111. </a>
  1112. </div>
  1113. {/block:Date}
  1114.  
  1115. {block:RebloggedFrom}
  1116. <a href="{ReblogParentURL}"><img class="reblogimg" src="{ReblogParentPortraitURL-48}"></a><div style="margin-top:10px;font-size:14px;">Reblogged from <a class="reblogurl" href="{ReblogParentURL}">{ReblogParentName}</a></div>
  1117. {/block:RebloggedFrom}
  1118.  
  1119. {block:NotReblog}<a href="{URL}"><img class="reblogimg" src="{Favicon}"></a><div style="margin-top:10px;font-size:14px;">Posted by <a class="reblogurl" href="{URL}">{Name}</a> </div>{/block:NotReblog}
  1120. </div>
  1121.  
  1122. {/block:IndexPage}
  1123.  
  1124. {block:ContentSource}
  1125. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1126. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1127. {/block:SourceLogo}
  1128. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1129. {/block:ContentSource}
  1130.  
  1131. {block:IndexPage}
  1132. {block:HasTags}
  1133. <div id="tagcont">
  1134. <div class="tag">{block:Tags}<a href="{TagURL}">#{Tag}</a>
  1135. {/block:Tags}</div>
  1136. </div>
  1137. {/block:HasTags}
  1138. {/block:IndexPage}
  1139.  
  1140. {block:PermalinkPage}
  1141. {block:PostNotes}
  1142. <div class="pnotes">
  1143. <ol class="notes">{PostNotes}</ol>
  1144. </div>
  1145. {/block:PostNotes}
  1146. </div>
  1147. {/block:PermalinkPage}
  1148.  
  1149. </div>
  1150. {/block:Posts}
  1151.  
  1152. </div><!--end container-->
  1153.  
  1154. <div id="cred"><a href="http://kuzuriha.tumblr.com" title="theme by kuzuriha">thm.</a></div>
  1155. <script>
  1156. $(document).ready(function(){
  1157. $('.photo-slideshow').pxuPhotoset({
  1158. lightbox: true,
  1159. rounded: false,
  1160. gutter: '3px',
  1161. borderRadius: '0px',
  1162. photoset: '.photo-slideshow',
  1163. photoWrap: '.photo-data',
  1164. photo: '.pxu-photo'
  1165. });
  1166.  
  1167. function flexFrame() {
  1168. $(".cap").each(function() {
  1169. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1170. flexibleFrames($(".capframe"));
  1171. });
  1172. flexibleFrames($(".video"));
  1173. }
  1174.  
  1175. $(document).ready(flexFrame);
  1176. });
  1177.  
  1178. </script>
  1179. </body>
  1180. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement