Advertisement
dracares

theme 12 - zssou

Aug 28th, 2014
2,982
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.95 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.  
  10.  
  11. <!--
  12.  
  13. theme by zssou.tumblr.com
  14.  
  15. **for the pop-up ask box, just put your url (without the .tumblr.com) in 'User URL' in the customize appearance thing!!
  16.  
  17. -->
  18.  
  19.  
  20. <!--javascripts-->
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <!--tooltips-->
  25.  
  26. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  27.  
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("a[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:30,
  34. tip_fade_speed:300,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <!--show/hide notes-->
  42.  
  43. <script type="text/javascript">
  44. function unhide(divID) {
  45. var item = document.getElementById(divID);
  46. if (item) {
  47. item.className=(item.className=='hidden')?'unhidden':'hidden';
  48. }
  49. }
  50. </script>
  51.  
  52. <!--show/hide sidebar stuff-->
  53.  
  54. <script type="text/javascript">
  55. $(document).ready(function(){
  56. $(".sub").hide();
  57. $(".head").click(function(){
  58. $(this).next(".sub").slideToggle('500');
  59. });
  60. });</script>
  61.  
  62. <!--pop up ask-->
  63.  
  64. <script>
  65. $(document).ready(function() {
  66. //
  67. $('a.poplight[href^=#]').click(function() {
  68. var popID = $(this).attr('rel'); //Get Popup Name
  69. var popURL = $(this).attr('href'); //Get Popup href to define size
  70. var query= popURL.split('?');
  71. var dim= query[1].split('&');
  72. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  73. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  74. var popMargTop = ($('#' + popID).height() + 80) / 2;
  75. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  76. //Apply Margin to Popup
  77. $('#' + popID).css({
  78. 'margin-top' : -popMargTop,
  79. 'margin-left' : -popMargLeft
  80. });
  81. $('body').append('<div id="fade"></div>');
  82. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  83. return false;
  84. });
  85. $('a.close, #fade').live('click', function() {
  86. $('#fade , .popupask').fadeOut(function() {
  87. $('#fade, a.close').remove(); //fade them both out
  88. });
  89. return false;
  90. });
  91. });
  92. </script>
  93.  
  94. <!--end scripts-->
  95.  
  96. <!--default variables-->
  97.  
  98. <meta name="color:Background" content="#ffffff"/>
  99. <meta name="color:Text" content="#000000"/>
  100. <meta name="color:Link" content="#101010"/>
  101. <meta name="color:Hover" content="#dddddd"/>
  102. <meta name="color:Details" content="#fafafa"/>
  103. <meta name="color:Border" content="#000000"/>
  104.  
  105. <meta name="text:User URL" content=""/>
  106. <meta name="text:Link 1" content=""/>
  107. <meta name="text:Link 1 URL" content=""/>
  108. <meta name="text:Link 2" content=""/>
  109. <meta name="text:Link 2 URL" content=""/>
  110. <meta name="text:Link 3" content=""/>
  111. <meta name="text:Link 3 URL" content=""/>
  112. <meta name="text:Link 4" content=""/>
  113. <meta name="text:Link 4 URL" content=""/>
  114.  
  115. <!--CSS customization here -->
  116.  
  117. <style type="text/css">
  118.  
  119. /*tooltips*/
  120.  
  121. #s-m-t-tooltip{
  122. position:absolute;
  123. margin-top:15px;
  124. z-index:9999;
  125. padding:0 5px;
  126. font-size:7px;
  127. text-transform:uppercase;
  128. letter-spacing:1px;
  129. background:{color:Background};
  130. }
  131.  
  132. /*scrollbar*/
  133.  
  134. ::-webkit-scrollbar {
  135. width:3px;
  136. background:{color:Background};
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb {
  140. background:{color:Text};
  141. }
  142.  
  143. /*basics*/
  144.  
  145. body {
  146. background:{color:Background};
  147. color:{color:Text};
  148. font-family:Helvetica, Arial, sans-serif;
  149. font-size:9px;
  150. text-align:justify;
  151. line-height:18px;
  152. margin:0;
  153. }
  154.  
  155. small {
  156. font-size:8px;
  157. }
  158.  
  159. big {
  160. font-size:12px;
  161. }
  162.  
  163. a {
  164. color:{color:Link};
  165. text-decoration:none;
  166. -webkit-transition:all 0.1s;
  167. -moz-transition:all 0.1s;
  168. -ms-transition:all 0.1s;
  169. -o-transition:all 0.1s;
  170. transition:all 0.1s;
  171. }
  172.  
  173. a:hover {
  174. text-shadow:0 0 2px {color:Hover};
  175. }
  176.  
  177. li {
  178. margin:0 -15px;
  179. }
  180.  
  181. img {
  182. opacity:1;
  183. border:none;
  184. text-decoration:none;
  185. }
  186.  
  187. /*container*/
  188.  
  189. #container {
  190. left:50%;
  191. margin-left:-200px;
  192. position:absolute;
  193. }
  194.  
  195. /*posts*/
  196.  
  197. #entries {
  198. margin:70px 0;
  199. width:400px;
  200. }
  201.  
  202. #posts {
  203. width:400px;
  204. padding:30px 0;
  205. }
  206.  
  207. .captions {
  208. margin-top:-5px;
  209. max-width:400px;
  210. }
  211.  
  212. blockquote {
  213. padding:0 0 0 15px;
  214. border-left:1px solid {color:Border};
  215. margin-left:15px;
  216. }
  217.  
  218. blockquote img {
  219. max-width:100%;
  220. }
  221.  
  222. /*sidebar*/
  223.  
  224. #sidebar {
  225. position:fixed;
  226. width:180px;
  227. margin:260px 450px;
  228. }
  229.  
  230. #blogtitle {
  231. text-align:center;
  232. font-weight:bold;
  233. text-transform:uppercase;
  234. font-size:8px;
  235. line-height:25px;
  236. letter-spacing:2px;
  237. padding:8px 10px;
  238. margin-bottom:8px;
  239. border:1px solid {color:Border};
  240. }
  241.  
  242. .head {
  243. font-size:8px;
  244. text-align:left;
  245. text-transform:uppercase;
  246. letter-spacing:2px;
  247. font-weight:bold;
  248. padding:3px 10px 0;
  249. margin-top:4px;
  250. border-left:1px solid {color:Border};
  251. height:20px;
  252. display:inline-block;
  253. width:159px;
  254. }
  255.  
  256. .head:hover {
  257. text-shadow:0 0 2px {color:Hover};
  258. }
  259.  
  260. .sub {
  261. margin:0 10px 10px;
  262. }
  263.  
  264. /*pagination*/
  265.  
  266. #pagination {
  267. }
  268.  
  269. /*textposts*/
  270.  
  271. #title {
  272. font-weight:bold;
  273. text-transform:uppercase;
  274. font-size:10px;
  275. letter-spacing:1px;
  276. margin:0 0 5px;
  277. }
  278.  
  279. /*quote*/
  280.  
  281. #titlequote{
  282. font-size:10px;
  283. text-transform:uppercase;
  284. font-weight:bold;
  285. letter-spacing:1px;
  286. padding:30px;
  287. border:1px solid {color:Border};
  288. }
  289.  
  290. #source {
  291. font-weight:400;
  292. font-size:7px;
  293. text-align:right;
  294. }
  295.  
  296. /*audio*/
  297.  
  298. #audioinfo {
  299. background:{color:Background};
  300. padding:22px;
  301. text-align:center;
  302. font-size:7px;
  303. text-transform:uppercase;
  304. letter-spacing:1px;
  305. max-width:498px;
  306. border:1px solid {color:Border};
  307. }
  308.  
  309. #aplayer {
  310. width:22px;
  311. height:22px;
  312. margin-left:3px;
  313. margin-top:3px;
  314. padding:3px;
  315. overflow:hidden;
  316. }
  317.  
  318. #player {
  319. background:{color:Background};
  320. width:40px;
  321. height:40px;
  322. margin-top:22px;
  323. margin-left:22px;
  324. position:absolute;
  325. opacity:0.2;
  326. -webkit-transition:all 0.3s;
  327. -moz-transition:all 0.3s;
  328. -ms-transition:all 0.3s;
  329. -o-transition:all 0.3s;
  330. transition:all 0.3s;
  331. }
  332.  
  333. #player:hover {
  334. opacity:0.6;
  335. }
  336.  
  337. /*asks*/
  338.  
  339. .q {
  340. float:left;
  341. margin:0 5px 0 0;
  342. font-weight:bold;
  343. }
  344.  
  345. .question {
  346. padding:20px;
  347. border:1px solid {color:Border};
  348. }
  349.  
  350. .a {
  351. float:left;
  352. margin:9px 5px 0 0;
  353. font-weight:bold;
  354. }
  355.  
  356. .answer {
  357. padding:10px 10px 0;
  358. }
  359.  
  360. /*chat*/
  361.  
  362. .chat ol {
  363. padding:0;
  364. max-width:500px;
  365. margin:0 15px;
  366. text-transform:none;
  367. font-size:9px;
  368. letter-spacing:0;
  369. list-style:none;
  370. }
  371.  
  372. .line {
  373. padding:5px 0;
  374. }
  375.  
  376. .label {
  377. font-weight:bold;
  378. }
  379.  
  380. /*permalink & notes*/
  381.  
  382. #posts:hover #info {
  383. opacity:1;
  384. }
  385.  
  386. #info {
  387. padding:5px 0;
  388. display:block;
  389. text-align:center;
  390. line-height:14px;
  391. {block:IndexPage}
  392. opacity:0;
  393. -webkit-transition:all 0.3s;
  394. -moz-transition:all 0.3s;
  395. -ms-transition:all 0.3s;
  396. -o-transition:all 0.3s;
  397. transition:all 0.3s;
  398. {/block:IndexPage}
  399. }
  400.  
  401. #tags {
  402. }
  403.  
  404. span.tag2 {
  405. display:none;
  406. }
  407.  
  408. a.tag + span.tag2 {
  409. display:inline;
  410. }
  411.  
  412. /*notes*/
  413.  
  414. #postnotes {
  415. text-align:left;
  416. max-width:500px;
  417. font-size:7px;
  418. text-transform:uppercase;
  419. letter-spacing:1px;
  420. line-height:25px;
  421. margin:0 -25px;
  422. }
  423.  
  424. #postnotes a img {
  425. display:none;
  426. }
  427.  
  428. ol.notes {
  429. list-style-type:none;
  430. }
  431.  
  432. .shownotes {
  433. text-transform:uppercase;
  434. letter-spacing:1px;
  435. }
  436.  
  437. .hidden {
  438. display:none;
  439. }
  440.  
  441. .unhidden {
  442. display:block;
  443. }
  444.  
  445. /*don't remove the credit*/
  446.  
  447. #credit {
  448. font-size:9px;
  449. position:fixed;
  450. text-transform:uppercase;
  451. bottom:8px;
  452. right:8px;
  453. letter-spacing:1px;
  454. }
  455.  
  456. #credit a {
  457. color:#bbb;
  458. }
  459.  
  460. #credit a:hover {
  461. color:{color:Text};
  462. text-decoration:none;
  463. }
  464.  
  465. /*pop up ask*/
  466.  
  467. #fade {
  468. display:none;
  469. background:{color:Background};
  470. position:fixed;
  471. left:0;
  472. top:0;
  473. width:100%;
  474. height:100%;
  475. opacity:.8;
  476. z-index:9999;
  477. }
  478.  
  479. .popupask {
  480. display:none;
  481. left:50%;
  482. top:50%;
  483. padding:40px;
  484. float:left;
  485. font-size:10;
  486. position:fixed;
  487. z-index:99999;
  488. }
  489.  
  490. .asktitle {
  491. font-size:12px;
  492. color:{color:Text};
  493. text-transform:uppercase;
  494. letter-spacing:3px;
  495. padding:10px;
  496. }
  497.  
  498. {CustomCSS}
  499.  
  500. </style></head>
  501.  
  502. <body>
  503.  
  504. <div id="container">
  505.  
  506. <!--sidebar-->
  507.  
  508. <div id="sidebar">
  509.  
  510. <div id="blogtitle"><a href="/">{Title}</a></div>
  511.  
  512. <p class="head" style="cursor:pointer;">profile</p>
  513. <div class="sub">{Description}</div>
  514.  
  515. <p class="head"><a href="#?w=500" rel="02" class="poplight">contact</a></p>
  516.  
  517. <p class="head" style="cursor:pointer;">navigation</p>
  518. <div class="sub" style="line-height:25px;">
  519. {block:ifLink1}+ <a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}<br>
  520. {block:ifLink2}+ <a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}<br>
  521. {block:ifLink3}+ <a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}<br>
  522. {block:ifLink4}+ <a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}</div>
  523.  
  524. <div id="pagination">
  525. {block:Pagination}
  526. {block:NextPage}<p class="head"><a href="{NextPage}">older</a>{/block:NextPage}
  527. {block:PreviousPage}/ <a href="{PreviousPage}" style="font-size:8px; letter-spacing:1px; font-weight:bold; text-transform:uppercase;">newer</a></p>{/block:PreviousPage}
  528. {/block:Pagination}
  529. </div>
  530.  
  531. </div>
  532.  
  533. <!--posts-->
  534.  
  535. <div id="entries">
  536.  
  537. {block:Posts}
  538.  
  539. <div id="posts">
  540.  
  541. <!--quotes-->
  542.  
  543. {block:Quote}
  544. <div id="titlequote">“{Quote}” {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}</div>
  545. {/block:Quote}
  546.  
  547. <!--post title-->
  548.  
  549. {block:Text}
  550. {block:Title}<div id="title">{Title}</div>{/block:Title}
  551. {Body}
  552. {/block:Text}
  553.  
  554. <!--link posts-->
  555.  
  556. {block:Link}
  557. <div id="title"><a href="{URL}">{Name}</a></div>
  558. {block:Description}{Description}{/block:Description}
  559. {/block:Link}
  560.  
  561. <!--chat posts-->
  562.  
  563. {block:Chat}
  564. {block:Title}<div id="title">{Title}</div>{/block:Title}
  565. <div class="chat"><ol>
  566. {block:Lines}<li class="line {Alt}">
  567. {block:Label}<span class="label">{Label}</span>{/block:Label}
  568. {Line}</li>{/block:Lines}</ol></div>
  569. {/block:Chat}
  570.  
  571. <!--photo posts-->
  572.  
  573. {block:Photo}
  574. {LinkOpenTag}
  575. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="400"/>
  576. {LinkCloseTag}
  577. {/block:Photo}
  578.  
  579. <!--photosets-->
  580.  
  581. {block:Photoset}
  582. {Photoset-400}
  583. {/block:Photoset}
  584.  
  585. <!--videos-->
  586.  
  587. {block:Video}
  588. {Video-400}
  589. {/block:Video}
  590.  
  591. <!--audio posts-->
  592.  
  593. {block:Audio}
  594. <div id="player"><div id="aplayer">{AudioPlayer}</div></div>
  595. <div id="audioinfo">
  596. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br><b>{Artist}</b>{/block:Artist}</div>
  597. {/block:Audio}
  598.  
  599. <!--answer posts-->
  600.  
  601. {block:Answer}
  602. <div class="question"><span class="q">Q:</span> {Question}</div>
  603. <div class="answer"><span class="a">A:</span> {Answer}</div>
  604. {/block:Answer}
  605.  
  606. <!--captions-->
  607.  
  608. {block:Caption}
  609. <div class="captions">{Caption}</div>
  610. {/block:Caption}
  611.  
  612. <!--permalink-->
  613.  
  614. {block:Date}
  615. <div id="info">
  616.  
  617. <a href="{Permalink}"><b>{12Hour}:{Minutes}{CapitalAmPm}</b></a>
  618.  
  619. {block:NoteCount}&nbsp;/ <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  620.  
  621. {block:PermalinkPage}{block:RebloggedFrom} &mdash; <a href="{ReblogParentURL}">via</a>{block:ContentSource} / <a href="{ReblogRootURL}">source</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}
  622.  
  623. {block:HasTags}<div id="tags">{block:Tags}<span class="tag2">,&nbsp;</span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}</div>
  624. {/block:Date}
  625.  
  626. </div>
  627.  
  628. {block:PostNotes}
  629. <a href="javascript:unhide('postnotes');" class="shownotes"><center>SHOW NOTES</center></a>
  630. <div id="postnotes" class="hidden">{PostNotes}</div>
  631. {/block:PostNotes}
  632.  
  633. {/block:Posts}
  634.  
  635. </div>
  636.  
  637. <!--content source-->
  638.  
  639. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}"/> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  640.  
  641. <div id="credit"><a href="http://zssou.tumblr.com/" title="theme &copy;">z</a></div>
  642.  
  643. </body>
  644.  
  645. <div id="02" class="popupask">
  646.  
  647. <center>
  648. <div class="asktitle">{AskLabel}</div><iframe frameborder="0" scrolling="yes" width="100%" height="200" src="http://www.tumblr.com/ask_form/{text:User URL}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  649. </center></div></div></div></div></div></div></div></div></div></div></div>
  650.  
  651. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement