API tools faq
paste
Advertisement
franzzfu

Theme 16: Sextet

franzzfu
Jul 29th, 2014
2,340
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!----
  9.  
  10. theme16 by franz @ lestranqe.tumblr.com/
  11. DO NOT REMOVE THE CREDIT OR OLD GEORGIE WILL HAVE YOUR SOUL
  12.  
  13. --->
  14.  
  15. <meta name="color:Frame background" content="#f6f6f6"/>
  16. <meta name="color:Container background" content="#ffffff"/>
  17. <meta name="color:Border" content="#e6e6e6"/>
  18. <meta name="color:Frame text" content="#666666"/>
  19. <meta name="color:Container text" content="888888"/>
  20. <meta name="color:Link" content="#b8b8b8"/>
  21. <meta name="color:Hover" content="97b8e9"/>
  22. <meta name="color:Scrollbar" content="#dce7f8"/>
  23. <meta name="color:Scrollbar bg" content="#ffffff"/>
  24.  
  25. <meta name="if:500px posts" content="1"/>
  26.  
  27. <meta name="text:link 1 title" content="link 1"/>
  28. <meta name="text:link 1" content=""/>
  29. <meta name="text:link 2 title" content="link 2"/>
  30. <meta name="text:link 3 title" content="link 3"/>
  31. <meta name="text:link 3" content=""/>
  32. <meta name="text:link 4 title" content="link 4"/>
  33. <meta name="text:link 4" content=""/>
  34. <meta name="text:link 5 title" content="link 5"/>
  35. <meta name="text:link 5" content=""/>
  36. <meta name="text:link 6 title" content="link 6"/>
  37. <meta name="text:link 6" content=""/>
  38. <meta name="text:previous" content="Past"/>
  39. <meta name="text:next" content="Future"/>
  40.  
  41.  
  42. <script type="text/javascript"
  43. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  44. <script>
  45. $(document).ready(function() {
  46. //
  47. $('a.poplight[href^=#]').click(function() {
  48. var popID = $(this).attr('rel'); //Get Popup Name
  49. var popURL = $(this).attr('href'); //Get Popup href to define size
  50. var query= popURL.split('?');
  51. var dim= query[1].split('&');
  52. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  53. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  54. var popMargTop = ($('#' + popID).height() + 80) / 2;
  55. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  56. //Apply Margin to Popup
  57. $('#' + popID).css({
  58. 'margin-top' : -popMargTop,
  59. 'margin-left' : -popMargLeft
  60. });
  61. $('body').append('<div id="fade"></div>');
  62. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  63. return false;
  64. });
  65. $('a.close, #fade').live('click', function() {
  66. $('#fade , .popup_block').fadeOut(function() {
  67. $('#fade, a.close').remove(); //fade them both out
  68. });
  69. return false;
  70. });
  71. });
  72. </script>
  73.  
  74.  
  75. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  76.  
  77. <style>
  78. div#qTip {
  79. padding: 4px;
  80. display: none;
  81. text-align: justify;
  82. position: absolute;
  83. font-size:10px;
  84. line-height:11px;
  85. font-family:baskerville;
  86. font-style:italic;
  87. z-index: 100000;
  88. background-color: transparent;
  89. color: {color:text};
  90. letter-spacing: 2px;
  91. opacity:1;
  92. }
  93. </style>
  94.  
  95.  
  96. <style type="text/css">
  97.  
  98. ::-webkit-scrollbar {width:3px;
  99. height:auto;
  100. background:{color:scrollbar bg};}
  101. ::-webkit-scrollbar-corner {background:{color:scrollbar bg};}
  102. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar};}
  103. ::-webkit-scrollbar-thumb:horizontal {background:{color:scrollbar};}
  104.  
  105.  
  106. /*main structure*/
  107.  
  108.  
  109. body {
  110. background:{color:frame background};
  111. margin:0px;
  112. color:{color:container text};
  113. font-family:baskerville;
  114. font-size:11px;
  115. letter-spacing:1px;
  116. line-height:150%;
  117. }
  118.  
  119. a {
  120. text-decoration:none;
  121. outline:none;
  122. -moz-outline-style:none;
  123. color:{color:link};
  124. -webkit-transition:all .5s ease-in-out;
  125. -moz-transition:all .5s ease-in-out;
  126. transition:all .5s ease-in-out;
  127. }
  128.  
  129. a:hover {
  130. color:{color:hover};
  131. -webkit-transition:all .5s ease-in-out;
  132. -moz-transition:all .5s ease-in-out;
  133. transition:all .5s ease-in-out;
  134. }
  135.  
  136. img {
  137. {block:ifnot500pxposts}
  138. max-width:400px;
  139. {/block:ifnot500pxposts}
  140. {block:if500pxposts}
  141. max-width:500px;
  142. {/block:if500pxposts}
  143. }
  144.  
  145. blockquote {
  146. {block:ifnot500pxposts}
  147. max-width:290px;
  148. {/block:ifnot500pxposts}
  149. {block:if500pxposts}
  150. max-width:390px;
  151. {/block:if500pxposts}
  152. padding-left:5px;
  153. }
  154.  
  155. blockquote blockquote {
  156. {block:ifnot500pxposts}
  157. max-width:285px;
  158. {/block:ifnot500pxposts}
  159. {block:if500pxposts}
  160. max-width:285px;
  161. {/block:if500pxposts}
  162. padding-left:5px;
  163. }
  164.  
  165. #posttitle {
  166. {block:ifnot500pxposts}
  167. width:400px;
  168. {/block:ifnot500pxposts}
  169. {block:if500pxposts}
  170. width:500px;
  171. {/block:if500pxposts}
  172. font-size:15px;
  173. font-style:italic;
  174. text-align:right;
  175. letter-spacing:2px;
  176. line-height:130%;
  177. padding:8px 0;
  178. }
  179.  
  180. #text {
  181. padding:5px;
  182. }
  183.  
  184. #entries {
  185. background-color:{color:container background};
  186. position:fixed;
  187. width:90%;
  188. height:70%;
  189. top:15%;
  190. left:5%;
  191. border:3px double {color:border};
  192. text-align:left;
  193. overflow:auto;
  194. }
  195.  
  196. #postwrap {
  197. {block:ifnot500pxposts}
  198. width:700px;
  199. {/block:ifnot500pxposts}
  200. {block:if500pxposts}
  201. width:900px;
  202. {/block:if500pxposts}
  203. margin-left:auto;
  204. margin-right:auto;
  205. }
  206.  
  207. #post {
  208. {block:ifnot500pxposts}
  209. width:400px;
  210. {/block:ifnot500pxposts}
  211. {block:if500pxposts}
  212. width:500px;
  213. {/block:if500pxposts}
  214. min-height:200px;
  215. margin-top:90px;
  216. margin-bottom:90px;
  217. -ms-word-break: break-all;
  218. word-break: break-all;
  219. word-break: break-word;
  220. -webkit-hyphens: auto;
  221. -moz-hyphens: auto;
  222. -ms-hyphens: auto;
  223. hyphens: auto;
  224. }
  225.  
  226.  
  227. /*topbar*/
  228.  
  229.  
  230. #topbar {
  231. position:fixed;
  232. width:90%;
  233. height:15%;
  234. left:5%;
  235. text-align:center;
  236. }
  237.  
  238. #title {
  239. position:fixed;
  240. top:5%;
  241. right:4%;
  242. padding:15px;
  243. font-size:28px;
  244. font-style:italic;
  245. text-transform:lowercase;
  246. text-align:center;
  247. letter-spacing:4px;
  248. }
  249.  
  250. #title a {
  251. color:{color:frame text};
  252. -webkit-transition:all .5s ease-in-out;
  253. -moz-transition:all .5s ease-in-out;
  254. transition:all .5s ease-in-out;
  255. }
  256.  
  257. #title a:hover {
  258. color:{color:hover};
  259. -webkit-transition:all .5s ease-in-out;
  260. -moz-transition:all .5s ease-in-out;
  261. transition:all .5s ease-in-out;
  262. }
  263.  
  264. .links {
  265. position:fixed;
  266. top:11%;
  267. right:4%;
  268. font-size:9px;
  269. text-transform:uppercase;
  270. }
  271.  
  272. .links a {
  273. color:{color:frame text};
  274. margin: 0 15px;
  275. display:inline-block;
  276. }
  277.  
  278. .links a:hover {
  279. color:{color:hover};
  280. }
  281.  
  282. /*bottombar*/
  283.  
  284.  
  285. #bottombar {
  286. position:fixed;
  287. width:90%;
  288. height:15%;
  289. left:5%;
  290. top:85%;
  291. }
  292.  
  293. #description {
  294. color:{color:frame text};
  295. width:450px;
  296. margin-top:30px;
  297. margin-left:8px;
  298. font-style:italic;
  299. text-align:justify;
  300. }
  301.  
  302.  
  303. /*post info and tags and captions*/
  304.  
  305.  
  306. #info {
  307. position:absolute;
  308. {block:ifnot500pxposts}
  309. margin-left:430px;
  310. width:300px;
  311. {/block:ifnot500pxposts}
  312. {block:if500pxposts}
  313. margin-left:530px;
  314. width:400px;
  315. {/block:if500pxposts}
  316. font-size:9px;
  317. letter-spacing:2px;
  318. text-align:left;
  319. text-transform:uppercase;
  320. padding:10px 5px;
  321. line-height:150%;
  322. border-bottom:1px solid {color:border};
  323. }
  324.  
  325. #tags {
  326. {block:ifnot500pxposts}
  327. width:300px;
  328. {/block:ifnot500pxposts}
  329. {block:if500pxposts}
  330. width:400px;
  331. {/block:if500pxposts}
  332. font-size:8px;
  333. letter-spacing:2px;
  334. text-transform:uppercase;
  335. text-align:left;
  336. padding:5px;
  337. opacity:0;
  338. -webkit-transition:all .5s ease-in-out;
  339. -moz-transition:all .5s ease-in-out;
  340. transition:all .5s ease-in-out;
  341. }
  342.  
  343. #post:hover #tags {
  344. opacity:1;
  345. -webkit-transition:all .5s ease-in-out;
  346. -moz-transition:all .5s ease-in-out;
  347. transition:all .5s ease-in-out;
  348. }
  349.  
  350. #caption {
  351. position:absolute;
  352. {block:ifnot500pxposts}
  353. width:300px;
  354. max-height:175px;
  355. margin-left:430px;
  356. {/block:ifnot500pxposts}
  357. {block:if500pxposts}
  358. width:400px;
  359. max-height:185px;
  360. margin-left:530px;
  361. {/block:if500pxposts}
  362. overflow-y:auto;
  363. text-align:left;
  364. padding:10px 5px;
  365. margin-top:33px;
  366. font-size:10px;
  367. }
  368.  
  369.  
  370. /*quote*/
  371.  
  372.  
  373. .quote {
  374. font-size:16px;
  375. line-height:135%;
  376. margin-top:15px;
  377. font-family:baskerville;
  378. font-style:italic;
  379. letter-spacing:2px;
  380. text-align:justify;
  381. }
  382.  
  383. .source {
  384. text-align:right;
  385. font-size:9px;
  386. text-transform:uppercase;
  387. letter-spacing:2px;
  388. margin-top:8px;
  389. padding:10px 0;
  390. }
  391.  
  392.  
  393. /*chat*/
  394.  
  395. .chat ol {
  396. padding:5px;
  397. line-height:150%;
  398. list-style:none;
  399. }
  400.  
  401. .line {
  402. padding:10px;
  403. font-style:italic;
  404. }
  405.  
  406. .label {
  407. text-transform:uppercase;
  408. font-style:normal;
  409. font-size:10px;
  410. letter-spacing:2px;
  411. }
  412.  
  413.  
  414. /*Ask*/
  415.  
  416. .ask{
  417. padding:10px 5px;
  418. font-size:9px;
  419. letter-spacing:2px;
  420. text-transform:uppercase;
  421. display:inline-block;
  422. }
  423.  
  424. .question {
  425. padding:10px 5px;
  426. font-size:12px;
  427. font-style:italic;
  428. line-height:150%;
  429. display:inline-block;
  430. }
  431.  
  432. .answer {
  433. padding:0 20px 20px 20px;
  434. text-align:justify;
  435. }
  436.  
  437.  
  438. /*audio*/
  439.  
  440.  
  441. .playbutton {
  442. width:20px;
  443. height:30px;
  444. overflow:hidden;
  445. position:relative;
  446. z-index:1000;
  447. margin:10px 19px 8px 11px;
  448. }
  449.  
  450. .playbox {
  451. background-color:#fff;
  452. -webkit-border-radius:50px;
  453. -moz-border-radius:50px;
  454. border-radius:50px;
  455. border:1px solid {color:border};
  456. box-shadow: 2px 2px 5px #888888;
  457. position:absolute;
  458. margin-left:10px;
  459. }
  460.  
  461. .audioinfo {
  462. {block:ifnot500pxposts}
  463. width:310px;
  464. {/block:ifnot500pxposts}
  465. {block:if500pxposts}
  466. width:410px;
  467. {/block:if500pxposts}
  468. padding:10px 5px 10px 80px;
  469. }
  470.  
  471. .track {
  472. font-size:12px;
  473. font-style:italic;
  474. letter-spacing:2px;
  475. }
  476.  
  477. .artist {
  478. font-size:8px;
  479. text-transform:uppercase;
  480. line-height:20px;
  481. }
  482.  
  483.  
  484. /*permalink page*/
  485.  
  486. .notes {
  487. {block:ifnot500pxposts}
  488. width:380px;
  489. {/block:ifnot500pxposts}
  490. {block:if500pxposts}
  491. width:480px;
  492. {/block:if500pxposts}
  493. text-align:left;
  494. }
  495. .notes ol {
  496. margin-top:-60px;
  497. margin-left:-40px;
  498. text-transform:uppercase;
  499. font-size:7px;
  500. letter-spacing:2px;
  501. }
  502.  
  503. .notes li {
  504. list-style-type:none;
  505. padding:8px;
  506. }
  507.  
  508. .notes img {
  509. display:none!important;
  510. }
  511.  
  512.  
  513. /*pagination*/
  514.  
  515.  
  516. #pagi {
  517. {block:ifnot500pxposts}
  518. width:400px;
  519. {/block:ifnot500pxposts}
  520. width:500px;
  521. {block:if500pxposts}
  522. {/block:if500pxposts}
  523. margin-bottom:80px;
  524. font-size:14px;
  525. font-style:italic;
  526. letter-spacing:2px;
  527. text-transform:lowercase;
  528. text-align:center;
  529. margin-left:auto;
  530. margin-right:auto;
  531. }
  532.  
  533. #pagi a {
  534. color:{color:link};
  535. }
  536.  
  537. #pagi a:hover {
  538. color:{color:hover};
  539. }
  540.  
  541. /*credit*/
  542.  
  543.  
  544. #credit {
  545. position:fixed;
  546. float:right;
  547. bottom:5px;
  548. right:5px;
  549. background:transparent;
  550. font-size:20px;
  551. text-align:right;
  552. }
  553.  
  554. #credit a {
  555. color:{color:frame text};
  556. }
  557.  
  558. #logo {
  559. font-size:10px;
  560. font-family:baskerville;
  561. font-style:italic;
  562. opacity:0;
  563. -webkit-transition:all .5s ease-in-out;
  564. -moz-transition:all .5s ease-in-out;
  565. transition:all .5s ease-in-out;
  566. }
  567.  
  568. #credit:hover #logo {
  569. opacity:1;
  570. -webkit-transition:all .5s ease-in-out;
  571. -moz-transition:all .5s ease-in-out;
  572. transition:all .5s ease-in-out;
  573. }
  574.  
  575.  
  576. /*pop-up*/
  577.  
  578.  
  579. .popup_block {
  580. display:none;
  581. background:#fff;
  582. padding:20px;
  583. float:left;
  584. position:fixed;
  585. top:50%;left:52%;
  586. z-index: 99999;
  587. }
  588.  
  589. *html #fade {
  590. position: absolute;
  591. }
  592.  
  593. *html .popup_block {
  594. position: absolute;
  595. }
  596.  
  597. #fade {
  598. display:none;
  599. position:fixed;
  600. left:5%;
  601. top:15%;
  602. width:90%;
  603. height:70%;
  604. z-index:9999;
  605. border:3px double {color:border};
  606. background:{color:container background};
  607. opacity:1
  608. }
  609.  
  610.  
  611. {CustomCSS}
  612.  
  613. </style>
  614. </head>
  615.  
  616.  
  617. <body>
  618.  
  619. <div id="topbar">
  620. <div id="title"><a href="/">{Title};</a></div>
  621. <div class="links">
  622. <a href="{text:link 1}">{text:link 1 title}</a>
  623. <a href="#?w=500" rel="box1" class="poplight">{text:link 2 title}</a>
  624. <a href="{text:link 3}">{text:link 3 title}</a>
  625. <a href="{text:link 4}">{text:link 4 title}</a>
  626. {block:iflink5}<a href="{text:link 5}">{text:link 5 title}</a>{/block:iflink5}
  627. {block:iflink6}<a href="{text:link 6}">{text:link 6 title}</a>{/block:iflink6}
  628. </div>
  629. </div>
  630.  
  631. <div id="entries">
  632.  
  633. {block:Posts}
  634.  
  635. <div id="postwrap">
  636.  
  637. <div id="post">
  638.  
  639. {block:Date}
  640. <div id="info">
  641. <span style="font-weight:bold"><a href="{Permalink}">{DayOfMonth} {ShortMonth}</a></span>{block:NoteCount} / <a href="{Permalink}">{NoteCount}+</a>{/block:NoteCount} / <a href="{ReblogURL}" target="_blank">Reblog</a>{block:RebloggedFrom} / <a href="{ReblogParentURL}"title="{ReblogParentName}">Via</a> / <a href="{ReblogRootURL}" title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}
  642. </div>
  643. {/block:Date}
  644.  
  645. {block:Text}{block:Title}<div id="posttitle">{Title}</div>{/block:Title}<div id="text">{Body}</div>{/block:Text}
  646.  
  647. {block:Photo}
  648. {block:ifnot500pxposts}
  649. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  650. {LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
  651. {/block:ifnot500pxposts}
  652. {block:if500pxposts}
  653. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  654. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  655. {/block:if500pxposts}
  656. {/block:Photo}
  657.  
  658. {block:Photoset}
  659. {block:ifnot500pxposts}
  660. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  661. {Photoset-400}
  662. {/block:ifnot500pxposts}
  663. {block:if500pxposts}
  664. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  665. {Photoset-500}
  666. {/block:if500pxposts}
  667. {/block:Photoset}
  668.  
  669. {block:Quote}
  670. <div class="quote">{Quote}</div>
  671. {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
  672. {/block:Quote}
  673.  
  674. {block:Link}<div id="posttitle"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}{/block:Link}
  675.  
  676. {block:Chat}
  677. {block:Title}<div id="posttitle">{Title}</div>{/block:Title}
  678. <div class="chat"><ol>{block:Lines}<li class="line">{block:Label}<span class="label">{Label} </span>{/block:Label}{Line}</li>{/block:Lines}</ol></div>
  679. {/block:Chat}
  680.  
  681. {block:Video}
  682. {block:ifnot500pxposts}
  683. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  684. {Video-400}
  685. {/block:ifnot500pxposts}
  686. {block:if500pxposts}
  687. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  688. {Video-500}
  689. {/block:if500pxposts}
  690. {/block:Video}
  691.  
  692. {block:Answer}
  693. <div class="ask">{Asker}</u> mused:</div>
  694. <div class="question">{Question}</div>
  695. <div class="answer">{Answer}</div>
  696. {/block:Answer}
  697.  
  698. {block:Audio}
  699. <div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
  700. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  701. <div class="audioinfo">
  702. {block:TrackName}<div class="track">{TrackName}</div>{/block:TrackName}
  703. {block:Artist}<div class="artist">{Artist}</div>{/block:Artist}
  704. </div>
  705. {/block:Audio}
  706.  
  707. {block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  708.  
  709. {block:ContentSource}
  710. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  711. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  712. {/block:SourceLogo}
  713. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  714. {/block:ContentSource}
  715.  
  716. </div>
  717.  
  718. {block:PostNotes}
  719. <div class="notes">{PostNotes}</div>
  720. {/block:PostNotes}
  721.  
  722. </div>
  723.  
  724. {/block:Posts}
  725.  
  726. {block:Pagination}
  727. <div id="pagi">
  728. {block:PreviousPage}<a href="{PreviousPage}">&larr; {text:previous}</a>
  729. </u>&nbsp;&nbsp;{/block:PreviousPage}
  730. <span style="font-size:9px;font-style:normal;text-transform:uppercase;">{CurrentPage}&nbsp;of&nbsp;{TotalPages}</span>
  731. {block:NextPage} &nbsp;&nbsp;<a href="{NextPage}">{text:next} &rarr;</a></u>{/block:NextPage}
  732. {/block:Pagination}
  733. </div>
  734. </div>
  735.  
  736. <div id="bottombar">
  737. <div id="description">{Description}</div>
  738. </div>
  739.  
  740. <div id="credit">
  741. <div id="logo">franztheme</div>
  742. <a href="http://lestranqe.tumblr.com">☺</a>
  743. </div>
  744.  
  745. </body>
  746.  
  747. <div id="box1" class="popup_block">
  748. <iframe frameborder="0" height="200" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" width="100%"></iframe>
  749. </div>
  750.  
  751. </html>
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!