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

{BREAKOUT} Theme 08 by itshazza

By: itshazzabear on Apr 9th, 2012  |  syntax: None  |  size: 16.85 KB  |  hits: 4,547  |  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.     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.  
  5.     <!--
  6.         --------------------------------------------------                
  7.  
  8.              i t s H A Z Z A . t u m b l r . C O M
  9.              T H E M E ❖ 0 8 { B R E A K O U T }
  10.              
  11.         --------------------------------------------------          
  12.    -->
  13.    
  14.     <head>
  15.    
  16.         <!-- DEFAULT VARIABLES -->
  17.         <meta name="color:background" content="#1e1e1c" />
  18.         <meta name="color:entry" content="#222220" />
  19.         <meta name="color:side" content="#262524" />
  20.         <meta name="color:text" content="#777777" />
  21.         <meta name="color:border" content="#803732" />
  22.         <meta name="color:postborder" content="#cb8a74"  />
  23.         <meta name="color:entrytitlee" content="#f7deb5" />
  24.         <meta name="color:bold" content="#f8ac95" />
  25.         <meta name="color:italic" content="#b9b9b9" />
  26.         <meta name="color:link" content="#efbd9c" />
  27.         <meta name="color:lhover" content="#d3a78a" />
  28.         <meta name="color:scrollbar" content="#803732" />
  29.         <meta name="color:sbarbk" content="#3c3b38" />
  30.         <meta name="color:info" content="#272625" />
  31.         <meta name="color:subtext" content="#a5a38e" />
  32.         <meta name="color:desc" content="#8d8d8d">
  33.         <meta name="color:question" content="#343331" />
  34.         <meta name="image:sidebar" content=""/>
  35.         <meta name="image:background" content="" />
  36.         <meta name="text:sideimgtext" content=""/>
  37.         <meta name="text:Link1" content="" />
  38.         <meta name="text:Link1 Title" content="" />
  39.         <meta name="text:Link2" content="" />
  40.         <meta name="text:Link2 Title" content="" />
  41.         <meta name="text:Link3" content="" />
  42.         <meta name="text:Link3 Title" content="" />
  43.         <meta name="text:Link4" content="" />
  44.         <meta name="text:Link4 Title" content="" />
  45.         <meta name="text:Link5" content="" />
  46.         <meta name="text:Link5 Title" content="" />
  47.         <meta name="text:askbox" content="/ask" />
  48.        
  49.      
  50.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  51.         <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  52.         {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  53.         <link rel="shortcut icon" href="{Favicon}" />
  54.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  55.        
  56.        
  57. <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower' rel='stylesheet' type='text/css'>
  58.  
  59.         <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
  60.        
  61.         <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  62.         <style type="text/css">
  63.        
  64.        
  65.      
  66.  body {color:{color:text};
  67.  background-color:{color:background};
  68. background-image: url('{image:Background}');
  69.  background-attachment:fixed;
  70.  background-position: bottom;
  71. font-family:Calibri;
  72. font-size:10px;
  73. line-height:100%;
  74. text-align:justify}
  75.  
  76.  
  77.    
  78.      
  79.      a:link, a:active, a:visited{color: {color:link}; text-decoration:none}
  80.  
  81.     a:hover{color:{color:lhover};}
  82.  
  83.  
  84.      
  85.     #entries{right:30%; margin-left:450px; margin-top:15px; width:520px;}
  86.      
  87.     #sbar {width: 200px; height: auto;}
  88.      '
  89.      #page {width: 245px; height: auto;}
  90.      
  91.     #simg {text-align:center;}
  92.     #simg img {
  93.  max-width: 270px; max-height: 290px; border: 2px solid; border-color: {color:border};
  94.  text-align:center;
  95. margin-top: 12px;
  96. background-color: {color:lhover};
  97.  z-index: 100; margin-bottom:-0px;
  98.  opacity:1;border-radius: 0px 0px 0px 0px;
  99. -webkit-transition: all 1.0s ease-in-out;
  100. -moz-transition: all 1.0s ease-in-out;
  101. -o-transition: all 1.0s ease-in-out;
  102. -ms-transition: all 1.0s ease-in-out;
  103. transition: all 1.0s ease-in-out;
  104.  }
  105.  
  106.  #simg:hover .sideimgtext {
  107. opacity:1; min-height:270px;
  108. -webkit-transition: all 1.0s ease-in-out;
  109. -moz-transition: all 1.0s ease-in-out;
  110. -o-transition: all 1.0s ease-in-out;
  111. -ms-transition: all 1.0s ease-in-out;
  112. transition: all 1.0s ease-in-out;
  113. }
  114.      
  115.     #sidebar {
  116.  background-image: url('{image:sbg}');
  117.  margin-top: 75px; width:285px;
  118.  height: auto;
  119.  margin-left:85px;
  120.  position:fixed;
  121.   border-radius: 0px 0px 0px 0px;
  122.  overflow:hidden;
  123.  background-color: {color:side};
  124.  border-left:0px solid;
  125.  border-right:  0px solid; opacity:0.8;
  126.  border-color: {color:border};
  127.  padding:15px}
  128.  
  129.   #title1 {
  130.  margin-top: 7px; width:200px;
  131.  height: auto; display: block;
  132.  margin-left:129px; line-height:15px;
  133.  position:fixed;
  134.   border-radius: 0px 0px 0px 0px;
  135.  overflow: visible;
  136.  background-color: #transparent;opacity:0.8;
  137.  border-left:0px solid;
  138.  border-right:  0px solid;
  139.  border-color: {color:border};
  140.  padding:15px;}
  141.  
  142. #pag {
  143.  margin-top: -5px; width:285px;
  144.  height: 25px;
  145.  margin-left:0px;
  146.  position:fixed;
  147.  overflow: visible;
  148.  background-color: #transparent;
  149.  
  150. }
  151.  
  152.  
  153. #nav {
  154.  margin-top: 74px; width:100px;
  155.  height: auto; display: block; line-height: 74px;
  156.  margin-left:-6px;
  157.  position:fixed; overflow: visible;
  158.  
  159.  
  160. }
  161.  
  162. #navbasic {
  163.     width:72px;
  164.  height: auto;
  165.  margin-left:11px; display: block;
  166.  background-color: {color:entry};
  167.  position:absolute; overflow: visible;
  168.  
  169. }
  170.  
  171. b2, strong{
  172. color:{color:bold}; font-weight: bold;
  173. }
  174.  
  175. i2, em{
  176. color:{color:italic}; font-style: italic;
  177. }
  178.  
  179.  
  180.  
  181.   #desc {
  182. margin-bottom:4px; margin-top: -5px;
  183.  font-family: Calibri; letter-spacing: 1px;
  184.  font-size:10px; padding: 15px;
  185.  color:{color:desc}; text-transform: none;
  186.  width:255px; text-align:justify; }
  187.      
  188.      
  189.    .pagination {font-family:Calibri; font-size:9px; text-transform:uppercase; text-align:center; padding:0px;}
  190.  
  191.    .nav {font-family:{font:Links}; font-size:6px; text-transform:uppercase; text-align:center; padding:3px; }
  192.  
  193.  
  194.  #navlinks {
  195. font-size: 10px;
  196. letter-spacing: 1px;
  197. text-align:center;
  198. text-transform: lowercase; width:270px;
  199.  height: auto;
  200.  line-height: 25px;
  201.  font-family: calibri;
  202.  font-style: none;
  203.  margin-left:-362px;
  204.  border-radius: 0px 0px 0px 0px;
  205.  position:fixed;
  206.  background-color: {color:entry};
  207.  color: {color:link};        
  208. }
  209.  
  210. #navlink {
  211.  margin-top: -28px;  position: fixed; font-family: georgia; font-style: italic; color: {color:subtext};
  212.  padding:5px; width: 400px; overflow: visible;
  213.  margin-left: 43px; margin-bottom: -20px; z-index:1;
  214. }
  215.      
  216.     #navlink a {
  217. display:inline-block;
  218.  background-color:#transparent; margin-bottom: -12px;
  219.  font:9px {font:body}; overflow: visible;
  220.  text-transform: lowercase;
  221.  -webkit-transition: all 0.6s ease-in-out;
  222. -moz-transition: all 0.6s ease-in-out;
  223. -o-transition: all 0.6s ease-in-out;
  224. -ms-transition: all 0.6s ease-in-out;
  225. transition: all 0.6s ease-in-out;
  226.  color:{color:hovertext};
  227.  text-decoration: none;
  228. opacity: 1;  line-height: 3px;
  229.  letter-spacing: 1px;
  230. text-align: left; border-left:5px solid; border-color:{color:lhover};
  231.  padding:5px;
  232.  margin-top: 15px;}
  233.     #navlink a:hover { color:{color:lhover}; background-color:#transparent; border-left:10px solid; border-color:{color:link};
  234.     -webkit-transition: all 0.6s ease-in-out;
  235. -moz-transition: all 0.6s ease-in-out;
  236. -o-transition: all 0.6s ease-in-out;
  237. -ms-transition: all 0.6s ease-in-out;
  238. transition: all 0.6s ease-in-out;}
  239.  
  240.  
  241.     #posts{
  242. overflow:hidden;
  243.  background-color: {color:entry};
  244.  border-left:0px solid {color:link};
  245. border-right:0px solid {color:link};
  246. padding: 10px; }
  247.  
  248. #posts:hover #info2{
  249. opacity:1;
  250. display:block;border-left:7px solid {color:postborder};
  251. }
  252.      
  253.     h1{
  254. color:{color:entrytitlee};
  255. font-family: 'Permanent Marker', cursive;
  256.  font-size:19px;
  257.  line-height:15px;
  258.      letter-spacing:1px;
  259.  text-transform:none;
  260.  margin-top:-5px;
  261.  border-bottom: 5px solid; border-color: {color:question};
  262.  margin-bottom:0px; font-weight: normal;
  263.  padding:3px;
  264.  text-align:left}
  265.      
  266.     h2{
  267. color:{color:title};
  268.  font-family:{font:body};
  269.  font-size:15px;
  270. line-height:12px;
  271.  letter-spacing:0px;
  272. font-weight:normal;
  273. text-transform:;
  274.  margin:0px;
  275.  padding:0px;
  276.  margin-bottom:-0px;
  277.  text-align:left}
  278.      
  279.     h3{
  280. color: {color:link};
  281. font-family:{font:body};
  282. font-size:15px;
  283. letter-spacing:0px;
  284.  font-weight:normal;
  285. font-style:normal;
  286.  text-transform:lowercase;
  287. line-height:14px;
  288. margin-left:5px;
  289.  margin-top:10px;
  290. margin-bottom:-10px;
  291. text-align:left;
  292.  letter-spacing:1px}
  293.      
  294.      #navigation {
  295. margin-left:368px; display:inline-block; overflow: visible;
  296. margin-top:-20px;
  297. text-align: left; position: absolute; z-index:1;
  298. }
  299.  
  300. #pagination {
  301.  font-family: calibri;
  302.  letter-spacing: 10px;
  303.  padding: 7px; font-size: 9px;
  304.  text-align: center;
  305.  }
  306.     #btt{position:fixed; bottom:10px; right:10px; font-size:10px; font-family:calibri;color:{color:text}; text-transform:uppercase;letter-spacing: 0px; font-style:normal;}
  307.      
  308.     #source {text-align: left}
  309.      
  310.     #info{
  311. font-family:Calibri;
  312.  background-color:{color:info};
  313. font-size:9px; line-spacing: 1px;
  314.  text-transform:uppercase;
  315.  text-align:center;
  316.  padding: 5px;}
  317.      
  318.      #flo {padding:10px 10px 5px 10px}
  319. .qu {font-family:georgia; font-size:25px; font-weight:bold;  line-height:33px; opacity:0.7}
  320. .ote {margin-top:-34px; text-indent:15px; opacity:0.9;}
  321.      
  322.  .asker {width: 490px; background-color: {color:question}; padding: 5px; font-size: 11px; font-weight: normal; color:#777777; text-transform: normal; line-height: 11px;}
  323. .asker img{float: left; padding: 0px 5px 0px 0px}
  324. .asker a{font-size: 11px; font-weight: bold; color:{color:link}; text-transform: normal; line-height: 11px; padding: 0; margin: 0}
  325. .asker a:hover{font-size: 11px; font-weight: bold; color:{color:lhover}; background-color: transparent; text-transform: normal; line-height:11px; padding: 0; margin: 0;}
  326.  
  327. .question {font-size: 10px; font-weight: normal; color:{color:text}; text-transform: none;}
  328. .answer {padding-left: 4px; padding-right: 4px; padding-top: 4px;}
  329. .answer img {max-width: 470px;}
  330.      
  331.     #info2 {width:auto;
  332. margin-left:520px;  
  333. font-family:arial;
  334. font-size:9px; height: auto;
  335. text-transform:lowercase;
  336. text-align:left; position: absolute;
  337. opacity:0;
  338. padding:15px; overflow: visible;
  339. line-height:110%; background-color: #ffffff;
  340. -webkit-transition-duration: 0.6s;
  341. -moz-transition-duration: 0.5s;
  342. border-left:2px solid {color:border};}
  343.  
  344. #info2:hover {opacity:1;border-left:7px solid {color:border}; position: absolute;}
  345.    
  346.      
  347.     p{margin-top:4px; margin-bottom:4px}
  348.     blockquote {
  349.    padding:0px;
  350.    padding-left:5px;
  351.   margin:4px;
  352.   border-left:2px solid {color:text};}
  353.  
  354.  
  355.      
  356.     img a{border:none; width:100%}
  357.     .audio{background-color:black; display:block;}
  358.      
  359.     .user_1 .label {color:{color:link}; font-weight:bold}
  360.     .user_2 .label {color:{color:text}; font-weight:bold}
  361.     ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
  362.      
  363. #notes {font-weight:normal}
  364. #notes li {padding-bottom:0.5em}
  365. #notes li img.avatar {vertical-align:-4px; margin-right:5px; width:16px; height:16px; border-radius:8px}
  366.  
  367.  ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
  368. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:10px!important;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
  369. ::-webkit-scrollbar {background-color:{color:sbarbk}; height:10px; width:7px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
  370. ::-moz-selection {background-color:transparent; color:{color:Link};}
  371. ::selection {background-color:transparent; color:{color:link};}
  372.  
  373. iframe input, iframe submit, iframe textarea, iframe div, iframe table {background-color:transparent!important; z-index:-1}
  374.             </style>
  375.         <style type="text/css">{CustomCSS}</style>
  376.     </head>
  377.    
  378.  
  379.     <body>
  380.  
  381.  
  382.    <br>
  383.  
  384.  
  385.    
  386.      
  387.      <div id="nav"><div class="nav"><img style="float: top; border: solid 12px; border-color:{color:border}; margin-bottom: -30px; margin-top: -2px;" src="{PortraitURL-48}" width="48" height="48" />
  388.      <div id="navbasic"><font size="3px"><a href="/"><img src="http://static.tumblr.com/fswojpc/0htm2u55k/62.png"></a><br><a href="{text:askbox}"><img src="http://icons.iconarchive.com/icons/led24.de/led/16/envelope-icon.png"></a><br><a href="/archive"><img src="http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/address-book-open-icon.png"></a><br><a href="http://itshazza.tumblr.com/tagged/themes"><img src="http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/cookie-bite-icon.png"></a></font></font><br></div></div></div>
  389.    
  390.  
  391.    
  392.     <div id="sbar"><div id="sidebar">
  393.      
  394.     <div id="simg"><center><img src="{image:sidebar}"/></center></div>
  395.    
  396.    
  397.     <center><div id="desc">{block:Description}{Description}{/block:Description}
  398.     </div></center><br>
  399.  
  400.    
  401.    
  402.    <div id="navigation"><div id="navlinks">
  403.     {block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}
  404.     {block:ifLink2} - <a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}
  405.     {block:ifLink3} - <a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}
  406.     {block:ifLink4} - <a href="{text:Link4}">{text:Link4 Title}</a>{/block:ifLink4}
  407.     {block:ifLink5} - <a href="{text:Link5}">{text:Link5 Title}</a>{/block:ifLink5}
  408.     </div></div> <br>
  409.    
  410.    <div id="pag">
  411.    {block:Pagination}<div id="pagination">
  412.             {block:PreviousPage}
  413.                 <a href="{PreviousPage}">«</a>
  414.             {/block:PreviousPage}
  415.  
  416.             {block:JumpPagination length="5"}
  417.                 {block:CurrentPage}
  418.                     <span class="current_page">{PageNumber}</span>
  419.                 {/block:CurrentPage}
  420.  
  421.                 {block:JumpPage}
  422.                     <a class="jump_page" href="{URL}">{PageNumber}</a>
  423.                 {/block:JumpPage}
  424.             {/block:JumpPagination}
  425.  
  426.             {block:NextPage}
  427.                 <a href="{NextPage}">»</a>
  428.             {/block:NextPage}
  429.         </div>{/block:Pagination}
  430.  
  431. </div>
  432. <div id="btt"><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="#top" id="btt">back to top</a></div>
  433. <br>
  434.  
  435.     </div></div>
  436.     <div id="nav"><div id="navlink"><center>"{text:sideimgtext}"</div></center></div>
  437.    
  438.    
  439.  
  440.      
  441.      
  442.     <div id="entries">
  443.     {block:Posts}
  444.     <div id="posts">
  445.    
  446.     <div id="info2">{block:HasTags}<B>TAGGED:</B><BR>
  447.     {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a><br> {/block:Tags}{/block:HasTags}</div>
  448.      
  449.     {block:Title}<h1>{Title}&nbsp;</h1>{/block:Title}
  450.  
  451.     {block:Text}{Body}{/block:Text}
  452.      
  453.     {block:Quote}<h2>"{Quote}" — {Source}</h2>{/block:Quote}
  454.      
  455.     {block:Link}<a href="{URL}" class="link" {Target}><h1>{Name}&nbsp;</h1></a>
  456.     {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  457.      
  458.     {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  459.     {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  460.      
  461.     {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  462.      
  463.     {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  464.    
  465.     {block:Answer}
  466. <div class="asker"><div style="text-transform: uppercase"><img src="{AskerPortraitURL-24}"><b>{Asker}</b></div>
  467. <div class="questions">"{Question}"</div></div>
  468. <div class="answer">{Answer}</div>
  469. {/block:Answer}
  470.  
  471.    {block:Audio}<div id="flo">{block:AlbumArt}<img src="{AlbumArtURL}" width="55px" height="55px" align="left" style="margin-right:10px" />{/block:AlbumArt}{AudioPlayerBlack}<br>
  472. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  473. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}</div>{/block:Audio}<br>
  474.      
  475.     <div id="info">{block:Date} <a href="{Permalink}">{TimeAgo}</a> on {DayOfMonth} {ShortMonth}, {ShortYear}{/block:Date}{block:NoteCount} | <a href="{Permalink}">{NoteCount}  notes</a>{/block:NoteCount}
  476. {block:RebloggedFrom}&middot<br>vía <a href="{ReblogParentURL}"><a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  477.  
  478. {block:ContentSource}, (c) <a href="{SourceURL}">{SourceLink}</a>
  479. {/block:ContentSource}<br>
  480. <a href="{ReblogURL}" target="_blank">r e b l o g</a>
  481. </div></div><br>
  482.     {/block:Posts}
  483.     {block:PostNotes}{PostNotes}{/block:PostNotes}
  484.      
  485.     </div>
  486.      
  487.     </body>
  488.     </html>