API tools faq
paste
hatterthemes

Theme 007

hatterthemes
Jun 11th, 2012
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- Theme 007 by hatterthemes -->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <!--DEFAULT VARIABLES-->
  6. <meta name="color:Title" content="#000000" />
  7. <meta name="color:Text" content="#040404" />
  8. <meta name="color:Link" content="#36860b" />
  9. <meta name="color:Link Hover" content="#006600" />
  10. <meta name="color:Accent" content="#efefef" />
  11.  
  12. <meta name="image:SidebarImage" content="" />
  13.  
  14. <meta name="if:Show Title" content="1" />
  15. <meta name="if:Hide Description" content="1" />
  16.  
  17. <meta name="text:Link1" content="http://" />
  18. <meta name="text:Link1 Title" content="Link 1" />
  19. <meta name="text:Link2" content="http://" />
  20. <meta name="text:Link2 Title" content="Link 2" />
  21. <meta name="text:Link3" content="http://" />
  22. <meta name="text:Link3 Title" content="Link 3" />
  23.  
  24. <script language="javascript">
  25. function toggle() {
  26. var ele = document.getElementById("toggleText");
  27. var text = document.getElementById("displayText");
  28. if(ele.style.display == "block") {
  29. ele.style.display = "none";
  30. text.innerHTML = "about";
  31. }
  32. else {
  33. ele.style.display = "block";
  34. text.innerHTML = "about";
  35. }
  36. }
  37. </script>
  38.  
  39.  
  40. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  41. <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  42. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  43. <link rel="shortcut icon" href="{Favicon}" />
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  45. <style type="text/css">
  46.  
  47.  
  48. /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 1, 2012 05:34:46 PM America/New_York */
  49. @font-face {font-family: 'RosarioRegular';src: url('Rosario-Regular-webfont.eot');src: url('Rosario-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('Rosario-Regular-webfont.woff') format('woff'),url('Rosario-Regular-webfont.ttf') format('truetype'),url('Rosario-Regular-webfont.svg#RosarioRegular') format('svg');font-weight: normal;font-style: normal;}
  50.  
  51. @font-face {font-family: 'RosarioItalic';src: url('Rosario-Italic-webfont.eot');src: url('Rosario-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('Rosario-Italic-webfont.woff') format('woff'),url('Rosario-Italic-webfont.ttf') format('truetype'),url('Rosario-Italic-webfont.svg#RosarioItalic') format('svg');font-weight: normal;font-style: normal;}
  52.  
  53. @font-face {font-family: 'RosarioBold';src: url('Rosario-Bold-webfont.eot');src: url('Rosario-Bold-webfont.eot?#iefix') format('embedded-opentype'),url('Rosario-Bold-webfont.woff') format('woff'),url('Rosario-Bold-webfont.ttf') format('truetype'),url('Rosario-Bold-webfont.svg#RosarioBold') format('svg');font-weight: normal;font-style: normal;}
  54.  
  55. @font-face {font-family: 'RosarioBoldItalic';src: url('Rosario-BoldItalic-webfont.eot');src: url('Rosario-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),url('Rosario-BoldItalic-webfont.woff') format('woff'),url('Rosario-BoldItalic-webfont.ttf') format('truetype'),url('Rosario-BoldItalic-webfont.svg#RosarioBoldItalic') format('svg');font-weight: normal;font-style: normal;}
  56.  
  57.  
  58. body {
  59. color:{color:Text};
  60. background-image:url('http://s1180.photobucket.com/albums/x418/myfatherwillbehearingaboutthis/Gifs/background.png');
  61. background-attachment:fixed;
  62. font-family: "Rosario" arial sans-serif;
  63. font-size:12px;
  64. line-height:110%;
  65. text-align:justify;
  66. }
  67.  
  68. a {
  69. color:{color:Link};
  70. text-decoration:none;
  71. }
  72.  
  73. a:hover {
  74. color:{color:Link Hover};
  75. }
  76.  
  77. blockquote {
  78. margin-left:25px;
  79. padding-left:10px;
  80. border-left:2px ridge {color:Link};
  81. }
  82.  
  83. iframe#tumblr_controls {
  84. top: 0% !important;
  85. right:0% !important;
  86. position: fixed !important;
  87. opacity:0.5;
  88. width:300px;
  89. -webkit-transition: all 0.6s ease-in;
  90. -moz-transition: all 0.6s ease-in;
  91. -o-transition: all .6s ease-in;
  92. transition:all .6s ease-in;
  93. }
  94.  
  95. iframe#tumblr_controls:hover {
  96. opacity:1.0;
  97. -webkit-transition: all 0.6s ease-in;
  98. -moz-transition: all 0.6s ease-in;
  99. -o-transition: all .6s ease-in;
  100. transition:all .6s ease-in;
  101. }
  102.  
  103. #container {
  104. width:300px;
  105. height:600px;
  106. position:fixed;
  107. margin-left:163px;
  108. margin-top:3px;
  109. -webkit-transition: all 0.6s ease-in;
  110. -moz-transition: all 0.6s ease-in;
  111. -o-transition: all .6s ease-in;
  112. transition:all .6s ease-in;
  113. }
  114.  
  115. #sidebar, #links, #backgrounds {
  116. height:100%;
  117. width:100%;
  118. margin-top:0;
  119. margin-left:0;
  120. position:absolute;
  121. }
  122.  
  123. #content {
  124. width:100%;
  125. height:300px;
  126. position:absolute;
  127. z-index:8;
  128. }
  129.  
  130. #sidebar {
  131. background:url('http://s1180.photobucket.com/albums/x418/myfatherwillbehearingaboutthis/Gifs/triangles.png');
  132. text-decoration:none;
  133. -webkit-border-top-left-radius:25px;
  134. -moz-border-radius-topleft:25px;
  135. -o-border-top-left-radius:25px;
  136. border-top-left-radius:25px;
  137. z-index:0;
  138. }
  139.  
  140. .rf,.msg,.ar,.l1,.l2,.l3 {
  141. width:70px;
  142. text-align:center;
  143. line-height:13px;
  144. }
  145.  
  146. .rf {margin-top:60px;margin-left:13px;z-index:13;}
  147. .msg {margin-top:-12px;margin-left:110px;z-index:13;}
  148. .ar {margin-top:-12px;margin-left:210px;z-index:13;}
  149. .l1 {margin-top:423px;margin-left:20px;-webkit-transform:rotate(7deg);-moz-transform:rotate(7deg);-o-transform:rotate(7deg);transform:rotate(7deg);
  150. font-size:10px;z-index:13;}
  151. .l2 {margin-top:25px;margin-left:120px;-webkit-transform:rotate(-22deg);-moz-transform:rotate(-22deg);-o-transform:rotate(-22deg);transform:rotate(-22deg);
  152. font-size:10px;z-index:13;}
  153. .l3 {margin-top:55px;margin-left:215px;-webkit-transform:rotate(55deg);-moz-transform:rotate(55deg);-o-transform:rotate(55deg);transform:rotate(55deg);
  154. font-size:10px;z-index:13;}
  155.  
  156. #title {
  157. float:left;
  158. margin-left:-60px;
  159. position:fixed;
  160. width:0;
  161. height:0;
  162. border-left:115px solid transparent;
  163. border-right:110px solid transparent;
  164. border-bottom:110px solid #ededed;
  165. -webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);
  166. opacity:0.5;
  167. z-index:-11;
  168. }
  169.  
  170. .titletext {
  171. -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);
  172. overflow:wrap;
  173. font-size:18px;
  174. margin-left:-35px;
  175. margin-top:15px;
  176. font-style:italic;
  177. text-align:center;
  178. width:100px;
  179. }
  180.  
  181.  
  182. .sideimg{
  183. float:right;
  184. margin-top:20px;
  185. width:280px;
  186. height:170px;
  187. overflow:hidden;
  188. margin-left:15px;
  189. position:fixed;
  190. z-index:-11;
  191. }
  192.  
  193. .sideimg img {
  194. min-width:280px;
  195. align:center;
  196. -webkit-border-top-left-radius:500px;
  197. -moz-border-radius-topleft:500px;
  198. -o-border-top-left-radius:500px;
  199. border-top-left-radius:500px;
  200. background:#000;
  201. }
  202.  
  203. .desc {
  204. color:{color:Text};
  205. width:270px;
  206. overflow-x:wrap;
  207. text-align:justified;
  208. padding:15px;
  209. margin-top:170px;
  210. margin-bottom:5px;
  211. z-index:11!important;
  212. }
  213.  
  214. a#displayText {
  215. width:280px;
  216. display:block;
  217. text-align:center;
  218. border-left:1px solid {color:Accent};
  219. border-top:1px solid {color:Accent};
  220. border-right:3px solid {color:Accent};
  221. border-bottom:3px solid {color:Accent};
  222. -webkit-border-radius:3px;
  223. -moz-border-radius:3px;
  224. -o-border-radius:3px;
  225. border-radius:3px;
  226. font-style:italic;
  227. text-transform:lowercase;
  228. color:{color:Text};
  229. }
  230.  
  231. .theme {
  232. display:block;
  233. width:300px;
  234. height:12px;
  235. font-size:10px;
  236. text-align:center;
  237. }
  238.  
  239. .theme a:hover {
  240. color:{color:Link};
  241. }
  242.  
  243. div#entries {
  244. width:530px;
  245. margin-left:580px;
  246. padding-top:30px;
  247. }
  248.  
  249. .posts {
  250. background:transparent;
  251. border-left:1px solid {color:Accent};
  252. border-top:1px solid {color:Accent};
  253. border-right:3px solid {color:Accent};
  254. border-bottom:3px solid {color:Accent};
  255. -webkit-border-radius:10px;
  256. -moz-border-radius:10px;
  257. -o-border-radius:10px;
  258. border-radius:10px;
  259. display:block;
  260. height:auto;
  261. padding:5px;
  262. padding-left:10px;
  263. padding-right:10px;
  264. margin-bottom:10px;
  265. }
  266.  
  267. .posts img {
  268. -webkit-border-top-left-radius:10px;
  269. -moz-border-radius-topleft:10px;
  270. -o-border-top-leftradius:10px;
  271. border-top-left-radius:10px;
  272. -webkit-transition: all 0.6s ease-in-out;
  273. -moz-transition: all 0.6s ease-in-out;
  274. -o-transition: all 0.6s ease-in-out;
  275. transition: all .6s ease-in-out;
  276. opacity:0.86;
  277. }
  278.  
  279. .posts img:hover{
  280. opacity:1;
  281. -webkit-transition: all 0.6s ease-in-out;
  282. -moz-transition: all 0.6s ease-in-out;
  283. -o-transition: all 0.6s ease-in-out;
  284. transition: all .6s ease-in-out;
  285. }
  286.  
  287. .chat ol, .chat li {list-style:none; margin-left:10px; padding:2px; border-bottom:1px solid {color:Text};}
  288.  
  289. ul.chat {list-style:none; margin-left:10px; padding:2px;}
  290.  
  291. .notes {
  292. display:block;
  293. background:{color:Accent};
  294. {block:PermalinkPage}
  295. text-align:left;
  296. font-size:12px;
  297. {/block:PermalinkPage}
  298. {block:IndexPage}
  299. text-align:center;
  300. font-size:10px;
  301. {/block:IndexPage}
  302. text-transform:lowercase;
  303. list-style:none;
  304. }
  305.  
  306. {block:PermalinkPage}
  307. .notes img:hover {
  308. -webkit-transform:rotate(-10deg);
  309. -moz-transform:rotate(-10deg);
  310. -o-transform:rotate(-10deg);
  311. transform:rotate(-10deg);
  312. }
  313. {/block:PermalinkPage}
  314.  
  315. .notes a{
  316. {block:PermalinkPage}
  317. color:{color:Link Hover};
  318. {/block:PermalinkPage}
  319. {block:IndexPage}
  320. color:{color:Text};
  321. {/block:IndexPage}
  322. }
  323.  
  324. .notes a:hover{
  325. color:{color:Link}
  326. }
  327.  
  328.  
  329. .pagination {
  330. background-image:{color:Accent};
  331. color:{color:Link Hover};
  332. text-align:center;
  333. display:block;
  334. padding:5px;
  335. margin-bottom:-10px;
  336. -webkit-border-bottom-right-radius:25px;
  337. -moz-border-radius-bottomright:25px;
  338. -o-border-bottom-right-radius:25px;
  339. border-bottom-right-radius:25px;
  340. }
  341.  
  342. iframe#tumblr_controls {
  343. top: 0% !important;
  344. right:0% !important;
  345. position: fixed !important;
  346. }
  347.  
  348. #questions {
  349. display:block;
  350. background:transparent!important;
  351. border-bottom:2px solid {color:Header};
  352. }
  353.  
  354. .questions {
  355. font-size:10px;
  356. color:{color:Text}!important;
  357. margin-left:300px;
  358. margin-top:-15px;
  359. width:auto;
  360. text-transform:lowercase;
  361. }
  362.  
  363. .source {
  364. text-align:right;
  365. }
  366.  
  367. .postsource {
  368. float:right;
  369. margin-top:-25px;
  370. color:{Accent};
  371. }
  372.  
  373. .postsource img {
  374. width:14px;
  375. height:14px;
  376. opacity:0.7;
  377. -webkit-transition: all 0.6s ease-in-out;
  378. -moz-transition: all 0.6s ease-in-out;
  379. -o-transition: all 0.6s ease-in-out;
  380. transition: all .6s ease-in-out;
  381. margin-top:10px;
  382. }
  383.  
  384. .postsource img:hover {
  385. opacity:1;
  386. -webkit-transition: all 0.6s ease-in-out;
  387. -moz-transition: all 0.6s ease-in-out;
  388. -o-transition: all 0.6s ease-in-out;
  389. transition: all .6s ease-in-out;
  390. }
  391.  
  392. #theme {
  393. display:block;
  394. width:50px;
  395. height:50px;
  396. position:fixed;
  397. bottom:0px!important;
  398. left:0px;
  399. opacity:0.5;
  400. }
  401.  
  402. #theme:hover {
  403. opacity:1;
  404. }
  405.  
  406. </style>
  407. </head>
  408.  
  409.  
  410. <body>
  411. <div id="theme"><a href="http://hatterthemes.tumblr.com"><img src="http://24.media.tumblr.com/tumblr_m4ia8wX2h71r8az2no1_100.png"></a></div>
  412. <div id="container">
  413.  
  414. <div id="sidebar">
  415. </div>
  416. <div id="content">
  417. <div class="rf"><a href="/">home</a></div>
  418. <div class="msg"><a href="/ask">ask</a></div>
  419. <div class="ar"><a href="/archive">archive</a></div>
  420. {block:ifShowTitle}<div id="title"><div class="titletext">{Title}</div></div>{/block:ifShowTitle}
  421. <div class="sideimg"><img src="{image:SidebarImage}"></div>
  422. <div class="desc">{block:ifHideDescription}<a id="displayText" href="javascript:toggle();">about</a><div id="toggleText" style="display:none;">{/block:ifHideDescription}{block:Description}{Description}{/block:Description}{block:ifHideDescription}</div>{/block:ifHideDescription}</div>
  423. </div>
  424. <div class="l1"><a href="{text:Link1}">{text:Link1 Title}</a></div>
  425. <div class="l2"><a href="{text:Link2}">{text:Link2 Title}</a></div>
  426. <div class="l3"><a href="{text:Link3}">{text:Link3 Title}</a></div>
  427.  
  428. </div>
  429. </div>
  430.  
  431.  
  432.  
  433.  
  434. <div id="entries">
  435. {block:Posts}
  436. <div class="posts">
  437.  
  438. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  439. {block:Text}{Body}{/block:Text}
  440.  
  441. {block:Quote}<center><h2>"{Quote}"</h2></center><br /><p class="source">— {Source}</p>{/block:Quote}
  442.  
  443. {block:Link}<a href="{URL}" class="link" {Target}><center><h1>{Name}</h1></center></a>
  444. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  445.  
  446. {block:Photo}<br /><center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  447.  
  448. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  449.  
  450. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  451.  
  452. {block:Video}<br />{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  453.  
  454. {block:Answer}<div id="questions"><h2>"{Question}"</h2></div><div class="questions"><em>wondered by {Asker}</em></div>
  455. {Answer}{/block:answer}
  456.  
  457. {block:Audio}<span class="audio"><center>{AudioPlayerBlack}</center></span>{block:Caption}{Caption}{/block:Caption}{/block:Audio}<br>
  458.  
  459. <div class="notes"><center>{block:IndexPage}Posted <a href="{Permalink}">{TimeAgo}</a> with {/block:IndexPage}{NoteCountWithLabel}.{block:PermalinkPage}{block:HasTags}{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:PermalinkPage}</center>
  460. <div class="postsource">{block:RebloggedFrom}via<a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-16}"></a>+<a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-16}"></a>{/block:RebloggedFrom}</div>
  461. </div></div>
  462.  
  463. {/block:Posts}
  464. {block:PostNotes}{PostNotes}{/block:PostNotes}
  465.  
  466. <div class="pagination">{block:PreviousPage}<a href="{PreviousPage}"><< Newer</a> &nbsp;{/block:PreviousPage}++{block:NextPage}&nbsp;<a href="{NextPage}">Older >></a>{/block:NextPage}</div>
  467.  
  468. </div>
  469. </div>
  470. </body>
  471. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!