Advertisement
TitanJelly

theme #08 - by titanjelly

Nov 3rd, 2013
1,559
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.12 KB | None | 0 0
  1. <!--
  2. ╱╭╮╱╭╮
  3. ╭╯╰┳╯╰╮
  4. ╰╮╭╋╮╭╋━━┳━╮
  5. ╱┃┃┣┫┃┃╭╮┃╭╮╮
  6. ╱┃╰┫┃╰┫╭╮┃┃┃┃
  7. ╱╰━┻┻━┻╯╰┻╯╰╯
  8. ↳ http://titanjelly.tumblr.com
  9. ↳ DO NOT Claim/Repost as your own or Remove the theme credit!
  10. ↳ DO NOT Use as a theme base or Make heavy modifications!
  11. -->
  12.  
  13. <head>
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  15.  
  16. <title>{title}</title>
  17.  
  18. <meta name="image:Background" content="http://static.tumblr.com/6f796086eee28a1a53572a351781433a/9hiqgmd/ccQmvp6td/tumblr_static_groovepaper.png" />
  19. <meta name="image:Icon" content="http://static.tumblr.com/fe2190bffb5c30eaee4fc31fc1e7eae9/9hiqgmd/u8amvp6ld/tumblr_static_tumblr_inline_mp8xp82zta1qz4rgp.png" />
  20.  
  21. <meta name="color:Background" content="#f9f9f9"/>
  22. <meta name="color:Borders" content="#ececec"/>
  23. <meta name="color:Sidebox" content="#303030"/>
  24. <meta name="color:Sidebox Text" content="#ececec"/>
  25. <meta name="color:Posts Background" content="#303030"/>
  26. <meta name="color:Posts Text" content="#ececec"/>
  27. <meta name="color:Notes Background" content="#303030"/>
  28. <meta name="color:Falling Bars" content="#fd8560"/>
  29. <meta name="color:Title" content="#fd8560"/>
  30. <meta name="color:Links" content="#fd8560"/>
  31. <meta name="color:Links Hover" content="#ffffff"/>
  32. <meta name="color:Base" content="#000000"/>
  33.  
  34. <meta name="if:Infinite Scroll" content="0"/>
  35. <meta name="if:Show Falling Lines" content="1"/>
  36. <meta name="if:Show Captions" content="1"/>
  37. <meta name="if:500px Posts" content="0"/>
  38.  
  39. <meta name="text:Background Position" content="bottom left"/>
  40. <meta name="text:Background Repeat" content="repeat"/>
  41.  
  42. <meta name="text:Link01" content="Home"/>
  43. <meta name="text:Link01URL" content="/"/>
  44. <meta name="text:Link02" content="Message"/>
  45. <meta name="text:Link02URL" content="/ask"/>
  46. <meta name="text:Link03" content="About"/>
  47. <meta name="text:Link03URL" content="/about"/>
  48. <meta name="text:Link04" content="Archive"/>
  49. <meta name="text:Link04URL" content="/archive"/>
  50.  
  51.  
  52. <link rel="shortcut icon" href="{Favicon}" />
  53.  
  54. <style type="text/css">
  55.  
  56. iframe#tumblr_controls { opacity:0.4; }
  57.  
  58. body {
  59. font-size: 10px; /* font size */
  60. font-family: Calibri, Candara, Segoe; /* font */
  61. color: #000; /* font color */
  62. background: {color:Background} url('{image:Background}') {text:Background Position} {text:Background Repeat} fixed;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:vertical {
  66. background: {color:Base};}
  67. ::-webkit-scrollbar-thumb:horizontal {
  68. background: {color:Base};
  69. height:10px!important;}
  70. ::-webkit-scrollbar {
  71. background: {color:Background} url('{image:Background}') {text:Background Position} {text:Background Repeat} fixed;
  72. height:10px;
  73. width: 4px;}
  74.  
  75. a {
  76. color: {color:links};
  77. text-decoration: none;
  78. -webkit-transition: all 0.5s ease;
  79. -moz-transition: all 0.5s ease;
  80. -o-transition: all 0.5s ease;
  81. transition: all 0.5s ease;
  82. }
  83.  
  84. a:hover{color:{color:links Hover};
  85. background: {color:links};}
  86.  
  87. .container{
  88. {block:if500pxPosts}
  89. width:775px;
  90. {/block:if500pxPosts}
  91. {block:ifnot500pxPosts}
  92. width:675px;
  93. {/block:ifnot500pxPosts}
  94. margin:0px;
  95. }
  96.  
  97. .fallinglines {margin-left:75px;z-index:-1000;}
  98.  
  99. .fline01, .fline02, .fline03, .fline04, .fline05 {
  100. width:10px;
  101. background:{color:Falling Bars};
  102. position:fixed;
  103. margin-top:0px;
  104. opacity:0.9;
  105. border-bottom-left-radius:7px;}
  106.  
  107. .fline01 {height:50px;margin-left:0px;}
  108. .fline02 {height:100px;margin-left:15px;}
  109. .fline03 {height:70px;margin-left:30px;}
  110. .fline04 {height:100px;margin-left:45px;}
  111. .fline05 {height:120px;margin-left:60px;}
  112.  
  113.  
  114. /* SIDEBAR / SIDEBOX */
  115.  
  116.  
  117. .sidebar_right {
  118. width:220px;
  119. position:fixed;
  120. bottom:0px;
  121. top:0px;
  122. padding:10px;
  123. padding-top:150px;
  124. {block:if500pxPosts}
  125. margin-left:650px;
  126. {/block:if500pxPosts}
  127. {block:ifnot500pxPosts}
  128. margin-left:550px;
  129. {/block:ifnot500pxPosts}
  130. }
  131.  
  132. .hometitle{
  133. height:10px;
  134. line-height:90%;
  135. padding:8px 0px;
  136. font-size:25px;
  137. font-style:italic;
  138. text-align:left;
  139. text-transform:lowercase;
  140. position:absolute;
  141. margin-top:-25px;
  142. margin-left:0px;
  143. letter-spacing:1px;
  144. text-shadow:1px 1px {color:Sidebox};
  145. }
  146.  
  147. .hometitle a{color:{color:Title};}
  148. .hometitle a:hover{color:{color:links Hover};
  149. background:transparent;}
  150.  
  151. .sidebox {
  152. width:220px;
  153. }
  154.  
  155. .side_links {
  156. width: 120px;
  157. margin-top:-105px;
  158. margin-left:110px;
  159. text-align:left;
  160. text-transform:uppercase;
  161. }
  162.  
  163. .side_link {
  164. display:block;
  165. font-size:8px;
  166. background-color: {color:Sidebox};
  167. border:1px solid {color:Sidebox};
  168. margin-bottom:5px;
  169. margin-top:1px;
  170. padding:5px;
  171. }
  172.  
  173. .side_link:hover {
  174. margin-left:10px;
  175. margin-right:-10px;
  176. background-color: {color:Sidebox};
  177. }
  178.  
  179. .side_icon img {
  180. width:85px;
  181. display:block;
  182. background-color: {color:Sidebox};
  183. border:10px solid {color:Sidebox};
  184. padding:0px;
  185. -webkit-transition: all 0.5s ease;
  186. -moz-transition: all 0.5s ease;
  187. -o-transition: all 0.5s ease;
  188. transition: all 0.5s ease;
  189. }
  190.  
  191. .side_icon img:hover {
  192. background-color: {color:Links Hover};
  193. border:10px solid {color:Links Hover};
  194. }
  195.  
  196. .description {
  197. width:208px;
  198. margin-top:0px;
  199. margin-bottom:5px;
  200. padding:5px 10px;
  201. color:{color:Sidebox Text};
  202. background-color: {color:Sidebox};
  203. border:1px solid {color:Sidebox};
  204. text-align:justify;}
  205.  
  206.  
  207. /* NAVIGATION */
  208.  
  209.  
  210. .nav {
  211. width:125px;
  212. text-align:center;
  213. text-transform:uppercase;
  214. position:relative;
  215. margin:auto;
  216. margin-top:0px;
  217. padding:2px;
  218. background:{color:Sidebox};
  219. }
  220.  
  221. .nav b {
  222. font-size:11px;
  223. color:#fff;
  224. padding:0px 6px;
  225. }
  226.  
  227. .nav a {
  228. font-size:11px;
  229. color:{color:links};
  230. padding:0px 6px;
  231. }
  232.  
  233. .nav a:hover {
  234. background:{color:links Hover};
  235. color:#000;}
  236.  
  237.  
  238. /* POSTS */
  239.  
  240.  
  241. .postcol {
  242. position:absolute;
  243. left:0px;
  244. top:0px;
  245. padding: 15px 0px;
  246. {block:if500pxPosts}
  247. width: 500px;
  248. {/block:if500pxPosts}
  249. {block:ifnot500pxPosts}
  250. width: 400px;
  251. {/block:ifnot500pxPosts}
  252. border-left:100px solid #000;
  253. }
  254.  
  255. .posts {
  256. {block:if500pxPosts}
  257. width: 500px;
  258. {/block:if500pxPosts}
  259. {block:ifnot500pxPosts}
  260. width: 400px;
  261. {/block:ifnot500pxPosts}
  262. background-color: {color:Posts Background};
  263. color: {color:Posts Text};
  264. margin-left: 15px;
  265. margin-bottom: 20px;
  266. padding:5px;
  267. overflow: hidden;
  268. }
  269.  
  270. .posts h2 {
  271. font-size: 12px;
  272. color: {color:links};
  273. font-weight: normal;
  274. margin: 0px;
  275. }
  276.  
  277. .posts h2 a {
  278. font-size: 12px;
  279. color: {color:links};
  280. font-weight: normal;
  281. margin: 0px;
  282. }
  283.  
  284. .posts li {
  285. list-style: square;
  286. }
  287.  
  288. .posts blockquote {
  289. border-left: 1px solid {color:Borders};
  290. padding-left: 5px;
  291. }
  292.  
  293. .posts img, .posts li, .posts blockquote {max-width: 100%;}
  294.  
  295. .question {
  296. background-color: #fcfcfc;
  297. padding: 20px;
  298. min-height: 50px;
  299. }
  300.  
  301. .question img {
  302. border: 5px solid #fff;
  303. float: left;
  304. margin-right: 10px;
  305. }
  306.  
  307. .askr {
  308. color: #cf2d85;
  309. }
  310.  
  311. .quote {
  312. width: 80%;
  313. margin: auto;
  314. }
  315.  
  316. .quotetext_short {font-size: 18px;}
  317. .quotetext_medium {font-size: 14px;}
  318. .quotetext_long {font-size: 11px;}
  319.  
  320. .source {text-align: right;}
  321.  
  322. .convo li {list-style: none; margin-left:-40px;}
  323.  
  324. .convo .label {text-transform: uppercase;}
  325.  
  326. .line_odd .label {color: #cf2d85;}
  327. .line_even .label {color: #11d8be;}
  328.  
  329. .cover {
  330. position: relative;
  331. margin-bottom: 10px;
  332. color:#000;
  333. height: 58px;
  334. width: 58px;
  335. z-index: 1
  336. }
  337.  
  338. .cover img {
  339. height: 58px;
  340. z-index: 1
  341. }
  342.  
  343. .playbutton {
  344. width: 18px;
  345. height: 30px;
  346. overflow: hidden;
  347. position: relative;
  348. z-index: 1000;
  349. margin: 15px 24px 13px 16px;
  350. }
  351.  
  352. .playbox {
  353. background-color: #000;
  354. position: absolute;
  355. margin-top: -68px;
  356. z-index: 1000;
  357. opacity: 0.5;
  358. }
  359.  
  360. .audioinfo {
  361. height: 30px;
  362. position: absolute;
  363. margin-top: -70px;
  364. margin-left: 70px;
  365. }
  366.  
  367. .audiotrack {
  368. font-size: 14px;
  369. font-weight: bold;
  370. }
  371.  
  372. .audiocap {
  373. position: relative;
  374. margin-top: 0px;
  375. }
  376.  
  377.  
  378. /* NOTES */
  379.  
  380.  
  381. .postinfo {
  382. position:absolute;
  383. left:0px;
  384. padding: 5px;
  385. font-size: 9px;
  386. text-transform: uppercase;
  387. letter-spacing: 1px;
  388. margin-top:5px;
  389. margin-bottom:-8px;
  390. margin-left:-95px;
  391. border-top:1px dotted #666;
  392. opacity:0.8;
  393. }
  394.  
  395. .postinfo a {display:block;}
  396.  
  397. .postinfo a {color:{color:links};padding:0px 5px 0px 5px;}
  398. .postinfo a:hover {color:{color:links Hover};}
  399. .noteinfo {float: right;}
  400.  
  401. .sources {filter:alpha(opacity=0);opacity:0;display:none;}
  402.  
  403. .credit a {
  404. color:#22231E;
  405. position:fixed;
  406. right:5px;
  407. bottom:5px;
  408. opacity:0.5;}
  409.  
  410. .credit a:hover{color:{color:links Hover};}
  411.  
  412. </style>
  413.  
  414. {block:ifInfiniteScroll}
  415. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  416. {/block:ifInfiniteScroll}
  417.  
  418. </head>
  419. <body>
  420.  
  421. <div class="container">
  422.  
  423. <div class="sidebar_right">
  424.  
  425. <div class="hometitle"><a href="/">{title}</a></div>
  426.  
  427. <div class="sidebox">
  428.  
  429. <div class="side_icon">
  430. <a href="/"><img src="{image:Icon}" /></a>
  431. </div>
  432.  
  433. <div class="side_links">
  434. <a href="{text:Link01URL}" class="side_link">
  435. {text:Link01}</a>
  436. <a href="{text:Link02URL}" class="side_link">
  437. {text:Link02}</a>
  438. <a href="{text:Link03URL}" class="side_link">
  439. {text:Link03}</a>
  440. <a href="{text:Link04URL}" class="side_link">
  441. {text:Link04}</a>
  442. </div>
  443.  
  444. <div class="description">{Description}</div>
  445.  
  446. </div>
  447.  
  448. {block:ifnotInfiniteScroll}
  449. {block:Pagination}
  450. <div class="nav">
  451. {block:PreviousPage}
  452. <a href="{PreviousPage}">↼</a>
  453. {/block:PreviousPage}
  454. {block:JumpPagination length="3"}
  455. {block:CurrentPage}
  456. <b>{PageNumber}</b>
  457. {/block:CurrentPage}
  458. {block:JumpPage}
  459. <a class="jump_page" href="{URL}">{PageNumber}</a>
  460. {/block:JumpPage}
  461. {/block:JumpPagination}
  462. {block:NextPage}
  463. <a href="{NextPage}">⇀</a>
  464. {/block:NextPage}
  465. </div>
  466. {/block:Pagination}
  467. {/block:ifnotInfiniteScroll}
  468.  
  469. {block:IfShowFallingLines}
  470. <div class="fallinglines">
  471. <div class="fline01"></div>
  472. <div class="fline02"></div>
  473. <div class="fline03"></div>
  474. <div class="fline04"></div>
  475. <div class="fline05"></div>
  476. </div>
  477. {/block:IfShowFallingLines}
  478.  
  479. </div>
  480.  
  481. <div class="postcol">
  482. <div class="autopagerize_page_element">
  483. {block:Posts}
  484. <div class="posts">
  485.  
  486. {block:ContentSource}<div class="sources">
  487. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  488. {/block:SourceLogo}
  489. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  490. </div>{/block:ContentSource}
  491.  
  492.  
  493. <!-- Post Information -->
  494.  
  495. {block:Date}
  496. <div class="postinfo"><a href="{Permalink}">{TimeAgo}</a>
  497. {block:Notecount}
  498. <a href="{Permalink}">{NoteCountWithLabel}</a>
  499. {/block:Notecount}
  500. </div>{/block:Date}
  501.  
  502.  
  503. <!-- Text Post -->
  504.  
  505. {block:Text}
  506. {block:Title}<h2>{Title}</h2>{/block:Title}
  507. {Body}
  508. {/block:Text}
  509.  
  510.  
  511. <!-- Answer Post -->
  512.  
  513. {block:Answer}
  514. <div class="question">
  515. <img src="{AskerPortraitURL-40}"> {Asker} asked: {Question}
  516. </div>
  517. {Answer}
  518. {/block:Answer}
  519.  
  520.  
  521. <!-- Quote Post -->
  522.  
  523. {block:Quote}
  524. <div class="quote">
  525. <div class="quotetext_{Length}">"{Quote}"</div>
  526. {block:Source}<div class="source">{Source}</div>{/block:Source}
  527. </div>
  528. {/block:Quote}
  529.  
  530.  
  531. <!-- Link Post -->
  532.  
  533. {block:Link}
  534. <h2><a href="{URL}">{Name}</a></h2>
  535. {block:Description}{Description}{/block:Description}
  536. {/block:Link}
  537.  
  538.  
  539. <!-- Chat Post -->
  540.  
  541. {block:Chat}
  542. {block:Title}<h2>{Title}</h2>{/block:Title}
  543. <ul class="convo">
  544. {block:Lines}<li class="line_{Alt}">{block:Label}
  545. <span class="label">{Label}</span>
  546. {/block:Label}{Line}</li>{/block:Lines}</ul>
  547. {/block:Chat}
  548.  
  549.  
  550. <!-- Photo Post -->
  551.  
  552. {block:Photo}
  553. {LinkOpenTag}
  554. {block:if500pxPosts}
  555. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px">
  556. {/block:if500pxPosts}
  557. {block:ifnot500pxPosts}
  558. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="400px">
  559. {/block:ifnot500pxPosts}
  560. {LinkCloseTag}
  561. {block:ifShowCaptions}
  562. {block:Caption}{Caption}{/block:Caption}
  563. {/block:ifShowCaptions}
  564. {block:ifnotShowCaptions}
  565. {block:PermalinkPage}
  566. {block:Caption}{Caption}{/block:Caption}
  567. {/block:PermalinkPage}
  568. {/block:ifnotShowCaptions}
  569. {/block:Photo}
  570.  
  571.  
  572. <!-- Photoset Post -->
  573.  
  574. {block:Photoset}
  575. {block:if500pxPosts}
  576. {Photoset-500}
  577. {/block:if500pxPosts}
  578. {block:ifnot500pxPosts}
  579. {Photoset-400}
  580. {/block:ifnot500pxPosts}
  581. {block:ifShowCaptions}
  582. {block:Caption}{Caption}{/block:Caption}
  583. {/block:ifShowCaptions}
  584. {block:ifnotShowCaptions}
  585. {block:PermalinkPage}
  586. {block:Caption}{Caption}{/block:Caption}
  587. {/block:PermalinkPage}
  588. {/block:ifnotShowCaptions}
  589. {/block:Photoset}
  590.  
  591.  
  592. <!-- Audio Post -->
  593.  
  594. {block:Audio}
  595. <div class="cover">{block:AlbumArt}
  596. <img src="{AlbumArtURL}" height="58px">
  597. {/block:AlbumArt}</div>
  598. <div class="audioinfo">
  599. <div class="audiotrack">
  600. {block:TrackName}{TrackName}{/block:TrackName}</div>
  601. <div class="audioartist">
  602. {block:Artist}{Artist}{/block:Artist}</div>
  603. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}
  604. </div>
  605. <div class="playbox">
  606. <div class="playbutton">
  607. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  608. </div></div>
  609. <div class="audiocap">
  610. {block:Caption}{Caption} {/block:Caption}
  611. </div>
  612. {/block:Audio}
  613.  
  614.  
  615. <!-- Video Post -->
  616.  
  617. {block:Video}
  618. {block:if500pxPosts}
  619. {Video-500}
  620. {/block:if500pxPosts}
  621. {block:ifnot500pxPosts}
  622. {Video-400}
  623. {/block:ifnot500pxPosts}
  624. {block:ifShowCaptions}
  625. {block:Caption}{Caption}{/block:Caption}
  626. {/block:ifShowCaptions}
  627. {block:ifnotShowCaptions}
  628. {block:PermalinkPage}
  629. {block:Caption}{Caption}{/block:Caption}
  630. {/block:PermalinkPage}
  631. {/block:ifnotShowCaptions}
  632. {/block:Video}
  633.  
  634. {block:PermalinkPage}
  635. {block:RebloggedFrom}<a href="{ReblogParentURL}">VIA {ReblogParentName} </a> / <a href="{ReblogRootURL}">SOURCE {ReblogRootName} </a>{/block:RebloggedFrom}
  636. {/block:PermalinkPage}
  637.  
  638. {block:PostNotes} {PostNotes} {/block:PostNotes}
  639.  
  640. </div>
  641. {/block:Posts}
  642. </div>
  643. </div>
  644.  
  645. </div>
  646.  
  647.  
  648. <!-- Credit / Copyright Information - DO NOT REMOVE -->
  649.  
  650. <div class="credit"><a href="http://titanjelly.tumblr.com/themes">theme</a></div>
  651.  
  652. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement