Advertisement
ten-tation

Theme #12 by thedoctorknows

May 11th, 2013
1,678
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.28 KB | None | 0 0
  1. <!--THEME #12 BY THEDOCTORKNOWS
  2.  
  3. Please don't remove the credit, claim this code as your own nor use this as a base code. Thank you!-->
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  7.  
  8. <html>
  9.  
  10. <head>
  11.  
  12. <meta name="color:Background" content="#2b2a2a" />
  13. <meta name="image:Background" content="http://static.tumblr.com/ccsibxa/u7bmmcza8/cartographer.png" />
  14. <meta name="image:Sidebar" content="" />
  15. <meta name="color:Text" content="#141414" />
  16. <meta name="color:Link" content="#adaeaf" />
  17. <meta name="color:LinkHover" content="#5f5f5f" />
  18. <meta name="color:PostsBg" content="#807f7f" />
  19. <meta name="color:TagsBg" content="#464545" />
  20. <meta name="color:TagsBottom" content="#353434" />
  21. <meta name="color:TagsShadow" content="#1a1a1a" />
  22. <meta name="color:PostsShadow" content="#5c5b5b" />
  23. <meta name="color:SidebarBg" content="#464545" />
  24. <meta name="color:SidebarText" content="#b8b8b8" />
  25. <meta name="color:SideLinksBg" content="#353434" />
  26. <meta name="color:SideLinks" content="#807f7f" />
  27. <meta name="color:SidebarBottom" content="#353434" />
  28. <meta name="color:Tags" content="#8d8d8d" />
  29. <meta name="color:AsksBg" content="#575757" />
  30. <meta name="color:TagsBorder" content="#868686" />
  31.  
  32. <meta name="text:FontSize" content="11" />
  33. <meta name="text:URL" content="" />
  34. <meta name="text:Link 1 URL" content="" />
  35. <meta name="text:Link 1" content="" />
  36. <meta name="text:Link 2 URL" content="" />
  37. <meta name="text:Link 2" content="" />
  38. <meta name="text:Link 3 URL" content="" />
  39. <meta name="text:Link 3" content="" />
  40. <meta name="text:Link 4 URL" content="" />
  41. <meta name="text:Link 4" content="" />
  42. <meta name="text:Tab 1 Title" content="about" />
  43. <meta name="text:Tab 2 Title" content="links" />
  44. <meta name="text:Tab 3 Title" content="message" />
  45. <meta name="text:Tab 4 Title" content="what I do" />
  46. <meta name="text:Tab 5 Title" content="to do list" />
  47. <meta name="text:Tab 6 Title" content="request form" />
  48. <meta name="text:Tab 4 text" content="" />
  49. <meta name="text:Tab 5 text" content="" />
  50. <meta name="text:Tab 6 text" content="" />
  51.  
  52. <meta name="if:TagsShadow" content="0" />
  53. <meta name="if:PostsShadow" content="1" />
  54. <meta name="if:Greyscale" content="1" />
  55. <meta name="if:Tab4" content="1" />
  56. <meta name="if:Tab5" content="1" />
  57. <meta name="if:Tab6" content="1" />
  58.  
  59. <title>{Title}</title>
  60. <link rel="shortcut icon" href="{Favicon}">
  61. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  62. {block:Description}
  63. <meta name="description" content="{MetaDescription}" />
  64. {/block:Description}
  65.  
  66. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  67.         <script>
  68.            
  69.             $(document).ready(function(){
  70.                 $('ul.tabs').each(function(){
  71.                    
  72.                     var $active, $content, $links = $(this).find('a');
  73.  
  74.                    
  75.                     $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  76.                     $active.addClass('active');
  77.                     $content = $($active.attr('href'));
  78.  
  79.                    
  80.                     $links.not($active).each(function () {
  81.                         $($(this).attr('href')).hide();
  82.                     });
  83.  
  84.                    
  85.                     $(this).on('click', 'a', function(e){
  86.                        
  87.                         $active.removeClass('active');
  88.                         $content.hide();
  89.  
  90.                        
  91.                         $active = $(this);
  92.                         $content = $($(this).attr('href'));
  93.  
  94.                        
  95.                         $active.addClass('active');
  96.                         $content.show();
  97.  
  98.                        
  99.                         e.preventDefault();
  100.                     });
  101.                 });
  102.             });
  103.         </script>
  104.  
  105.  
  106. </head>
  107.  
  108. <style type="text/css">
  109.  
  110. @font-face {
  111.     font-family: "Yanone Kaffeesatz";
  112.     src:url('http://static.tumblr.com/ccsibxa/giFmi9pyt/yanonekaffeesatz-regular.ttf');
  113. }
  114.  
  115. body {
  116.     background:{color:Background};
  117.     background-image:url('{image:Background}');
  118.     background-attachment:fixed;
  119.     background-repeat:repeat;
  120.     color:{color:Text};
  121.     font-family:calibri;
  122.     font-size:{text:FontSize}px;
  123.     line-height:120%;
  124. }
  125.  
  126. a {
  127.     text-decoration: none;
  128.     color: {color:Link};
  129.     -webkit-transition: all 0.5s ease-out;
  130.     -moz-transition: all 0.5s ease-out;
  131.     transition: all 0.5s ease-out;
  132. }
  133.  
  134. #posts a {
  135.     font-style:italic;
  136. }
  137.  
  138. a:hover {
  139.     color:{color:LinkHover};
  140. }
  141.  
  142. p {
  143.     margin:5px 0px;
  144. }
  145.  
  146. h2 {
  147.     margin-bottom:10px;
  148. }
  149.  
  150. blockquote {
  151.     padding-left:7px;
  152.     border-left:2px solid;
  153.     margin:7px;
  154. }
  155.  
  156. blockquote blockquote {
  157.     padding-left:7px;
  158.     border-left:2px solid;
  159. }
  160.  
  161. #posts li, #tab1 li, #tab3 li, #tab4 li, #tab5 li, #tab6 li {
  162.     margin-left:30px;
  163. }
  164.  
  165. #posts ul, #posts ol {
  166.     margin:10px 0px 10px 0px;
  167. }
  168.  
  169. #posts, ol.notes {
  170.     width:500px;
  171.     margin-left:auto;
  172.     margin-right:auto;
  173.     padding:30px;
  174.     margin:60px 0px 0px 650px;
  175.     background:{color:PostsBg};
  176.     {Block:IfPostsShadow}box-shadow:inset 0px 0px 10px {color:PostsShadow};{/Block:IfPostsShadow}
  177.     overflow:hidden;
  178. }
  179.  
  180. ol.notes {
  181.         list-style: none;
  182. }
  183.  
  184. {Block:IfGreyscale}
  185.     #content a img, #posts img, #photop {
  186.        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  187.     filter: gray;
  188.     -webkit-filter: grayscale(100%);
  189.     -webkit-transition: all 0.8s ease-out;
  190.     -moz-transition: all 0.8s ease-out;
  191.     transition: all 0.8s ease-out;
  192.     }
  193.  
  194.     #content a:hover img, #posts img:hover, #photop:hover {
  195.        filter:none;
  196.        -webkit-filter:none;
  197.     }
  198. {/Block:IfGreyscale}
  199.  
  200. .quotepost {
  201.     padding-top:10px;
  202. }
  203.  
  204. .belowposts {
  205.     font-size:9px;
  206.     width:540px;
  207.     padding:10px;
  208.     text-transform:uppercase;
  209.     text-align:center;
  210.     line-height:140%;
  211.     margin-bottom:0px;
  212.     margin-left:650px;
  213.     background: {color:TagsBg};
  214.     border-top:dotted;
  215.     border-width:2px;
  216.     border-color:{color:TagsBorder};
  217.     {Block:IfTagsShadow}box-shadow:inset 0px 0px 10px {color:TagsShadow};{/Block:IfTagsShadow}
  218. }
  219.  
  220. .belowposts a {
  221.     color:{color:Tags};
  222. }
  223.  
  224. .dbox {
  225.     height: 0;
  226.     width: 512px;
  227.      border-top: 15px solid {color:TagsBottom};
  228.      border-left: 20px solid transparent;
  229.      border-right: 20px solid transparent;
  230.      padding: 0 8px 0 0;
  231.      margin-left:650px;
  232.      margin-bottom:30px;
  233. }
  234.  
  235. .caption {
  236.     margin-top:10px;
  237. }
  238.  
  239. .portrait {
  240.     width:48px;
  241.     height:48px;
  242.     border:5px solid {color:TagsBg};
  243. }
  244.  
  245. .asker {
  246.     text-transform:uppercase;
  247.     padding:5px 10px;
  248.     width:422px;
  249.     margin-left:58px;
  250.     text-align:right;
  251.     font-style:italic;
  252.     font-size:9px;
  253.     background:{color:TagsBg};
  254.     color:{color:Tags};
  255.     margin-top:-58px;
  256.     letter-spacing:0px;
  257. }
  258.  
  259. .asker a {
  260.     color:{color:Tags};
  261. }
  262.  
  263. .question {
  264.     font-style:italic;
  265.     width:422px;
  266.     height:auto;
  267.     padding:10px;
  268.     margin-left:58px;
  269.     text-align:right;
  270.     margin-top:-5px;
  271.     overflow:hidden;
  272. }
  273.  
  274. .answer {
  275.     margin-top:20px;
  276. }
  277.  
  278. ul.chat {
  279.     list-style:none;
  280. }
  281.  
  282. .chat1, .chat {
  283.     margin-left:0px;
  284. }
  285.  
  286. .chat, .chat1, .chat2 {
  287.     margin-top:-3px;
  288.     margin-bottom: -7px;
  289.     padding:5px;
  290. }
  291.  
  292. .chat2odd {
  293.     padding:5px;
  294.     background:{color:TagsBg};
  295.     color:{color:PostsBg};
  296. }
  297.  
  298. .chat2even {
  299.     padding:5px;
  300. }
  301.  
  302. #player {
  303.     width:30px;
  304.     height:30px;
  305.     overflow:hidden;
  306.     position:absolute;
  307.     margin-top:40px;
  308.     margin-bottom:45px;
  309.     margin-left:40px;
  310.     z-index:9999;
  311. }
  312.  
  313. #albumart {
  314.     float:left;
  315.     border:4px solid {color:TagsBg};
  316.     padding-bottom:-3px;
  317.     margin-right:10px;
  318.     width:100px;
  319.     height:100px;
  320. }
  321.  
  322. #albumart img {
  323.     width:100px;
  324.     height:100px;
  325.     background:{color:TagsBg};
  326. }
  327.  
  328. #aud {
  329.     min-height:100px;
  330. }
  331.  
  332. .tags {
  333.     text-transform:lowercase;
  334.     font-style:italic;
  335. }
  336.  
  337. .credit {
  338.     text-transform: uppercase;
  339.     position: fixed;
  340.     background:#929292;
  341.     bottom:5px;
  342.     right:5px;
  343.     font-size:9px;
  344.     border:1px solid white;
  345.     padding:1px 3px;
  346. }
  347.  
  348. .credit a {
  349.     color:white;
  350. }
  351.  
  352. #pagination {
  353.     position:fixed;
  354.     width:530px;
  355.     text-align:right;
  356.     font-style:italic;
  357.     font-size:10px;
  358.     top:48px;
  359.     left:0px;
  360. }
  361.  
  362. #pagination a {
  363.     color:{color:SidebarText};
  364. }
  365.  
  366. .sbpic {
  367.     position:fixed;
  368. }
  369.  
  370. .sbpic img {
  371.     width:530px;
  372.     height:220px;
  373. }
  374.  
  375. * {padding:0; margin:0;}
  376.  
  377. .tabs {
  378.     position:fixed;
  379.     margin-top:197px;
  380. }
  381.  
  382. .tabs div {
  383.     padding:10px;
  384.     width:500px;
  385.     background:{color:SidebarBg};
  386. }
  387.  
  388. .tabs li {
  389.     list-style:none;
  390.     display:inline;
  391.     font-style:italic;
  392.     margin-left:2px;
  393. }
  394.  
  395. .tabs a {
  396.     padding:5px 10px;
  397.     display:inline-block;
  398.     background:{color:SidebarText};
  399.     color:{color:SidebarBg};
  400.     text-decoration:none;
  401. }
  402.  
  403. .tabs a.active {
  404.     background:{color:SidebarBg};
  405.     color:{color:SidebarText};
  406. }
  407.  
  408. .listone li, .listtwo li {
  409.     list-style:none;
  410.     width:200px;
  411.     padding:10px;
  412.     height:15px;
  413.     background:{color:SideLinksBg};
  414.     color:{color:SideLinks};
  415.     margin-bottom:30px;
  416.     text-transform:uppercase;
  417.     text-align:center;
  418.     font-size:9px;
  419.     -webkit-transition: all 0.5s ease-out;
  420.     -moz-transition: all 0.5s ease-out;
  421.     transition: all 0.5s ease-out;
  422. }
  423.  
  424. .listone {
  425.     margin-top:5px;
  426.     margin-left:10px;
  427.     letter-spacing:1px;
  428. }
  429.  
  430. .listtwo {
  431.     position:absolute;
  432.     margin-left:260px;
  433.     margin-top:-195px;
  434.     letter-spacing:1px;
  435. }
  436.  
  437. .listone a, .listtwo a {
  438.     color:{color:SideLinks};
  439.     -webkit-transition: all 0.5s ease-out;
  440.     -moz-transition: all 0.5s ease-out;
  441.     transition: all 0.5s ease-out;
  442. }
  443.  
  444. .listone li:hover, .listtwo li:hover {
  445.     color:{color:SideLinksBg};
  446.     background:{color:SideLinks};
  447.     letter-spacing:3px;
  448. }
  449.  
  450. .listone li:hover a, .listtwo li:hover a {
  451.     color:{color:SideLinksBg};
  452. }
  453.  
  454. #tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {
  455.     position:fixed;
  456.     width:500px;
  457.     padding:15px;
  458.     height:190px;
  459.     color:{color:SidebarText};
  460.     background:{color:SidebarBg};
  461.     margin-top:220px;
  462. }
  463.  
  464. #tab1, #tab3, #tab4, #tab5, #tab6 {
  465.     overflow:auto;
  466. }
  467.  
  468. #tab1::-webkit-scrollbar-thumb {
  469.     background-color:{color:SidebarText};
  470.     height:10px;
  471. }
  472.  
  473. #tab1::-webkit-scrollbar {
  474.     background-color:{color:SidebarBg};
  475.     height:8px;
  476.     width:5px;
  477. }
  478.  
  479. #tab4::-webkit-scrollbar {
  480.     background-color:{color:SidebarBg};
  481.     height:8px;
  482.     width:5px;
  483. }
  484.  
  485. #tab4::-webkit-scrollbar-thumb {
  486.     background-color:{color:SidebarText};
  487.     height:10px;
  488. }
  489.  
  490. #tab5::-webkit-scrollbar {
  491.     background-color:{color:SidebarBg};
  492.     height:8px;
  493.     width:5px;
  494. }
  495.  
  496. #tab5::-webkit-scrollbar-thumb {
  497.     background-color:{color:SidebarText};
  498.     height:10px;
  499. }
  500.  
  501. #tab6::-webkit-scrollbar {
  502.     background-color:{color:SidebarBg};
  503.     height:8px;
  504.     width:5px;
  505. }
  506.  
  507. #tab6::-webkit-scrollbar-thumb {
  508.     background-color:{color:SidebarText};
  509.     height:10px;
  510. }
  511.  
  512. #tab1, #tab4, #tab5, #tab6 {
  513.     font-size:11px;
  514.     letter-spacing:1px;
  515. }
  516.  
  517. #sbbox {
  518.     position:fixed;
  519.     height: 0;
  520.     width: 502px;
  521.      border-top: 15px solid {color:SidebarBottom};
  522.      border-left: 0px solid transparent;
  523.      border-right: 20px solid transparent;
  524.      padding: 0 8px 0 0;
  525.      margin-top:440px;
  526. }
  527.  
  528. </style>
  529.  
  530. <body>
  531.  
  532. <div id="pagination">
  533.     {block:Pagination}
  534.         {block:PreviousPage}
  535.             <a href="{PreviousPage}"><small></small> previous&nbsp;</a>
  536.         {/block:PreviousPage}
  537.         {block:NextPage}
  538.             <a href="{NextPage}">next <small></small></a>
  539.         {/block:NextPage}
  540.     {/block:Pagination}
  541. </div>
  542.  
  543. <div class="sbpic"><img src="{image:Sidebar}"></div>
  544.  
  545. <ul class="tabs">
  546.             <li><a href="#tab1">{text:Tab 1 Title}</a></li>
  547.             <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  548.             <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  549.             {Block:IfTab4}<li><a href="#tab4">{text:Tab 4 Title}</a></li>{/Block:IfTab4}
  550.             {Block:IfTab5}<li><a href="#tab5">{text:Tab 5 Title}</a></li>{/Block:IfTab5}
  551.             {Block:IfTab6}<li><a href="#tab6">{text:Tab 6 Title}</a></li>{/Block:IfTab6}
  552.         </ul>
  553.         <div id="tab1">
  554.             {block:Description}
  555.                 {Description}
  556.             {/block:Description}
  557.         </div>
  558.         <div id="tab2">
  559.             <ul class="listone">
  560.                 <a href="/"><li>index</li></a>
  561.                 <a href="/archive"><li>archive</li></a>
  562.                 <a href="{text:Link 1 URL}"><li>{text:Link 1}</li></a>
  563.             </ul>
  564.             <ul class="listtwo">
  565.                 <a href="{text:Link 2 URL}"><li>{text:Link 2}</li></a>
  566.                 <a href="{text:Link 3 URL}"><li>{text:Link 3}</li></a>
  567.                 <a href="{text:Link 4 URL}"><li>{text:Link 4}</li></a>
  568.             </ul>
  569.         </div>
  570.         <div id="tab3">
  571.             <iframe frameborder="0" border="0" scrolling="no" width="500" height="190" allowtransparency="true" src="http://www.tumblr.com/ask_form/{text:URL}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  572.         </div>
  573.         {Block:IfTab4}
  574.             <div id="tab4">
  575.                 {text:Tab 4 text}
  576.             </div>
  577.         {/Block:IfTab4}
  578.         {Block:IfTab5}
  579.             <div id="tab5">
  580.                 {text:Tab 5 text}
  581.             </div>
  582.         {/Block:IfTab5}
  583.         {Block:IfTab6}
  584.             <div id="tab6">
  585.                 {text:Tab 6 text}
  586.             </div>
  587.         {/Block:IfTab6}
  588. </div>
  589. <div id="sbbox"></div>
  590.  
  591. <div id="content">
  592. {block:Posts}
  593. {block:ContentSource}
  594. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  595. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  596. {/block:SourceLogo}
  597. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  598. {/block:ContentSource}
  599. <div id="posts">
  600.  
  601. {block:Text}
  602. <div class="textpost">
  603. {block:Title}
  604. <a href="{Permalink}"><h2>{Title}</h2></a>
  605. {/block:Title}
  606.  
  607. {Body}
  608. </div>
  609. {/block:Text}
  610.  
  611.  
  612. {Block:Photo}
  613. {LinkOpenTag}
  614. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  615. {LinkCloseTag}
  616.  
  617. {block:Caption}
  618. <div class="caption">{Caption}</div>
  619. {/block:Caption}
  620. {/Block:Photo}
  621.  
  622. {block:Photoset}
  623. <div class="photopost">
  624. <center><div id="photop">{Photoset-500}</div></center>
  625.  
  626. {block:Caption}
  627. <div class="caption">{Caption}</div>
  628. {/block:Caption}
  629. </div>
  630. {/block:Photoset}
  631.  
  632. {block:Quote}
  633. <div class="quotepost"><center>"{Quote}"</center></div>
  634. {block:Source}<div class="source">—{Source}{/block:Source}</div>{/block:Quote}
  635.  
  636. {block:Link}
  637. <div class="linkpost">
  638. <a href="{URL}" class="link" {Target}><h2>{Name}</h2></a></div>
  639. {block:Description}
  640. <div class="description">{Description}</div>
  641. {/block:Description}
  642. {/block:Link}
  643.  
  644. {block:Chat}
  645.     <ul class="chat">
  646.       <div class="chat">
  647.         <div class="chat1">
  648.             {Block:Lines}
  649.                 <div class="chat2{Alt}">
  650.                 {Block:Label}
  651.                     <span>{Label}</span>
  652.                 {/Block:Label}
  653.             {Line}
  654.                 </div>
  655.             {/Block:Lines}
  656.         </div>
  657.         </div>
  658.     </ul>
  659. {/block:Chat}
  660.  
  661. {block:Answer}<div class="portrait"><img src="{AskerPortraitURL-48}"></div>
  662. <div class="asker">{Asker}asked</div>
  663. <div class="question">{Question}</div>
  664. <div class="answer">{Answer}</div>
  665. {/block:Answer}
  666.  
  667. {block:Video}<div class="videopost">
  668. <center>{Video-500}</center>
  669. {block:Caption}
  670. <div class="caption">{Caption}</div>
  671. {/block:Caption}
  672. </div>
  673. {/block:Video}
  674.  
  675. {block:Audio}<div id="aud">
  676. <div id="player">{AudioPlayerGrey}</div>      
  677. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  678. {PlayCountWithLabel}
  679. {block:Caption}<div class="acaption">{caption}</div>{/block:Caption}
  680. </div>
  681. {/block:Audio}
  682.  
  683. </div>
  684.  
  685. <div class="belowposts">{block:Date}<a href="{Permalink}" target="_blank">{TimeAgo}</a> {/block:Date}{block:NoteCount}  <a href="{Permalink}" target="_blank">• {NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom}  <a href="{ReblogParentURL}">• via</a> <a href="{ReblogRootURL}">• ©</a> {/block:RebloggedFrom}
  686. {block:HasTags}<div class="tags">{block:Tags} <a href="{TagURL}" target="_blank">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}</div></div>
  687. <div class="dbox"></div>
  688. {/block:Posts}
  689. {block:PostNotes}{PostNotes}{/block:PostNotes}
  690.  
  691. <div class="credit"><a href="http://thedoctorknows.tumblr.com/"><center>© theme</center></div>
  692.  
  693. </body>
  694.  
  695. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement