Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Theme 6 - theme challenge May

By: Labyrinthines on Jun 23rd, 2012  |  syntax: None  |  size: 27.27 KB  |  hits: 2,675  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.     theme by merel (labyrinthines.tumblr.com)
  5.     do not remove, change or move the credit in any way. this includes secondary pages!
  6.     do not repost it and claim it as your own.
  7.     do not use it as a base.
  8. -->
  9.  
  10.  
  11. <html>
  12. <head>
  13.         <link rel="shortcut icon" href="{Favicon}"/>
  14.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.         {block:Description}
  16.             <meta name="description" content="{MetaDescription}" />
  17.         {/block:Description}
  18.        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
  19.  
  20.  
  21.  
  22.  
  23.  
  24. <meta name="image:Sidebar1" content=""/>
  25. <meta name="image:Sidebar2" content=""/>
  26. <meta name="image:Sidebar3" content=""/>
  27. <meta name="image:Sidebar4" content=""/>
  28. <meta name="image:Sidebar5" content=""/>
  29. <meta name="color:Background" content="#ffffff/>
  30. <meta name="color:Text" content="#000000"/>
  31. <meta name="color:Links" content="#dbff66"/>
  32. <meta name="color:Links Hover" content="#cbc41d"/>
  33. <meta name="color:Sidebar Title Color" content="#ffffff"/>
  34. <meta name="color:Upper Right Block" content="#dbff66"/>
  35. <meta name="color:Upper Left Block" content="#e9ffa1"/>
  36. <meta name="color:Bottom Right Block" content="#f4f030"/>
  37. <meta name="color:Bottom Left Block" content="#cbc41d"/>
  38. <meta name="text:Body Font" content="consolas"/>
  39. <meta name="text:Sidebar Font" content="consolas"/>
  40. <meta name="text:Sidebar Title" content="we'll be the young & insane"/>
  41. <meta name="text:Link 1" content="Link 1"/>
  42. <meta name="text:Link 1 URL" content="/"/>
  43. <meta name="text:Link 2" content="Link 2"/>
  44. <meta name="text:Link 2 URL" content="/"/>
  45. <meta name="text:Link 3" content="Link 3"/>
  46. <meta name="text:Link 3 URL" content="/"/>
  47. <meta name="text:Link 4" content="Link 4"/>
  48. <meta name="text:Link 4 URL" content="/"/>
  49. <meta name="text:Link 5" content="Link 5"/>
  50. <meta name="text:Link 5 URL" content="/"/>
  51. <meta name="text:Body Font Size" content="10px"/>
  52.  
  53.  
  54. <script type="text/javascript">
  55. function toggleDiv(toggle){
  56. if(document.getElementById(toggle).style.display == 'block'){
  57. document.getElementById(toggle).style.display = 'none';
  58. }else{
  59. document.getElementById(toggle).style.display = 'block';
  60. }
  61. }
  62. </script>
  63.  
  64.  <script src="http://code.jquery.com/jquery-latest.js"></script>
  65.  
  66.  
  67.  
  68.  
  69.  <script type="text/javascript">
  70. // when the DOM is ready...
  71. $(document).ready(function () {
  72.  
  73. var $panels = $('#slider .scrollContainer > div');
  74. var $container = $('#slider .scrollContainer');
  75.  
  76. // if false, we'll float all the panels left and fix the width
  77. // of the container
  78. var horizontal = true;
  79.  
  80. // float the panels left if we're going horizontal
  81. if (horizontal) {
  82.   $panels.css({
  83.     'float' : 'left',
  84.     'position' : 'relative' // IE fix to ensure overflow is hidden
  85.   });
  86.  
  87.   // calculate a new width for the container (so it holds all panels)
  88.   $container.css('width', $panels[0].offsetWidth * $panels.length);
  89. }
  90.  
  91. // collect the scroll object, at the same time apply the hidden overflow
  92. // to remove the default scrollbars that will appear
  93. var $scroll = $('#slider .scroll').css('overflow', 'hidden');
  94.  
  95. // apply our left + right buttons
  96. $scroll
  97.   .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  98.   .after('<img class="scrollButtons right" src="images/scroll_right.png" />');
  99.  
  100. // handle nav selection
  101. function selectNav() {
  102.   $(this)
  103.     .parents('ul:first')
  104.       .find('a')
  105.         .removeClass('selected')
  106.       .end()
  107.     .end()
  108.     .addClass('selected');
  109. }
  110.  
  111. $('#slider .navigation').find('a').click(selectNav);
  112.  
  113. // go find the navigation link that has this target and select the nav
  114. function trigger(data) {
  115.   var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  116.   selectNav.call(el);
  117. }
  118.  
  119. if (window.location.hash) {
  120.   trigger({ id : window.location.hash.substr(1) });
  121. } else {
  122.   $('ul.navigation a:first').click();
  123. }
  124.  
  125. // offset is used to move to *exactly* the right place, since I'm using
  126. // padding on my example, I need to subtract the amount of padding to
  127. // the offset.  Try removing this to get a good idea of the effect
  128. var offset = parseInt((horizontal ?
  129.   $container.css('paddingTop') :
  130.   $container.css('paddingLeft'))
  131.   || 0) * -1;
  132.  
  133.  
  134. var scrollOptions = {
  135.   target: $scroll, // the element that has the overflow
  136.  
  137.   // can be a selector which will be relative to the target
  138.   items: $panels,
  139.  
  140.   navigation: '.navigation a',
  141.  
  142.   // selectors are NOT relative to document, i.e. make sure they're unique
  143.   prev: 'img.left',
  144.   next: 'img.right',
  145.  
  146.   // allow the scroll effect to run both directions
  147.   axis: 'xy',
  148.  
  149.   onAfter: trigger, // our final callback
  150.  
  151.   offset: offset,
  152.  
  153.   // duration of the sliding effect
  154.   duration: 500,
  155.  
  156.   // easing - can be used with the easing plugin:
  157.   // http://gsgd.co.uk/sandbox/jquery/easing/
  158.   easing: 'swing'
  159. };
  160.  
  161. // apply serialScroll to the slider - we chose this plugin because it
  162. // supports// the indexed next and previous scroll along with hooking
  163. // in to our navigation.
  164. $('#slider').serialScroll(scrollOptions);
  165.  
  166. // now apply localScroll to hook any other arbitrary links to trigger
  167. // the effect
  168. $.localScroll(scrollOptions);
  169.  
  170. // finally, if the URL has a hash, move the slider in to position,
  171. // setting the duration to 1 because I don't want it to scroll in the
  172. // very first page load.  We don't always need this, but it ensures
  173. // the positioning is absolutely spot on when the pages loads.
  174. scrollOptions.duration = 1;
  175. $.localScroll.hash(scrollOptions);
  176.  
  177. });</script>
  178.  
  179.  
  180.  
  181.  
  182.  
  183. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  184.  
  185.  
  186. <script src="http://dl.dropbox.com/u/70381927/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
  187. <script src="http://dl.dropbox.com/u/70381927/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
  188. <script src="http://dl.dropbox.com/u/70381927/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
  189.  
  190.  
  191. <script type="text/javascript">$(document).ready(function() {
  192.   $('#slidebottom button').click(function() {
  193.     $(this).next().slideToggle();
  194.   });
  195.  
  196.   $('#slidewidth button').click(function() {
  197.     $(this).next().animate({width: 'toggle'});
  198.   });
  199.  
  200.  
  201.   $('#slideleft button').click(function() {
  202.     var $lefty = $(this).next();
  203.     $lefty.animate({
  204.       left: parseInt($lefty.css('left'),10) == 0 ?
  205.       -$lefty.outerWidth() :
  206.       0
  207.     });
  208.   });
  209.  $('#slidemarginleft button').click(function() {
  210.     var $marginLefty = $(this).next();
  211.     $marginLefty.animate({
  212.       marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
  213.       $marginLefty.outerWidth() :
  214.       0
  215.     });
  216.   });  
  217.  
  218.   $('#slidewidthsome button').click(function() {
  219.     var $some = $(this).next(),
  220.     someWidth = $some.outerWidth(),
  221.     parentWidth = $some.parent().width();
  222.     $some.animate({
  223.       width: someWidth === parentWidth ?
  224.       someWidth/2 :
  225.       parentWidth - (parseInt($some.css('paddingLeft'),10) + parseInt($some.css('paddingRight'),10))});
  226.   });
  227.  
  228. });
  229.    </script>
  230.  
  231.  
  232.  
  233.  
  234. <script language="JavaScript">
  235. <!--
  236. // ==============================================
  237. // Copyright 2003 by jsCode.com
  238. // Source: jsCode.com
  239. // Author: etLux
  240. // Free for all; but please leave in the header.
  241. // ==============================================
  242.  
  243. // Set up the image files to be used.
  244. var theImages = new Array() // do not change this
  245. // To add more image files, continue with the
  246. // pattern below, adding to the array. Rememeber
  247. // to increment the theImages[x] index!
  248.  
  249. theImages[0] = '{image:Sidebar1}'
  250. theImages[1] = '{image:Sidebar2}'
  251. theImages[2] = '{image:Sidebar3}'
  252. theImages[3] = '{image:Sidebar4}'
  253. theImages[4] = '{image:Sidebar5}'
  254.  
  255. // ======================================
  256. // do not change anything below this line
  257. // ======================================
  258.  
  259. var j = 0
  260. var p = theImages.length;
  261.  
  262. var preBuffer = new Array()
  263. for (i = 0; i < p; i++){
  264.    preBuffer[i] = new Image()
  265.    preBuffer[i].src = theImages[i]
  266. }
  267.  
  268. var whichImage = Math.round(Math.random()*(p-1));
  269. function showImage(){
  270. document.write('<img src="'+theImages[whichImage]+'">');
  271. }
  272.  
  273. //-->
  274. </script>
  275.  
  276.  
  277.  
  278.  
  279. <style type="text/css">
  280.  
  281.  
  282.  
  283.  
  284. @font-face {
  285.     font-family: 'Facet Ultra';
  286.     src: url('http://dl.dropbox.com/u/70381927/facet_ultra-webfont.eot');
  287.     src: url('http://dl.dropbox.com/u/70381927/facet_ultra-webfont.eot?#iefix') format('embedded-opentype'),
  288.          url('http://dl.dropbox.com/u/70381927/facet_ultra-webfont.woff') format('woff'),
  289.          url('http://dl.dropbox.com/u/70381927/facet_ultra-webfont.ttf') format('truetype'),
  290.          url('http://dl.dropbox.com/u/70381927/facet_ultra-webfont.svg#') format('svg');
  291.     font-weight: normal;
  292.     font-style: normal;
  293.  
  294. }
  295.  
  296. p {
  297.     text-a;ogn:justify;
  298.     }
  299.  
  300. body {
  301.     color:{color:Text};
  302.     background-color:{color:Background};
  303.     background-attachment:fixed;
  304.     font-family:{text:Body Font};
  305.     font-size:{text:Body Font Size};
  306.     line-height: 120%;
  307.     text-align:justify;
  308. }
  309.  
  310.  
  311. a:link, a:active, a:visited {
  312.    transition:  all 0.6s ease-in-out 0s;
  313.     -moz-transition: all 0.6s ease-in-out 0s;
  314.     -webkit-transition:  all 0.6s ease-in-out 0s;
  315.     -o-transition:  all 0.6s ease-in-out 0s;
  316.     font-family:{text:Body Font Size};
  317.     text-transform:uppercase;
  318.     font-weight:none;
  319.     text-align: center;
  320.     text-decoration: none;
  321.     color: {color:Links};
  322. }
  323.  
  324. a:hover {
  325.    transition:  all 0.6s ease-in-out 0s;
  326.     -moz-transition: all 0.6s ease-in-out 0s;
  327.     -webkit-transition:  all 0.6s ease-in-out 0s;
  328.     -o-transition:  all 0.6s ease-in-out 0s;
  329.     text-align: center;
  330.     color:{color:Links Hover};
  331.     }
  332.  
  333. a img {
  334. border: 0px;
  335. }
  336.  
  337. .posty img {
  338.     max-width:400px;
  339.     }
  340.  
  341. .content {
  342.     background-color: {color:Background};
  343.     width: 464px;
  344.     z-index: 10;
  345.     position:absolute;
  346.     font-family: {text:Body Font};
  347.     padding:0; margin:0;
  348.     font-size: {text:Body Font Size};
  349.    }
  350.  
  351.  
  352. .posty {
  353.     background-color: {color:Post Background};
  354.     font-style: normal;
  355.     overflow: hidden;
  356.     text-align:justify;
  357.     width:400px;
  358.     z-index: 11;
  359.     margin:0 0 32px 0;
  360.     padding:0;
  361.     transition:  all 0.6s ease-in-out 0s;
  362.     -moz-transition: all 0.6s ease-in-out 0s;
  363.     -webkit-transition:  all 0.6s ease-in-out 0s;
  364.     -o-transition:  all 0.6s ease-in-out 0s;
  365.    
  366. }
  367.  
  368. .lik li {
  369.     background-color: {color:Background};
  370.     border-left: 0 solid #FFFFFF;
  371.     font-size: 8px;
  372.     height: 10px;
  373.     line-height: 10px;
  374.     list-style-type: none;
  375.     margin-bottom: 19.3px;
  376.     margin-left: -50px;
  377.     margin-top: -10px;
  378.     padding: 2px;
  379.     text-transform: uppercase;
  380.     width: 250px;
  381.     z-index: 1000;
  382. }
  383.  
  384. .lik li:hover {
  385.     border-left: 50px solid {color:Upper Right Block};
  386.     color: #FFFFFF;
  387.     width:200px;
  388.     transition:  all 0.6s ease-in-out 0s;
  389.     -moz-transition: all 0.6s ease-in-out 0s;
  390.     -webkit-transition:  all 0.6s ease-in-out 0s;
  391.     -o-transition:  all 0.6s ease-in-out 0s;
  392. }
  393.  
  394.  
  395.  
  396. .notesandtags {
  397.     -moz-transition: all 0.6s ease-in-out 0s;
  398.     background-color: {color:Background};
  399.     color: {color:Links};
  400.     font-family: consolas;
  401.     margin-bottom: 8px;
  402.     min-height: 16px;
  403.     opacity: 0.7;
  404.     text-align: left;
  405.     text-transform: uppercase;
  406.     width: 400px;
  407. }
  408.  
  409. .notesandtags a:hover {
  410.     color:#fff;
  411.     }
  412.    
  413. .tags {
  414.     transition:  all 0.6s ease-in-out 0s;
  415.     -moz-transition: all 0.6s ease-in-out 0s;
  416.     -webkit-transition:  all 0.6s ease-in-out 0s;
  417.     -o-transition:  all 0.6s ease-in-out 0s;
  418.     font-size: 7px;
  419.     margin-top:5px;
  420.     padding: 5px 10px;
  421.     letter-spacing: 1px;
  422.     line-height: 100%;
  423.     font-family:consolas;
  424.     background-color:transparent;
  425.     min-height:6px;
  426.     text-transform: uppercase;
  427.     width: 380px;
  428.     text-align:justify;
  429. }
  430.  
  431. .tag {
  432.     transition:  all 0.6s ease-in-out 0s;
  433.     -moz-transition: all 0.6s ease-in-out 0s;
  434.     -webkit-transition:  all 0.6s ease-in-out 0s;
  435.     -o-transition:  all 0.6s ease-in-out 0s;
  436.     font-weight: normal;
  437.     background-color:transparent;
  438.     opacity: 1;
  439.     font-family:consolas;
  440.     margin-right: 2px;
  441.     font-size: 8px;
  442.     color: {color:Links};
  443.     line-height:5px;
  444. }
  445.  
  446.  
  447.  
  448. h3 {
  449.     font-family: open sans;
  450.     font-weight: 800;
  451.     font-size: 15px;
  452.     letter-spacing: 2px;
  453.     margin: 0;
  454.     background-color:{color:Upper Right Block};
  455.     color:#fff;
  456.     padding: 5px;
  457.     text-align: right;
  458.     line-height:25px;
  459.     text-transform:uppercase;
  460. }
  461.  
  462. h3 a:link, h3 a:active, h3 a:visited {
  463.     font-family: open sans;
  464.     color:#fff;
  465.     font-weight: 800;
  466.     font-size: 15px;
  467.     letter-spacing: 2px;
  468.     padding:5px;
  469.     text-transform:uppercase;
  470.     letter-spacing: 0px;}
  471.  
  472. blockquote {
  473.     background-color: {color:Background};
  474.     border-left: 1px solid {color:Bottom Right Block};
  475.     font-size: 10px;
  476.     margin: 5px 5px 5px 50px;
  477.     padding-left: 5px;
  478.     padding-right: 10px;
  479.     text-align: justify;
  480.     width: 340px;
  481. }
  482.  
  483. blockquote a:link, blockquote a:active, blockquote a:visited {
  484.     font-size:8px;
  485.     }
  486.    
  487. .quote {
  488. font-family: {font:Body};
  489. font-size: 10px;
  490. color: {color:Text};
  491. }
  492.  
  493. .source {
  494.     margin-top:1px;
  495.     margin-bottom:10px;
  496.     text-transform:uppercase;
  497.     font-family:{text:Body};
  498.     font-size: 9px;
  499.     background-color:{color:Background};
  500.     border-right:50px solid {color:Upper Right Block};
  501.     line-height: 20px;
  502.     margin-bottom:20px;
  503.     text-align: right;  
  504.     padding-right: 70px
  505. }
  506.  
  507. .link {
  508.     font-family: open sans;
  509.     font-weight: 800;
  510.     font-size: 15px;
  511.     letter-spacing: 2px;
  512.     margin: 0;
  513.     background-color:{color:Upper Right Block};
  514.     color:#fff;
  515.     padding: 5px;
  516.     text-align: right;
  517.     line-height:25px;
  518.     text-transform:uppercase;
  519.     width:400px;
  520. }
  521. .link a {
  522.     font-family: open sans;
  523.     font-weight: 800;
  524.     font-size: 15px;
  525.     letter-spacing: 2px;
  526.     margin: 0;
  527.     background-color:#dbff66;
  528.     color:#fff;
  529.     padding: 5px;
  530.     text-align: right;
  531.     line-height:25px;
  532.     text-transform:uppercase;
  533.     width:400px;
  534.     }
  535.  
  536.  
  537. .link:hover {
  538.     color: {color:Links Hover};
  539. }
  540.  
  541. ul.chat {
  542.     margin: 10px 0px 10px 0px;
  543.     padding: 0;
  544. }
  545.  
  546. .chat li {
  547.     list-style-type: none;
  548.     margin-left: 0px; margin:3px;
  549.     padding: 3px;
  550. }
  551.  
  552. .chat li.odd {
  553.     background-color:{color:Background};
  554.     margin-bottom: 1px;
  555.     color: {color:Text};
  556.     border-left: 10px solid {color:Upper Left Block};
  557. }
  558.  
  559. .chat li.even {
  560.     background-color: {color:Background};
  561.     margin-bottom: 1px;
  562.     border-left: 10px solid {color:Upper Right Block};
  563.     color: {color:Text};
  564. }
  565.  
  566. .label {
  567.     font-weight: bold;
  568. }
  569.  
  570.  
  571. .notes li {
  572.     padding-bottom:1.3em;
  573.     text-transform:uppercase;
  574.     font-size:8px;
  575.     margin-left:-10px;
  576.     letter-spacing:1px;
  577. }
  578.  
  579.  
  580. .notes li img.avatar {
  581.     border-radius: 8px 8px 8px 8px;
  582.     font-size: 8px;
  583.     height: 16px;
  584.     line-height: 7px;
  585.     margin-left: -20px;
  586.     margin-right: 5px;
  587.     text-transform: uppercase;
  588.     width: 16px;
  589.     margin-bottom: -5px;
  590. }
  591.  
  592. ol.notes {
  593.     list-style: none outside none;
  594. }
  595.  
  596. .asker {
  597.     color: {color:Text};
  598.     font-family: {font:Body};
  599.     font-size: 7px;
  600.     letter-spacing: 1px;
  601.     line-height: 100%;
  602.     text-align: center;
  603.     text-transform: uppercase;
  604. }
  605.    
  606. .asker a:link, .asker a:active, .asker a:visited {
  607.     color: {color:Text};
  608.     font-family: {font:Body};
  609.     font-size: 7px;
  610.     letter-spacing: 1px;
  611.     line-height: 100%;
  612.     text-align: center;
  613.     text-transform: uppercase;
  614. }
  615.    
  616. .asker a:hover {
  617.     color: {color:Text};
  618.     font-family: {font:Body};
  619.     font-size: 7px;
  620.     letter-spacing: 1px;
  621.     line-height: 100%;
  622.     text-align: center;
  623.     text-transform: uppercase;
  624. }
  625.  
  626. .schuif a:hover {
  627.   padding-bottom:3px;
  628.   color:#000;
  629.     border-bottom:5px solid #000;
  630.     }
  631.    
  632. .ding a {
  633.     -moz-transition: all 0.5s ease 0s;
  634.     background-color: #fff;
  635.     color: #252525;
  636.     font-family: consolas;
  637.     font-size: 0;
  638.     letter-spacing: 1px;
  639.     position: absolute;
  640.     text-align: center;
  641.     text-transform: uppercase;
  642.     width: 0;
  643.     z-index: 1000;
  644.     line-height: 30px;
  645. }
  646. .ding a:hover {
  647.     background-color: #FFFFFF;
  648.     color: #000;
  649.     line-height: 30px;
  650. }
  651. .ding {
  652.     -moz-transition: all 0.5s ease 0s;
  653.     height: 0;
  654.     opacity: 0;
  655.     width: 400px;
  656. }
  657. .posty:hover .ding {
  658.     -moz-transition: all 0.5s ease 0s;
  659.     opacity: 1;
  660.     width: 400px;
  661. }
  662. .posty:hover div.ding a {
  663.     font-size: 8px;
  664.     width: 400px;
  665.     letter-spacing: 2px;
  666. }
  667.  
  668. #foto:hover .caps {
  669.     display:block;
  670.        transition:  all 0.6s ease-in-out 0s;
  671.     -moz-transition: all 0.6s ease-in-out 0s;
  672.     -webkit-transition:  all 0.6s ease-in-out 0s;
  673.     -o-transition:  all 0.6s ease-in-out 0s;
  674.     }
  675.      
  676. {block:IndexPage}#foto .caps {
  677.     display: none;
  678.        transition:  all 0.6s ease-in-out 0s;
  679.     -moz-transition: all 0.6s ease-in-out 0s;
  680.     -webkit-transition:  all 0.6s ease-in-out 0s;
  681.     -o-transition:  all 0.6s ease-in-out 0s;
  682.     }{/block:IndexPage}
  683.  
  684.  
  685. #fotoset:hover .caps {
  686.     display:block;
  687.      transition:  all 0.6s ease-in-out 0s;
  688.     -moz-transition: all 0.6s ease-in-out 0s;
  689.     -webkit-transition:  all 0.6s ease-in-out 0s;
  690.     -o-transition:  all 0.6s ease-in-out 0s;
  691.     }
  692.      
  693. {block:IndexPage}
  694. #fotoset .caps {
  695.     display: none;
  696.     transition:  all 0.6s ease-in-out 0s;
  697.     -moz-transition: all 0.6s ease-in-out 0s;
  698.     -webkit-transition:  all 0.6s ease-in-out 0s;
  699.     -o-transition:  all 0.6s ease-in-out 0s;
  700. }
  701. {/block:IndexPage}
  702.  
  703.  
  704. #slider {
  705.     width: 250px;
  706.     margin: 0 auto;
  707.     position: relative;
  708. }
  709.  
  710. .navigation li  {
  711.     text-decoration:none;
  712.     list-style-type: none;
  713.     float:left;
  714.     font-family:calibri;
  715.     font-size:25px;
  716.     color:#fff;
  717.       }
  718.      
  719. .selected  {
  720.     font-family:calibri;
  721.     font-size:25px;
  722.     color: {color:Upper Right Block} !important;
  723. }
  724.      
  725. .navigation a:link, .navigation a:active, .navigation a:visited {
  726.     font-family:calibri;
  727.     font-size:25px;
  728.     color:#fff;
  729. }
  730.  
  731. .scroll {
  732.     height: 177px;
  733.     overflow: auto;
  734.     position: relative;
  735.     clear: left;
  736.     background: transparent;
  737. }
  738.  
  739. .scrollContainer div.panel {
  740.     height: 177px;
  741.     width: 250px;
  742. }
  743.  
  744. .scrollButtons {
  745.   position: absolute;
  746.   top: 150px;
  747.   cursor: pointer;
  748.   display:none;
  749. }
  750.  
  751. .scrollButtons.left {
  752.     left: -20px;
  753.     display:none;
  754. }
  755.  
  756. .scrollButtons.right {
  757.     right: -20px;
  758.     display:none;
  759. }
  760.  
  761.  
  762. ul, menu, dir {
  763. display: block;
  764. list-style-type: disc;
  765. -webkit-margin-before: 1em;
  766. -webkit-margin-after: 1em;
  767. -webkit-margin-start: 0px;
  768. -webkit-margin-end: 0px;
  769. -webkit-padding-start: 0px;
  770. }
  771.  
  772. {CustomCSS}
  773. </style>
  774.  
  775. <title>{Title}</title>
  776.  
  777.  
  778.  
  779.  
  780.  
  781. </head>
  782.  
  783. <body>
  784.  
  785.  
  786.  
  787.  
  788. <div style="height:86px; width:100%; background-color:#fff; position:fixed; top:0px; z-index:100;"></div>
  789.  
  790.  
  791. <center>
  792.  
  793.  
  794.  
  795.  
  796.  
  797.  
  798. <div style="width: 121px; position: fixed; margin: auto; right: 901px; left: 0px; height: 590px;  top: 86px;">
  799.  
  800. <div style="width: 121px; background-color: {color:Upper Left Block}; height: 373px;"></div>
  801.  
  802. <div style="width: 121px; margin-top: 32px; background-color: {color:Bottom Left Block}; height: 5000px;"></div></div>
  803.  
  804.  
  805. <div class="content" style=" top:86px; margin:auto; position:absolute; left:0pt; right:317px; ">
  806.  
  807. {block:Posts}
  808.  
  809.  
  810.  <div class="posty">
  811.  
  812. {block:IndexPage}
  813. <div class="ding">{block:Date}<a href="{Permalink}">{TimeAgo}{/block:Date}  {block:NoteCount} with  {NoteCount} notes{/block:NoteCount}</a>
  814. </div>
  815. {/block:IndexPage}
  816.  
  817. {block:Text}
  818.  
  819. {block:Title}
  820. <h3><a href="{Permalink}">{Title}</a></h3>
  821. {/block:Title}
  822. {Body}
  823. {/block:Text}
  824.  
  825. {block:Photo}
  826. <div id="foto">
  827. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  828.  
  829. {block:Caption}<div class="caps">{Caption}</div>
  830.  
  831.  
  832. {block:ContentSource}
  833. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  834. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  835. {/block:SourceLogo}
  836. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  837. {/block:ContentSource}{/block:Caption}</div>
  838. {/block:Photo}
  839.  
  840.  
  841. {block:Photoset}
  842. <div id="fotoset">
  843. <center>{Photoset-400}</center>
  844. {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}</div>
  845. {/block:Photoset}
  846.  
  847. {block:Quote}
  848. <div style="text-align: justify; color: rgb(0, 0, 0); padding: 50px 20px 20px 20px; background-color: #fff;  width: 400px;"><span style="color:#000;" class="quote">"{Quote}"</span></div>
  849.  
  850. {block:Source}
  851. <div class="source"> {Source}</div>
  852. {/block:Source}
  853. {/block:Quote}
  854.  
  855. {block:Link}
  856. <center><a href="{URL}" class="link" {Target}>{Name}</a></center>
  857. {block:Description}
  858. <div class="description">{Description}</div>
  859. {/block:Description}
  860. {/block:Link}
  861.  
  862. {block:Chat}
  863. {block:Title}
  864. <h3><a href="{Permalink}">{Title}</a></h3>
  865. {/block:Title}
  866. <ul class="chat">
  867. {block:Lines}
  868. <li class="{Alt} user_{UserNumber}">
  869. {block:Label}
  870. <span class="label">{Label}</span>
  871. {/block:Label}
  872. {Line}
  873. </li>
  874. {/block:Lines}
  875. </ul>
  876. {/block:Chat}
  877.  
  878. {block:Video} <div id="fotoset">
  879. <center>{Video-400}</center>
  880. {block:Caption}<div class="caps">{Caption}</div>{/block:Caption}</div>
  881. {/block:Video}
  882.  
  883. {block:Audio} <div id="fotoset">
  884. <center>
  885. <div style="text-transform:uppercase; width:380px; height:75px; padding: 15px;">{block:AlbumArt}
  886. <img src="{AlbumArtURL}" width="75px" height="75px;" style="float:left;">
  887. {/block:AlbumArt}
  888. {AudioPlayerWhite}
  889. <span style="color:#000; font-family:consolas; font-size:8px; letter-spacing:3px;  ">
  890. {block:Artist}
  891. {Artist}
  892. {/block:Artist} - {block:TrackName}
  893. {TrackName}
  894. {/block:TrackName}<br>
  895.     {PlayCountWithLabel}
  896. </span> </div>
  897. </center>{block:Caption}<div class="caps">{Caption}</div>{/block:Caption}</div>
  898. {/block:Audio}
  899.  
  900.  
  901. {block:Answer}
  902.  
  903. <div style="text-align: justify; color: rgb(0, 0, 0); padding: 50px 20px 15px 20px; background-color: {color:Background}; width: 400px;">{Question}</div>
  904.  <center> <div style="font-size: 9px; background-color:#fff;
  905. border-right:70px solid {color:Upper Right Block}; text-transform: uppercase; height: 20px; line-height: 20px; text-align: right; padding-right: 70px;">ASKED BY {Asker}</div></center><div style="text-align:justify;">
  906.  
  907.  
  908.  
  909. <div style="margin-top:-30px; padding-left:345px;"><img src="{AskerPortraitURL-40}"></div>
  910. {Answer}
  911. </div>
  912. {/block:Answer}
  913.  
  914.  
  915.  
  916.  
  917. <div class="notesandtags">
  918.  
  919.  
  920. {block:RebloggedFrom}
  921.     <div style="background-color: #fff; float: right; height: 16px; letter-spacing: 3px; margin-left: 10px; margin-right: -10px; padding-bottom: 5px;  padding-right: 10px; padding-left: 5px;"><a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-16}"></a>  <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-16}"></a></div>
  922. {/block:RebloggedFrom}
  923.  
  924.  
  925. <div class="tags">{block:Tags} <a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags}
  926. </div>
  927.  
  928. </div>
  929.  
  930.  
  931.  
  932.   {block:PermalinkPage}
  933.     <div style="height:10px; "></div>
  934.      {block:PostNotes}
  935. <div style="padding: 5px; text-align: center; font-family: open sans; font-weight: 800; font-size: 25px; letter-spacing: 0px; border-left: 30px solid {color:Bottom Right Block}; border-right: 140px solid {color:Upper Left Block}; margin-bottom:20px;">
  936. <a href="javascript:;" style="font-family:open sans; color:{color:Upper Right Block};" onmousedown="toggleDiv('toggle');">TOGGLE NOTES</a></div>
  937.  
  938. <div id="toggle" style="display: none; text-align:left;">
  939.  {PostNotes}{/block:PostNotes}</div>
  940.  
  941.      {/block:PermalinkPage}
  942.      
  943.      
  944.      
  945.  
  946.  </div> {/block:Posts}
  947.  
  948.    
  949. </div>
  950.  
  951.  
  952. <div style="width: 121px; z-index: 100; height: 565px; position: fixed; margin:auto; top:86px; left:268px; right:0px; "><div style="height:200px; width:121px;  background-color:{color:Upper Right Block}; "></div> <div style="height:5000px; width:121px; margin-top:32px;  background-color:{color:Bottom Right Block}; "></div></div>
  953.  
  954.  
  955.  
  956.  
  957. <div style="width:301px; top:86px;  height: 565px; margin-left:28px; background-color:#fff; position:fixed; margin:auto; left:752px; right:0px; ">
  958.    
  959. <script language="JavaScript">
  960. <!--
  961. // ==============================================
  962. // Copyright 2003 by jsCode.com
  963. // Source: jsCode.com
  964. // Author: etLux
  965. // Free for all; but please leave in the header.
  966. // ==============================================
  967. showImage();
  968. //-->
  969. </script>
  970.  
  971.  
  972.  
  973.  
  974.  
  975. </div>
  976.  
  977.  
  978.  
  979.  
  980.  
  981.  
  982.  
  983. <div style="position:fixed; z-index:1000000; left:0pt; top:0pt; margin:auto; top:106px; left:752px; right:0px; width:250px; height:250px;  ">
  984.  
  985. <div id="slider">
  986.  
  987. <ul class="navigation" style="position:fixed; left:928px; right:0pt;  top:290px; z-index:100000; margin:auto; height:10px; width:40px; ">
  988.     <li><a href="#sites" class="selected">•</a></li>
  989.     <li><a href="#files" class="">•</a></li>
  990.     <li><a href="#link" class="">•</a></li>
  991.   </ul>
  992.  
  993.   <!-- element with overflow applied -->
  994.   <div class="scroll">
  995.     <!-- the element that will be scrolled during the effect -->
  996.     <div class="scrollContainer">
  997.       <!-- our individual panels -->
  998.       <div class="panel" id="sites">
  999.      
  1000. <div style="bottom: 0pt; font-family: open sans; background-color: {color:Background}; font-weight: 800; color: {color:Upper Right Block}; font-size: 25px; left: 0pt;  margin: 79px auto auto; position: absolute; text-transform: uppercase; top: 0pt; right: 0pt; width: 250px; line-height: 24px; padding-top: 25px; height: 73px;">{text:Sidebar Title}
  1001. </div>
  1002.    
  1003.    
  1004. </div>
  1005.  
  1006.  
  1007.   <div id="files" class="panel">
  1008.      
  1009.       <div style="height: 177px; background-color: rgb(255, 255, 255);">
  1010. <div style="text-align: justify; width: 210px; padding: 10px 20px; line-height: 9px; letter-spacing: 0px; text-transform: uppercase; font-size: 8px; font-family:consolas;">
  1011. {description} </div>
  1012.       </div>
  1013.      
  1014.       </div>
  1015.  
  1016.  <div class="panel" id="link">
  1017.      
  1018.       <div style="height: 177px; ">
  1019.  
  1020. <ul class="lik">
  1021.  
  1022.  <li> <a href="/">HOME</a></li>
  1023.  <li> <a href="/ask">ASK</a></li>
  1024.  <li> <a href="{text:Link 1 URL}">{text:Link 1}</a></li>
  1025.  <li> <a href="{text:Link 2 URL}">{text:Link 2}</a></li>
  1026.  <li> <a href="{text:Link 3 URL}">{text:Link 3}</a></li>
  1027.  <li> <a href="{text:Link 4 URL}">{text:Link 4}</a></li>
  1028.  <li> <a href="{text:Link 5 URL}">{text:Link 5}</a></li>
  1029.  <li> <a href="http://labyrinthines.tumblr.com">theme</a></li>
  1030.       </ul>
  1031.  
  1032. </div>
  1033.    
  1034.    
  1035.    
  1036.  
  1037.    
  1038. </div>
  1039.  
  1040.  
  1041.  
  1042.  
  1043.     </div>
  1044.   </div>
  1045. </div>
  1046.  
  1047.  
  1048. </div>
  1049.  
  1050. </div>
  1051.  
  1052.  
  1053.  
  1054.  
  1055.  
  1056.  
  1057.  
  1058.  
  1059.  
  1060.  
  1061. <div style="position: fixed; height: 40px; margin: auto; z-index: 10000000; right: 0pt; width: 60px; top: 288px; left: 562px;">
  1062. {block:Pagination}
  1063. {block:PreviousPage}
  1064. <a href="{PreviousPage}"  style="font-size: 15px; color: {color:Upper Right Block}; text-transform: uppercase; font-family:open sans; font-weight:800; line-height: 16px; ">« </a>
  1065. {/block:PreviousPage}
  1066. {block:NextPage}
  1067. <a href="{NextPage}" style="font-size: 15px; color:  {color:Upper Right Block}; text-transform: uppercase; font-family:open sans; font-weight:800; line-height: 16px;"> »</a>
  1068. {/block:NextPage}
  1069. {/block:Pagination}</div>
  1070.  
  1071.  
  1072. </center>
  1073. </body>
  1074. </html>
create a new version of this paste RAW Paste Data