API tools faq
paste
Advertisement
franzzfu

Theme 08: Haunted

franzzfu
Mar 6th, 2014
6,029
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.45 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. theme08 by franz @ lestranqe.tumblr.com/
  11. DO NOT REMOVE THE CREDIT OR YOU'LL DIE WITHOUT EVER BEING KISSED.
  12.  
  13. --->
  14.  
  15. <meta name="color:Background" content="#ffffff"/>
  16. <meta name="color:Text" content="#838282"/>
  17. <meta name="color:Link" content="#b8b8b8"/>
  18. <meta name="color:Hover" content=""/>
  19. <meta name="color:Title" content=""/>
  20. <meta name="color:Border" content="#e6e6e6"/>
  21. <meta name="color:Scrollbar" content="#666666"/>
  22. <meta name="color:Scrollbar bg" content="#f7f7f7"/>
  23.  
  24. <meta name="if:500px posts" content="1"/>
  25. <meta name="if:Hover sidebars" content="1"/>
  26.  
  27. <meta name="text:second title" content=""/>
  28. <meta name="text:link 1 title" content="link1"/>
  29. <meta name="text:link 1" content=""/>
  30. <meta name="text:link 2 title" content="link2"/>
  31. <meta name="text:link 2" content=""/>
  32. <meta name="text:link 3 title" content="link3"/>
  33. <meta name="text:link 3" content=""/>
  34. <meta name="text:link 4 title" content="link4"/>
  35. <meta name="text:link 4" content=""/>
  36. <meta name="text:link 5 title" content="link5"/>
  37. <meta name="text:link 5" content=""/>
  38. <meta name="text:link 6 title" content="link6"/>
  39. <meta name="text:link 6" content=""/>
  40.  
  41.  
  42. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  43.  
  44. <style>
  45. div#qTip {
  46. padding: 5px;
  47. display: none;
  48. text-align: center;
  49. position: absolute;
  50. font-size:8px;
  51. line-height:9px;
  52. font-family:helvetica;
  53. z-index: 1000;
  54. border: 1px solid {color:border};
  55. background-color: {color:background};
  56. color: {color:text};
  57. text-transform:uppercase;
  58. letter-spacing: 2px;
  59. opacity:0.8;}
  60. </style>
  61.  
  62.  
  63. <link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  64.  
  65.  
  66. <style type="text/css">
  67.  
  68. ::-webkit-scrollbar {width:5px;
  69. height:auto;
  70. background:{color:scrollbar bg};}
  71. ::-webkit-scrollbar-corner {background:{color:scrollbar bg};}
  72. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar};}
  73. ::-webkit-scrollbar-thumb:horizontal {background:{color:scrollbar};}
  74.  
  75.  
  76. /*main structure*/
  77.  
  78.  
  79. body {
  80. background:{color:background};
  81. margin:0px;
  82. color:{color:text};
  83. font-family:helvetica;
  84. font-size:10px;
  85. letter-spacing:1px;
  86. line-height:180%;
  87. }
  88.  
  89. a {
  90. text-decoration:none;
  91. outline:none;
  92. -moz-outline-style:none;
  93. color:{color:link};
  94. -webkit-transition:all .5s ease-in-out;
  95. -moz-transition:all .5s ease-in-out;
  96. transition:all .5s ease-in-out;
  97. }
  98.  
  99. a:hover {
  100. color:{color:hover};
  101. -webkit-transition:all 1s ease-in-out;
  102. -moz-transition:all 1s ease-in-out;
  103. transition:all 1s ease-in-out;
  104. }
  105.  
  106. img {
  107. {block:ifnot500pxposts}
  108. max-width:400px;
  109. {/block:ifnot500pxposts}
  110. border:none;
  111. }
  112.  
  113. blockquote {
  114. padding-left:5px;
  115. border-left:0px solid;
  116. }
  117.  
  118. blockquote blockquote {
  119. padding-left:5px;
  120. border-left:0px solid;
  121. }
  122.  
  123. #posttitle {
  124. text-align:center;
  125. font-family:'Raleway', sans-serif;
  126. font-size:17px;
  127. letter-spacing:3px;
  128. text-transform:uppercase;
  129. }
  130.  
  131. #wrapper {
  132. background-color:{color:background};
  133. {block:ifnot500pxposts}
  134. width:500px;
  135. {/block:ifnot500pxposts}
  136. {block:if500pxposts}
  137. width:600px;
  138. {/block:if500pxposts}
  139. margin: 0 auto 0 auto;
  140. text-align: center;
  141. }
  142.  
  143. #entries {
  144. padding:30px;
  145. {block:ifnot500pxposts}
  146. width:400px;
  147. {/block:ifnot500pxposts}
  148. {block:if500pxposts}
  149. width:500px;
  150. {/block:if500pxposts}
  151. margin-left:auto;
  152. margin-right:auto;
  153. margin-top:50px;
  154. }
  155.  
  156. #post {
  157. {block:ifnot500pxposts}
  158. max-width:400px;
  159. {/block:ifnot500pxposts}
  160. {block:if500pxposts}
  161. max-width:500px;
  162. {/block:if500pxposts}
  163. width:100%;
  164. margin-bottom:80px;
  165. text-align:left;
  166. -ms-word-break: break-all;
  167. word-break: break-all;
  168. word-break: break-word;
  169. -webkit-hyphens: auto;
  170. -moz-hyphens: auto;
  171. -ms-hyphens: auto;
  172. hyphens: auto;
  173. }
  174.  
  175.  
  176. /*topbar*/
  177.  
  178.  
  179. #topbar {
  180. width:500px;
  181. margin-top:80px;
  182. margin-left:auto;
  183. margin-right:auto;
  184. }
  185.  
  186. #title {
  187. font-family:'Raleway', sans-serif;
  188. font-size:20px;
  189. letter-spacing:3px;
  190. text-transform:uppercase;
  191. line-height:150%;
  192. color:{color:title};
  193. padding:10px;
  194. border-bottom:1px solid {color:border};
  195. }
  196.  
  197. {block:ifsecondtitle}
  198. #secondtitle {
  199. font-size:10px;
  200. letter-spacing:2px;
  201. text-transform:lowercase;
  202. line-height:150%;
  203. padding:15px 10px 0px;
  204. margin:auto;
  205. opacity:0;
  206. -webkit-transition:all .5s ease-in-out;
  207. -moz-transition:all .5s ease-in-out;
  208. transition:all .5s ease-in-out;
  209. }
  210. {/block:ifsecondtitle}
  211.  
  212. {block:ifsecondtitle}
  213. #topbar:hover #secondtitle {
  214. opacity:1;
  215. -webkit-transition:all 1s ease-in-out;
  216. -moz-transition:all 1s ease-in-out;
  217. transition:all 1s ease-in-out;
  218. }
  219. {/block:ifsecondtitle}
  220.  
  221.  
  222. /*sidebars*/
  223.  
  224.  
  225. #leftsidebar {
  226. width:150px;
  227. margin-left:-210px;
  228. margin-top:70px;
  229. position:fixed;
  230. }
  231.  
  232. #description {
  233. margin-top:88px; /*this is where you adjust the height of your description. enlarge the number to make it lower*/
  234. padding-right:15px;
  235. line-height:150%;
  236. font-size:11px;
  237. font-style:italic;
  238. letter-spacing:1px;
  239. text-align:right;
  240. position:absolute;
  241. {block:ifhoversidebars}
  242. opacity:0;
  243. -webkit-transition:all .5s ease-in-out;
  244. -moz-transition:all .5s ease-in-out;
  245. transition:all .5s ease-in-out;
  246. {/block:ifhoversidebars}
  247. }
  248.  
  249. #leftsidebar:hover #description {
  250. opacity:1;
  251. -webkit-transition:all .7s ease-in-out;
  252. -moz-transition:all .7s ease-in-out;
  253. transition:all .7s ease-in-out;
  254. }
  255.  
  256. #leftdivider {
  257. margin-left:150px;
  258. opacity:.8;
  259. position:absolute;
  260. }
  261.  
  262. #rightsidebar {
  263. width:150px;
  264. {block:ifnot500pxposts}
  265. margin-left:450px;
  266. {/block:ifnot500pxposts}
  267. {block:if500pxposts}
  268. margin-left:550px;
  269. {/block:if500pxposts}
  270. margin-top:70px;
  271. position:fixed;
  272. }
  273.  
  274. #rightdivider {
  275. opacity:.8;
  276. position:absolute;
  277. }
  278.  
  279. #links {
  280. margin-top:113px;
  281. {block:iflink4}
  282. margin-top:100px;
  283. {/block:iflink4}
  284. {block:iflink5}
  285. margin-top:86px;
  286. {/block:iflink5}
  287. {block:iflink6}
  288. margin-top:72px;
  289. {/block:iflink6}
  290. text-align:left;
  291. text-transform:uppercase;
  292. line-height:200%;
  293. font-family:'Raleway', sans-serif;
  294. font-size:11px;
  295. letter-spacing:1px;
  296. padding-left:25px;
  297. position:absolute;
  298. {block:ifhoversidebars}
  299. opacity:0;
  300. -webkit-transition:all .5s ease-in-out;
  301. -moz-transition:all .5s ease-in-out;
  302. transition:all .5s ease-in-out;
  303. {/block:ifhoversidebars}
  304. }
  305.  
  306. #rightsidebar:hover #links {
  307. opacity:1;
  308. -webkit-transition:all .7s ease-in-out;
  309. -moz-transition:all .7s ease-in-out;
  310. transition:all .7s ease-in-out;
  311. }
  312.  
  313. #links a {
  314. display:block;
  315. padding:2px 0;
  316. width:150px;
  317. color:{color:link};
  318. -webkit-transition:all .5s ease-in-out;
  319. -moz-transition:all .5s ease-in-out;
  320. transition:all .5s ease-in-out;
  321. }
  322.  
  323. #links a:hover {
  324. letter-spacing:10px;
  325. color:{color:hover};
  326. -webkit-transition:all .5s ease-in-out;
  327. -moz-transition:all .5s ease-in-out;
  328. transition:all .5s ease-in-out;
  329. }
  330.  
  331.  
  332. /*post info and tags*/
  333.  
  334.  
  335. #info {
  336. border-top:1px solid {color:border};
  337. margin-top:15px;
  338. font-size:8px;
  339. text-align:left;
  340. text-transform:uppercase;
  341. letter-spacing:2px;
  342. padding-top:15px;
  343. line-height:150%;
  344. }
  345.  
  346. .sources {
  347. float:right;
  348. }
  349.  
  350. #tags {
  351. text-transform:uppercase;
  352. font-size:8px;
  353. text-align:left;
  354. padding-top:10px;
  355. line-height:150%;
  356. opacity:0;
  357. -webkit-transition:all .5s ease-in-out;
  358. -moz-transition:all .5s ease-in-out;
  359. transition:all .5s ease-in-out;
  360. }
  361.  
  362. #post:hover #tags {
  363. opacity:1;
  364. -webkit-transition:all 1s ease-in-out;
  365. -moz-transition:all 1s ease-in-out;
  366. transition:all 1s ease-in-out;
  367. }
  368.  
  369.  
  370. /*quote*/
  371.  
  372.  
  373. .quote {
  374. text-align:center;
  375. font-size:20px;
  376. line-height:130%;
  377. font-family:'Raleway', sans-serif;
  378. }
  379.  
  380. .source {
  381. text-align:center;
  382. font-size:10px;
  383. margin-top:13px;
  384. }
  385.  
  386.  
  387. /*audio*/
  388.  
  389.  
  390. .audio {
  391. height:100px;
  392. padding:5px;
  393. margin-bottom:5px;
  394. }
  395.  
  396. .audio-album {
  397. position:absolute;
  398. width:100px;
  399. }
  400.  
  401. .audio-player {
  402. opacity:.5;
  403. width:28px;
  404. height:38px;
  405. overflow:hidden;
  406. position:absolute;
  407. z-index:2;
  408. margin-left:35px;
  409. margin-top:35px;
  410. }
  411.  
  412. .audio-info {
  413. margin-top:0px;
  414. margin-left:120px;
  415. position:relative;
  416. padding:5px;
  417. text-align:left;
  418. font-family:'Raleway', sans-serif;
  419. font-size:11px;
  420. line-height:200%;
  421. }
  422.  
  423.  
  424. /*permalinks page*/
  425.  
  426.  
  427. ol.notes {
  428. padding-left:6%;
  429. padding-bottom:2%;
  430. width:90%;
  431. text-align:center;
  432. font-style:italic;
  433. list-style-type:lower-roman;
  434. }
  435.  
  436. ol.notes li.note{
  437. border-bottom:1px solid {color:border};
  438. padding:2%;
  439. }
  440.  
  441. ol.notes li.note img.avatar{
  442. width:0px;
  443. height:0px;
  444. }
  445.  
  446.  
  447. /*pagination*/
  448.  
  449.  
  450. #pagi {
  451. margin-top:-20px;
  452. margin-bottom:50px;
  453. font-size:11px;
  454. text-transform:uppercase;
  455. letter-spacing:2px;
  456. text-align:center;
  457. }
  458.  
  459. #pagi a {
  460. color:{color:link};
  461. -webkit-transition:all .5s ease-in-out;
  462. -moz-transition:all .5s ease-in-out;
  463. transition:all .5s ease-in-out;
  464. }
  465.  
  466. #pagi a:hover {
  467. color:{color:hover};
  468. -webkit-transition:all 1s ease-in-out;
  469. -moz-transition:all 1s ease-in-out;
  470. transition:all 1s ease-in-out;
  471. }
  472.  
  473.  
  474. /*credit*/
  475.  
  476.  
  477. #credit {
  478. position:fixed;
  479. float:right;
  480. opacity:1;
  481. bottom:5px;
  482. right:5px;
  483. padding:3px;
  484. border:1px solid {color:text};
  485. background-color:{color:background};
  486. font-size:8px;
  487. text-transform:uppercase;
  488. font-family:times;
  489. }
  490.  
  491. #credit a {
  492. color:{color:text};
  493. -webkit-transition:all .5s ease-in-out;
  494. -moz-transition:all .5s ease-in-out;
  495. transition:all .5s ease-in-out;
  496. }
  497.  
  498. #credit a:hover {
  499. color:{color:hover};
  500. -webkit-transition:all 1s ease-in-out;
  501. -moz-transition:all 1s ease-in-out;
  502. transition:all 1s ease-in-out;
  503. }
  504.  
  505.  
  506. {CustomCSS}
  507.  
  508. </style>
  509. </head>
  510.  
  511.  
  512. <body>
  513.  
  514. <div id="wrapper">
  515.  
  516. <div id="topbar">
  517. <div id="title">{Title}</div>
  518. {block:IfSecondTitle}<div id="secondtitle">{text:second title}</div>{/block:IfSecondTitle}
  519. </div>
  520.  
  521.  
  522.  
  523. <div id="entries">
  524.  
  525. <div id="leftsidebar">
  526. <div id="description">{Description}</div>
  527. <div id="leftdivider"><img src="http://static.tumblr.com/wyul8xf/iYHn1yb79/sidebar1.png"></div>
  528. </div>
  529.  
  530. <div id="rightsidebar">
  531. <div id="rightdivider"><img src="http://static.tumblr.com/wyul8xf/ommn1yb8j/sidebar2.png"></div>
  532. <div id="links">
  533. <a href="{text:link 1}">{text:link 1 title}</a>
  534. <a href="{text:link 2}">{text:link 2 title}</a>
  535. <a href="{text:link 3}">{text:link 3 title}</a>
  536. {block:IfLink4}<a href="{text:link 4}">{text:link 4 title}</a>{/block:IfLink4}
  537. {block:IfLink5}<a href="{text:link 5}">{text:link 5 title}</a>{/block:IfLink5}
  538. {block:IfLink6}<a href="{text:link 6}">{text:link 6 title}</a>{/block:IfLink6}
  539. </div>
  540.  
  541. </div>
  542.  
  543. {block:Posts}
  544. <div id="post">
  545.  
  546. {block:Text}<div id="posttitle">{block:Title}{Title}{/block:Title}</div>{Body}{/block:Text}
  547.  
  548. {block:Photo}
  549. {block:ifnot500pxposts}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:ifnot500pxposts}
  550. {block:if500pxposts}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:if500pxposts}
  551. {/block:Photo}
  552.  
  553. {block:Photoset}
  554. {block:ifnot500pxposts}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:ifnot500pxposts}
  555. {block:if500pxposts}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:if500pxposts}
  556. {/block:Photoset}
  557.  
  558. {block:Quote}
  559. <div class="quote">{Quote}</div>
  560. {block:Source}<div class="source">-&nbsp;{Source}&nbsp;-</div>{/block:Source}
  561. {/block:Quote}
  562.  
  563. {block:Link}<div id="posttitle"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}{/block:Link}
  564.  
  565. {block:Chat}{block:Title}<div id="posttitle">{Title}</div>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  566.  
  567. {block:Video}
  568. {block:ifnot500pxposts}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:ifnot500pxposts}
  569. {block:if500pxposts}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:if500pxposts}
  570. {/block:Video}
  571.  
  572. {block:Answer}
  573. <div style="text-align:right;padding:10px;border-bottom:1px solid {color:border}">{Asker}</u> whispered<br><span style="font-size:12px;font-style:italic">{Question}</span></div>
  574. <br>
  575. <div style="padding:5px 10px">{Answer}</div>
  576. {/block:Answer}
  577.  
  578. {block:Audio}
  579. <div class="audio">
  580. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  581. <div class="audio-player">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div>
  582. <div class="audio-info">
  583. {block:TrackName}{TrackName}<br>{/block:TrackName}
  584. {block:Artist}{Artist}<br>{/block:Artist}
  585. {block:Album}{Album}<br>{/block:Album}
  586. {playcountwithlabel}
  587. </div></div>
  588. {/block:Audio}
  589.  
  590. <div id="info">
  591. {block:Date}{Month} {DayOfMonth}{Dayofmonthsuffix}{/block:Date} | <a href="{Permalink}">{NoteCountwithLabel}</a> | <a href="{ReblogURL}" target="_blank">Reblog</a>
  592. <div class="sources">{block:RebloggedFrom}<a href="{ReblogParentURL}"title="{ReblogParentName}">via</a> | <a href="{ReblogRootURL}"title="{ReblogRootName}">Source</a>{/block:RebloggedFrom}</div>
  593. </div>
  594.  
  595. <div id="tags">
  596. {block:HasTags}{block:Tags}#&nbsp;<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</div>
  597. </div>
  598.  
  599. {block:PostNotes}{PostNotes}{/block:PostNotes}
  600. {/block:Posts}
  601. </div>
  602.  
  603.  
  604. {block:Pagination}
  605. <div id="pagi">
  606. {block:PreviousPage}
  607. <a href="{PreviousPage}">&larr; Back </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  608. {/block:PreviousPage}
  609. {block:NextPage}
  610. <a href="{NextPage}"> Forth &rarr;</a>
  611. {/block:NextPage}
  612. </div>
  613. {/block:Pagination}
  614.  
  615. </div>
  616.  
  617. <div id="credit"><a href="http://lestranqe.tumblr.com/">FZ</a></div>
  618.  
  619. </body>
  620. </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!