API tools faq
paste
Advertisement
hatterthemes

Theme 008 v.1

hatterthemes
Jun 20th, 2012
425
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.41 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 008 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:Background" content="#fdf5f0" />
  7. <meta name="color:Entry" content="#fff9f5" />
  8. <meta name="color:Accent" content="#efefef" />
  9. <meta name="color:Title" content="#000000" />
  10. <meta name="color:Text" content="#040404" />
  11. <meta name="color:Link" content="#36860b" />
  12. <meta name="color:Link Hover" content="#006600" />
  13. <meta name="color:Tab1" content="#aefeed" />
  14. <meta name="color:Tab2" content="#beefff" />
  15. <meta name="color:Tab3" content="#aedfed" />
  16. <meta name="color:Tab4" content="#adcfee" />
  17. <meta name="color:TagTab" content="#0b42d1" />
  18. <meta name="color:ReblogTab" content="#00bfff" />
  19. <meta name="color:Tags" content="#e3f1fa" />
  20.  
  21. <meta name="image:SidebarImage" content="" />
  22.  
  23. <meta name="text:Link1" content="http://" />
  24. <meta name="text:Link1 Title" content="Link 1" />
  25. <meta name="text:Link2" content="http://" />
  26. <meta name="text:Link2 Title" content="Link 2" />
  27.  
  28. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  29. <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  30. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  31. <link rel="shortcut icon" href="{Favicon}" />
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  33. <style type="text/css">
  34.  
  35.  
  36. /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 1, 2012 05:34:46 PM America/New_York */
  37. @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;}
  38.  
  39. @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;}
  40.  
  41. @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;}
  42.  
  43. @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;}
  44.  
  45.  
  46. body {
  47. color:{color:Text};
  48. background:{color:Background};
  49. font-family: "Rosario" arial sans-serif;
  50. font-size:12px;
  51. line-height:110%;
  52. text-align:justify;
  53. }
  54.  
  55. a {
  56. color:{color:Link};
  57. text-decoration:none;
  58. }
  59.  
  60. a:hover {
  61. color:{color:Link Hover};
  62. }
  63.  
  64. blockquote {
  65. margin-left:25px;
  66. padding-left:10px;
  67. border-left:2px ridge {color:Link};
  68. }
  69.  
  70. iframe#tumblr_controls {
  71. top: 0% !important;
  72. right:0% !important;
  73. position: fixed !important;
  74. opacity:0.5;
  75. width:300px;
  76. -webkit-transition: all 0.6s ease-in;
  77. -moz-transition: all 0.6s ease-in;
  78. -o-transition:all 0.6s ease-in;
  79. transition:all 0.6s ease-in;
  80. }
  81.  
  82. iframe#tumblr_controls:hover {
  83. opacity:1.0;
  84. -webkit-transition: all 0.6s ease-in;
  85. -moz-transition: all 0.6s ease-in;
  86. -o-transition:all 0.6s ease-in;
  87. transition:all 0.6s ease-in;
  88. }
  89.  
  90. #quiver {
  91. width:auto;
  92. height:300px;
  93. position:fixed;
  94. margin-left:163px;
  95. margin-top:3px;
  96. -moz-transition: all 0.6s ease-in;
  97. -o-transition:all 0.6s ease-in;
  98. transition:all 0.6s ease-in;
  99. -webkit-transition: all 0.6s ease-in;
  100. }
  101.  
  102. .arrow {display:block;height:65px;width:75px;text-align:center;background:{color:Tab1};-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;border-radius:25px;-webkit-transform:rotate(-65deg);-moz-transform:rotate(-65deg);-o-transform:rotate(-65deg);transform:rotate(-65deg);margin-top:200px;position:fixed;border-left:2px solid #ededed;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  103. .arrow1 {display:block;height:80px;width:80px;text-align:center;background:{color:Tab2};-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;border-radius:25px;-webkit-transform:rotate(-17deg);-moz-transform:rotate(-17deg);-o-transform:rotate(-17deg);transform:rotate(-17deg);margin-top:160px;margin-left:50px;position:fixed;border-left:2px solid #ededed;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  104. .arrow3 {display:block;height:80px;width:80px;text-align:center;background:{color:Tab3};-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;border-radius:25px;-webkit-transform:rotate(17deg);-moz-transform:rotate(17deg);-o-transform:rotate(17deg);transform:rotate(17deg);margin-top:160px;margin-left:120px;position:fixed;border-left:2px solid #ededed;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  105. .arrow4 {display:block;height:75px;width:75px;text-align:center;background:{color:Tab4};-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;border-radius:25px;-webkit-transform:rotate(65deg);-moz-transform:rotate(65deg);-o-transform:rotate(65deg);transform:rotate(65deg);margin-top:210px;margin-left:170px;position:fixed;border-left:2px solid #ededed;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  106.  
  107. .font {opacity:0.5;z-index:4;}
  108. .arrow:hover{height:90px;margin-top:182px;margin-left:-7px;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  109. .arrow1:hover{height:100px;margin-top:140px;margin-left:48px;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  110. .arrow3:hover{height:100px;margin-top:140px;margin-left:122px;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  111. .arrow4:hover{height:95px;margin-top:199px;margin-left:173px;-webkit-transition: all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  112. .arrow:hover .font,.arrow1:hover .font,.arrow3:hover .font,.arrow4:hover .font {opacity:1;}
  113.  
  114. .trickarrow {
  115. display:block;
  116. width:200px;
  117. height:200px;
  118. -webkit-border-radius:150px;
  119. -moz-border-radius:150px;
  120. -o-border-radius:150px;
  121. border-radius:150px;
  122. background:url('{image:SidebarImage}')no-repeat center;
  123. -webkit-background-size: cover;
  124. -moz-background-size: cover;
  125. -o-background-size: cover;
  126. background-size: cover;
  127. margin-top:180px;
  128. margin-left:25px;
  129. position:relative;
  130. opacity:1;
  131. }
  132. .font2 {opacity:0;z-index:4;-webkit-transition: all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;}
  133. .trickarrow:hover .font2{
  134. opacity:0.72;
  135. -webkit-transition: all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;;
  136. }
  137.  
  138. #title {
  139. display:block;
  140. width:250px;
  141. height:100px;
  142. margin-left:40px;
  143. position:fixed;
  144. overflow:wrap;
  145. text-align:right;
  146. font-size:18px;
  147. font-style:italic;
  148. z-index:12;
  149. }
  150.  
  151. .desc {
  152. color:{color:Text};
  153. width:270px;
  154. overflow-x:wrap;
  155. text-align:justified;
  156. padding:15px;
  157. margin-bottom:5px
  158. margin-left:20px;
  159. z-index:11!important;
  160. background:{color:Background};
  161. }
  162.  
  163. a#displayText {
  164. width:280px;
  165. display:block;
  166. text-align:center;
  167. border-left:1px solid {color:Accent};
  168. border-top:1px solid {color:Accent};
  169. border-right:3px solid {color:Accent};
  170. border-bottom:3px solid {color:Accent};
  171. -webkit-border-radius:3px;
  172. -moz-border-radius:3px;
  173. -o-border-radius:3px;
  174. border-radius:3px;
  175. font-style:italic;
  176. text-transform:lowercase;
  177. color:{color:Text};
  178. }
  179.  
  180. .theme {
  181. display:block;
  182. width:300px;
  183. height:12px;
  184. font-size:10px;
  185. text-align:center;
  186. }
  187.  
  188. .theme a:hover {
  189. color:{color:Link};
  190. }
  191.  
  192. div#entries {
  193. width:530px;
  194. margin-left:510px;
  195. padding-top:30px;
  196. }
  197.  
  198. .posts {
  199. background:{color:Entry};
  200. border-left:1px solid {color:Accent};
  201. border-top:1px solid {color:Accent};
  202. border-right:3px solid {color:Accent};
  203. border-bottom:3px solid {color:Accent};
  204. -webkit-border-radius:10px;
  205. -moz-border-radius:10px;
  206. -o-border-radius:10px;
  207. border-radius:10px;
  208. display:block;
  209. height:auto;
  210. padding:5px;
  211. padding-left:10px;
  212. padding-right:10px;
  213. margin-bottom:10px;
  214. z-index:11;
  215. }
  216.  
  217. .posts img {
  218. -webkit-border-top-left-radius:10px;
  219. -moz-border-radius-topleft:10px;
  220. -o-border-top-left-radius:10px;
  221. border-top-left-radius:10px;
  222. -webkit-transition: all 0.6s ease-in-out;
  223. -moz-transition: all 0.6s ease-in-out;
  224. -o-transition: all 0.6s ease-in-out;
  225. transition:all 0.6s ease-in-out;
  226. opacity:0.86;
  227. }
  228.  
  229. .posts img:hover{
  230. opacity:1;
  231. -webkit-transition: all 0.6s ease-in-out;
  232. -moz-transition: all 0.6s ease-in-out;
  233. -o-transition: all 0.6s ease-in-out;
  234. transition:all 0.6s ease-in-out;
  235. }
  236.  
  237. .chat ol, .chat li {list-style:none; margin-left:10px; padding:2px; border-bottom:1px solid {color:Text};}
  238.  
  239. ul.chat {list-style:none; margin-left:10px; padding:2px;}
  240.  
  241. .notes {
  242. display:block;
  243. background:{color:Accent};
  244. {block:PermalinkPage}
  245. text-align:left;
  246. font-size:12px;
  247. {/block:PermalinkPage}
  248. {block:IndexPage}
  249. text-align:center;
  250. font-size:10px;
  251. {/block:IndexPage}
  252. text-transform:lowercase;
  253. list-style:none;
  254. }
  255.  
  256. {block:PermalinkPage}
  257. .notes img:hover {
  258. -webkit-transform:rotate(-10deg);
  259. -moz-transform:rotate(-10deg);
  260. -o-transform:rotate(-10deg);
  261. transform:rotate(-10deg);
  262. }
  263. {/block:PermalinkPage}
  264.  
  265. .notes a{
  266. {block:PermalinkPage}
  267. color:{color:Link Hover};
  268. {/block:PermalinkPage}
  269. {block:IndexPage}
  270. color:{color:Text};
  271. {/block:IndexPage}
  272. }
  273.  
  274. .notes a:hover{
  275. color:{color:Link}
  276. }
  277.  
  278.  
  279. .pagination {
  280. background-image:{color:Accent};
  281. color:{color:Link Hover};
  282. text-align:center;
  283. display:block;
  284. padding:5px;
  285. margin-bottom:-10px;
  286. -webkit-border-bottom-right-radius:25px;
  287. -moz-border-radius-bottomright:25px;
  288. -o-border-bottom-right-radius:25px;
  289. border-bottom-right-radius:25px;
  290. }
  291.  
  292. iframe#tumblr_controls {
  293. top: 0% !important;
  294. right:0% !important;
  295. position: fixed !important;
  296. }
  297.  
  298. #questions {
  299. display:block;
  300. background:transparent!important;
  301. border-bottom:2px solid {color:Header};
  302. }
  303.  
  304. .questions {
  305. font-size:10px;
  306. color:{color:Text}!important;
  307. margin-left:300px;
  308. margin-top:-15px;
  309. width:auto;
  310. text-transform:lowercase;
  311. }
  312.  
  313. .source {
  314. text-align:right;
  315. }
  316.  
  317. .postsource {
  318. float:right;
  319. margin-top:-25px;
  320. color:{Accent};
  321. }
  322.  
  323. .postsource img {
  324. width:14px;
  325. height:14px;
  326. opacity:0.7;
  327. -webkit-transition: all 0.6s ease-in-out;
  328. -moz-transition: all 0.6s ease-in-out;
  329. -o-transition: all 0.6s ease-in-out;
  330. transition:all 0.6s ease-in-out;
  331. margin-top:10px;
  332. }
  333.  
  334. .postsource img:hover {
  335. opacity:1;
  336. -webkit-transition: all 0.6s ease-in-out;
  337. -moz-transition: all 0.6s ease-in-out;
  338. -o-transition: all 0.6s ease-in-out;
  339. transition:all 0.6s ease-in-out;
  340. }
  341.  
  342. #content {
  343. width:300px;
  344. height:100px;
  345. margin-left:-245px;
  346. margin-top:75px;
  347. margin-bottom:-198px;
  348. -webkit-transform:rotate(-65deg);
  349. -moz-transform:rotate(-65deg);
  350. -o-transform:rotate(-65deg);
  351. transform:rotate(-65deg);
  352. }
  353.  
  354. #infotab:hover {opacity:1;margin-left:519px;background-color:{color:TagTab};font-size:12px; border-left:5px solid {color:ReblogTab};}
  355. #infotab2:hover {opacity:1;margin-left:519px;background-color:{color:ReblogTab};font-size:12px; border-left:5px solid {color:TagTab};}
  356. #infotab:hover a,#infotab2:hover a{opacity:1;}
  357.  
  358. #infotab{opacity:0.4;position:absolute; font-size:0px; text-transform:lowercase; color:{color:ReblogTab}; height:auto; width: 100px; padding:0px; margin-bottom:0px; background-color:#trans; display:block; margin-left:414px;margin-top:35px;text-align:leftt; padding:2px;-webkit-border-top-right-radius:10px;-moz-border-radius-topright:10px;-o-border-top-right-radius:10px;border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomright:10px;-o-border-bottom-right-radius:10px;border-bottom-right-radius:10px; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; border-right:15px solid {color:TagTab};z-index:0;}
  359.  
  360. #infotab2{opacity:0.4;position:absolute; font-size:0px; text-transform:lowercase; color:{color:TagTab}; height:auto; width: 100px; padding:0px; margin-bottom:0px; background-color:#trans; display:block; margin-left:414px;margin-top:5px;text-align:left; padding:2px;-webkit-border-top-right-radius:10px;-moz-border-radius-topright:10px;-o-border-top-right-radius:10px;border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomright:10px;-o-border-bottom-right-radius:10px;border-bottom-right-radius:10px; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; border-right:15px solid {color:ReblogTab};z-index:0;}
  361.  
  362. #infotab a,#infotab2 a{opacity:0;text-transform:lowercase; color:{color:Tags}; font-style:italic;}
  363. #infotab a:hover,#infotab2 a:hover {opacity:1;color:{color:Link};}
  364.  
  365. #theme {
  366. display:block;
  367. width:50px;
  368. height:50px;
  369. position:fixed;
  370. bottom:0px!important;
  371. left:0px;
  372. opacity:0.5;
  373. }
  374.  
  375. #theme:hover {
  376. opacity:1;
  377. }
  378.  
  379. </style>
  380. </head>
  381.  
  382.  
  383. <body>
  384. <div id="theme"><a href="http://hatterthemes.tumblr.com"><img src="http://24.media.tumblr.com/tumblr_m4ia8wX2h71r8az2no1_100.png"></a></div>
  385. <div id="quiver">
  386. <div id="content">
  387. <div class="arrow"><a class ="font" href="/">home</a></div>
  388. <div class="arrow1"><a class="font" href="/ask">ask</a></div>
  389. <div class="arrow3"><a class="font" href="{text:Link1}">{text:Link1 Title}</a></div>
  390. <div class="arrow4"><a class="font" href="{text:Link2}">{text:Link2 Title}</a></div>
  391. </div>
  392. <div class="trickarrow"><a class="font2" href="http://www.tumblr.com/follow/{Name}"><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://i1180.photobucket.com/albums/x418/myfatherwillbehearingaboutthis/Gifs/democopy.png" width="150"></a></div>
  393. <div id="title">{Title}</div>
  394. <div class="desc">{Description}</div>
  395. </div>
  396.  
  397.  
  398.  
  399. <div id="entries">
  400. {block:ifEndlessScrolling}<div class = "autopagerize_page_element" >{/block:ifEndlessScrolling}{block:Posts}
  401. <div class="posts">
  402.  
  403. {block:IndexPage}
  404. {block:HasTags}
  405. {block:RebloggedFrom}
  406. <div id="infotab2">
  407. via:<a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  408. origin:<a href="{ReblogRootURL}">{ReblogRootName}</a>
  409. </div>
  410. {/block:RebloggedFrom}
  411. <div id="infotab">
  412. tags<br>
  413. {block:Tags}<a href="{TagURL}" target="_blank"># {Tag}</a><br>{/block:Tags}
  414. </div>
  415. {/block:HasTags}
  416. {/block:IndexPage}
  417.  
  418.  
  419. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  420. {block:Text}{Body}{/block:Text}
  421.  
  422. {block:Quote}<center><h2>"{Quote}"</h2></center><br /><p class="source">— {Source}</p>{/block:Quote}
  423.  
  424. {block:Link}<a href="{URL}" class="link" {Target}><center><h1>{Name}</h1></center></a>
  425. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  426.  
  427. {block:Photo}<br /><center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  428.  
  429. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  430.  
  431. {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}
  432.  
  433. {block:Video}<br />{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  434.  
  435. {block:Answer}<div id="questions"><h2>"{Question}"</h2></div><div class="questions"><em>wondered by {Asker}</em></div>
  436. {Answer}{/block:answer}
  437.  
  438. {block:Audio}<span class="audio"><center>{AudioPlayerBlack}</center></span>{block:Caption}{Caption}{/block:Caption}{/block:Audio}<br>
  439.  
  440. <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>
  441. <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>
  442. </div></div>
  443.  
  444. {/block:Posts}
  445. {block:PostNotes}{PostNotes}{/block:PostNotes}
  446.  
  447. <div class="pagination">{block:PreviousPage}<a href="{PreviousPage}"><< Newer</a> &nbsp;{/block:PreviousPage}++{block:NextPage}&nbsp;<a href="{NextPage}">Older >></a>{/block:NextPage}</div>
  448.  
  449. </div>
  450. </div>
  451. </body>
  452. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!