Advertisement
Korra

Theme: Polar Ice

Apr 16th, 2012
13,058
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.25 KB | None | 0 0
  1. <html>
  2.  
  3. <!---
  4.  
  5. THEME: POLAR ICE BY HEARTENS (HEARTENS.TUMBLR.COM)
  6.  
  7. - DO NOT REMOVE THE CREDITS OR MOVE IT TO A SECONDARY PAGE
  8. - DO NOT REUPLOAD OR REDISTRIBUTE
  9. - DO NOT USE AS A BASE CODE
  10. ___________________________________________________________________
  11.  
  12. THEME INSTRUCTIONS:
  13. PLEASE MAKE SURE YOU READ THE INSTRUCTIONS CAREFULLY OR THIS THEME WON'T FUNCTION PROPERLY
  14.  
  15. In order for you use it efficiently your sidebar image must exactly 260x330. Any more or less and you'll mess up the theme and it won't hover properly. If you want to have another sidebar image (you'll see if you hover over the first one), the size must be 250x150. I highly recommend that you don't customize the sidebar (e.g. Move it to another position) you know what you're doing.
  16.  
  17. TL;DR:
  18. FIRST SIDEBAR IMAGE MUST BE 260x330, NO MORE NO LESS.
  19. SECOND SIDEBAR IMAGE MUST BE 250x150 OR LESS.
  20. ___________________________________________________________________
  21.  
  22. --->
  23.  
  24. <head>
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}
  29. <meta name="description" content="{MetaDescription}" />
  30. {/block:Description}
  31.  
  32. <meta name="color:background" content="#F7FAFC" />
  33. <meta name="color:header" content="#E4F1F7" />
  34. <meta name="color:scroll" content="#CEDAF5" />
  35. <meta name="color:entry" content="#FFFFFF" />
  36. <meta name="color:text" content="#726e77" />
  37. <meta name="color:heading" content="#567699" />
  38. <meta name="color:permalink" content="#E3EDF8" />
  39. <meta name="color:link" content="#929DA8" />
  40. <meta name="color:border" content="#CFDDE7" />
  41. <meta name="color:hover" content="#FFFFFF" />
  42. <meta name="color:bold" content="#7495B8" />
  43.  
  44. <meta name="font:body" content="georgia" />
  45.  
  46. <meta name="if:InfiniteScrolling" content="0" />
  47. <meta name="if:HoverOverPermalink" content="1" />
  48.  
  49. <meta name="text:Background Repeat" content="no-repeat"/>
  50.  
  51. <meta name="image:Sidebar" content="http://static.tumblr.com/4hejznv/Id0m2id1d/c.png"/>
  52. <meta name="image:Hover" content="http://static.tumblr.com/4hejznv/Wl2m2l0gy/l.gif"/>
  53. <meta name="image:Background" content=""/>
  54.  
  55. <meta name="text:Link1" content="" />
  56. <meta name="text:Link1 URL" content="/"/>
  57. <meta name="text:Link2" content="" />
  58. <meta name="text:Link2 URL" content="/"/>
  59. <meta name="text:Link3" content="" />
  60. <meta name="text:Link3 URL" content="/"/>
  61. <meta name="text:Link4" content="" />
  62. <meta name="text:Link4 URL" content="/"/>
  63.  
  64. <style type="text/css">
  65. body {
  66. background-image: url('{image:background}');
  67. background-color: {color:background};
  68. background-attachment: fixed;
  69. background-repeat: {text:Background Repeat};
  70. background-position:bottom right;
  71. color: {color:text};
  72. font-family: {font:body};
  73. font-size: 10px;
  74. }
  75.  
  76. @font-face {
  77. font-family: "dubiel";
  78. src: url(http://static.tumblr.com/4hejznv/irnm1ycg9/dubiel.ttf) format("truetype");
  79. }
  80.  
  81. ::-webkit-scrollbar {
  82. height: 5px;
  83. width: 5px;
  84. background-color: {color:background};
  85. }
  86. ::-webkit-scrollbar-thumb:vertical {
  87. height: 5px;
  88. background-color: {color:scroll};
  89. }
  90. ::-webkit-scrollbar-thumb:vertical:hover{ 
  91. background-color: {color:scroll};
  92. }
  93. ::-webkit-scrollbar-thumb:horizontal:hover{ 
  94. background-color: {color:scroll};
  95. }
  96.  
  97. a {
  98. text-decoration:none;
  99. outline:none;
  100. color: {color:link};
  101. -moz-outline-style:none;
  102. -webkit-transition: all 0.5s linear;
  103. -moz-transition: all 0.5s linear;
  104. -o-transition: all 0.5s linear;
  105. }
  106.  
  107. a:hover {
  108. color: {color:border};
  109. }
  110.  
  111. #title {
  112. font-family:"dubiel";
  113. font-size:22pt;
  114. position: fixed;
  115. color: {color:header};
  116. margin-left: 40px;
  117. margin-top: 60px;
  118. width: 270px;
  119. z-index: 999;
  120. text-align: center;
  121. line-height: 60%;
  122. padding-bottom: 2px;
  123. border-bottom: 1px {color:border} dotted;
  124. }
  125.  
  126. #title a:hover {
  127. color: {color:hover};
  128. }
  129.  
  130. #main {
  131. margin-left: 380px;
  132. margin-top: 0px;
  133. width:500px;
  134. position: relative;
  135. }
  136.  
  137. #perma {
  138. background-color: {color:entry};
  139. font-family: arial;
  140. display:block;
  141. font-size: 8px;
  142. letter-spacing: 1px;
  143. font-style: none;
  144. width: 85px;
  145. height: auto;
  146. margin: -2px 0px 1px 2px;
  147. padding: 10px;
  148. margin-left: 515px;
  149. margin-top: -5px;
  150. {block:IfHoverOverPermalink}
  151. opacity: 0;
  152. filter:alpha(opacity=0);{/block:IfHoverOverPermalink}
  153. -webkit-transition: all 0.5s linear;
  154. -moz-transition: all 0.5s linear;
  155. -o-transition: all 0.5s linear;
  156. position:absolute;
  157. z-index: 999;
  158. border-left: 2px {color:border} solid;
  159. }
  160.  
  161. #entry b, #sidebar b, strong {
  162. color: {color:bold};
  163. }
  164.  
  165. #entry:hover #perma {
  166. height: auto;
  167. margin-top: -8px;
  168. margin-left: 515px;
  169. {block:IfHoverOverPermalink}
  170. opacity: 0.9;
  171. filter:alpha(opacity=90);
  172. -moz-opacity: 0.9; {/block:IfHoverOverPermalink}
  173. -webkit-transition: all 0.5s linear;
  174. -moz-transition: all 0.5s linear;
  175. -o-transition: all 0.5s linear;
  176. position: absolute;
  177. }
  178.  
  179. #perma a:link {
  180. color: {color:link};
  181. }
  182.  
  183. #perma a:hover {
  184. color: {color:background};
  185. -webkit-transition: all 0.8s ease;
  186. -moz-transition: all 0.8s ease;
  187. -o-transition: all 0.8s ease;}
  188.  
  189. #reblog a:link {
  190. color: {color:link};
  191. }
  192.  
  193. #entry blockquote {
  194. font-size: 10px;
  195. border-left: 2px {color:border} solid;
  196. padding-left: 5px;
  197. }
  198.  
  199. #entry {
  200. width: 500px;
  201. padding: 10px;
  202. margin-bottom: 15px;
  203. background-color: {color:entry};
  204. overflow:hidden;
  205. }
  206.  
  207. #entry img {
  208. max-width: 500px;
  209. }
  210.  
  211.  
  212. #sidebar img {
  213. max-width:250px;
  214. padding: 5px;
  215. padding-top: 10px;
  216. }
  217.  
  218. #bottom {
  219. bottom: 0;
  220. position: absolute;
  221. }
  222.  
  223. #bottom2 {
  224. position: fixed;
  225. }
  226.  
  227. .custom {
  228. width: 50px;
  229. height: 15px;
  230. word-wrap: break-word;
  231. font-size: 8px;
  232. letter-spacing: 1px;
  233. line-height: 8px;
  234. display:block; 
  235. text-align: center;
  236. font-family: arial;
  237. text-transform: uppercase;
  238. padding: 5px;
  239. float: left;
  240. background-color: {color:permalink};
  241. color: {color:link};
  242. margin: 2px; 
  243. }
  244.  
  245. .custom:hover {
  246. background-color: {color:hover};
  247. padding-bottom: 60px;
  248. text-align: center;
  249. }
  250.  
  251. #sigh img {
  252. max-width:250px;
  253. padding: 5px;
  254. }
  255.  
  256. #sigh {
  257. width: 260px;
  258. max-height: 340px;
  259. margin-top: 150px;
  260. margin-left: -4px;
  261. z-index: 999;
  262. position: fixed;
  263. text-align: justify;
  264. padding: 4px;
  265. font-size: 10px;
  266. line-height: 140%;
  267. padding: 4px;
  268. opacity: 0;
  269. filter:alpha(opacity=0);
  270. -moz-opacity: 0;
  271. position: relative;
  272. overflow: hidden;
  273. -webkit-transition: all 1s linear;
  274. -moz-transition: all 1s linear;
  275. -o-transition: all 1s linear;
  276. background-color: {color:entry};
  277. }
  278.  
  279. iframe#tumblr_controls {
  280. right:3px !important;
  281. position:fixed !important;
  282. opacity: 0.5;
  283. filter:alpha(opacity=0.5);
  284. -moz-opacity: 0.5;
  285. -webkit-transition: all 1s linear;
  286. -moz-transition: all 1s linear;
  287. -o-transition: all 1s linear;
  288. }
  289.  
  290. iframe#tumblr_controls:hover {
  291. opacity: 1;
  292. filter:alpha(opacity=1);
  293. -moz-opacity: 1;
  294. }
  295.  
  296. #sidebar {
  297. width: 260px;
  298. height: 350px;
  299. margin-top: 120px;
  300. margin-left: 40px;
  301. text-align: justify;
  302. font-size: 10px;
  303. line-height: 110%;
  304. padding: 4px;
  305. z-index:999;
  306. position: fixed;
  307. -webkit-transition: all 1s linear;
  308. -moz-transition: all 1s linear;
  309. -o-transition: all 1s linear;
  310. background-color: {color:entry};
  311. }
  312.  
  313. #sidebar:hover #sigh {
  314. width: 260px;
  315. height: 340px;
  316. opacity: 1;
  317. padding: 4px;
  318. margin-top: -330px;
  319. margin-left: -4px;
  320. font-size: 10px;
  321. line-height: 140%;
  322. filter:alpha(opacity=100);
  323. -moz-opacity: 1;
  324. -webkit-transition: all 1s linear;
  325. -moz-transition: all 1s linear;
  326. -o-transition: all 1s linear;
  327. z-index: 999;
  328. }
  329.  
  330. #sidebar:hover {
  331. opacity: 1;
  332. filter:alpha(opacity=100);
  333. -moz-opacity: 1;
  334. -webkit-transition: all 0.5s linear;
  335. -moz-transition: all 0.5s linear;
  336. -o-transition: all 0.5s linear;
  337. }
  338.  
  339. .headings {
  340. color: {color:heading};
  341. font-family:"dubiel";
  342. font-size:18pt;
  343. text-align: right;
  344. line-height: 60%;
  345. letter-spacing: -1px;
  346. font-style: italic;
  347. text-transform: lowercase;
  348. }
  349.  
  350. #tags {
  351. width: 510px;
  352. margin-top: 10px;
  353. margin-bottom: -10px;
  354. margin-left: -10px;
  355. text-transform: lowercase;
  356. padding: 2px;
  357. padding-left: 6px;
  358. background-color: {color:permalink};
  359. text-align: left;
  360. border-left: 3px {color:border} solid;
  361. }
  362.  
  363. .ask {
  364. position: relative;
  365. background-color: {color:permalink};
  366. padding: 10px;
  367. width: 480px;
  368. display: block;
  369. margin: 0;
  370. }
  371.  
  372. .qarrow {
  373. font-size: 30px;
  374. color: {color:permalink};
  375. margin-left: 240px;
  376. z-index: 999;
  377. margin-top: -15px;
  378. margin-bottom: -10px;
  379. }
  380.  
  381. .ask img {
  382. float: left;
  383. max-height: 50px;
  384. margin-right:3px;
  385. top: 20;
  386. -webkit-border-radius: 50px;
  387. -moz-border-radius: 50px;
  388. border-radius: 50px;
  389. }
  390.  
  391. .asktitle {
  392. font-family:"dubiel";
  393. font-size: 14pt;
  394. color: {color:heading};
  395. text-align: left;
  396. line-height: 60%
  397. margin-bottom: 10px;
  398. }
  399.  
  400. ol.notes, .notes li {
  401. list-style: none;
  402. padding: 0px;
  403. margin: 0px;
  404. }
  405.  
  406. .notes img {
  407. display: none; }
  408.  
  409.  
  410. .music {
  411. background-color: #fff;
  412. margin-bottom:0px;
  413. display:block;
  414. }
  415.  
  416. #art {
  417. margin-left: 0px;
  418. margin-bottom: 10px;
  419. }
  420.  
  421. #art img {
  422. max-width: 50px;
  423. float: left;
  424. border: solid {color:border} 5px;
  425. }
  426.  
  427. #source {
  428. font-family: {font:body};
  429. font-size:7pt;
  430. text-align: right;
  431. }
  432.  
  433. #previous {
  434. height: 10px;
  435. position: fixed;
  436. margin-top: 250px;
  437. margin-left: 300px;
  438. z-index: 1;
  439. }
  440.  
  441. #next {
  442. height: 10px;
  443. position: fixed;
  444. margin-top: 200px;
  445. margin-left: 300px;
  446. z-index: 1;
  447. }
  448.  
  449. #previous a {
  450. font-size: 19px;
  451. letter-spacing: 1px;
  452. display:block; 
  453. text-align: center;
  454. font-family: consolas;
  455. padding: 10px;
  456. float: left;
  457. background-color: {color:entry};
  458. color: {color:link};
  459. margin: 2px; 
  460. }
  461.  
  462. #next a {
  463. font-size: 19px;
  464. letter-spacing: 1px;
  465. display:block; 
  466. text-align: center;
  467. font-family: consolas;
  468. padding: 10px;
  469. float: left;
  470. background-color: {color:entry};
  471. color: {color:link};
  472. margin: 2px; 
  473. }
  474.  
  475. .linkage {
  476. width: 50px;
  477. height: 10px;
  478. font-size: 8px;
  479. letter-spacing: 1px;
  480. display:block; 
  481. text-align: center;
  482. font-family: arial;
  483. text-transform: uppercase;
  484. padding: 5px;
  485. float: left;
  486. background-color: {color:permalink};
  487. color: {color:link};
  488. margin: 2px; 
  489. }
  490.  
  491. .linkage:hover {
  492. background-color: {color:hover};
  493. height: 10px;
  494. text-align: center;
  495. }
  496.  
  497.  
  498.  
  499. {CustomCSS}
  500. </style>
  501.  
  502. {block:IfInfiniteScrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScrolling}
  503. </head>
  504.  
  505. <body>
  506.  
  507. <div id="title"><a href="/">{title}</a></div>
  508. <div id="sidebar">
  509. <center><a href="/" class="linkage">home</a>
  510. <a href="/ask" class="linkage">message</a>
  511. <a href="/archive" class="linkage">archive</a>
  512. <a href="http://heartens.tumblr.com" class="linkage">theme</a>
  513. </center>
  514.  
  515. <br><img src="{image:sidebar}">
  516. <div id="sigh"><img src="{image:hover}">
  517. {Description}
  518. <div id="bottom"><div id="bottom2"><center>
  519. {block:ifLink1}<a href="{text:Link1 URL}" class="custom">{text:Link1}</a>{/block:ifLink1}
  520. {block:ifLink2}<a href="{text:Link2 URL}" class="custom">{text:Link2}</a>{/block:ifLink2}
  521. {block:ifLink3}<a href="{text:Link3 URL}" class="custom">{text:Link3}</a>{/block:ifLink3}
  522. {block:ifLink4}<a href="{text:Link4 URL}" class="custom">{text:Link4}</a>{/block:ifLink4}
  523. </center></div></div>
  524. </div>
  525. </div>
  526.  
  527. {block:IfNotInfiniteScrolling}
  528. {block:Pagination}
  529. <div id="next">{block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}</div>
  530. <div id="previous">{block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}</div>
  531. {/block:Pagination}
  532. {/block:IfNotInfiniteScrolling}
  533.  
  534.  
  535. {block:Posts}
  536. <div id="main"><div id="entry">
  537.  
  538. {block:Date}<div id="perma">
  539. <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</a> at {24Hour}:{Minutes}{AmPm}
  540. {block:NoteCount}<br>{block:RebloggedFrom}<center> · <a href="{ReblogRootURL}">origin</a> · <a href="{ReblogParentURL}">via</a> · </center>
  541. {/block:RebloggedFrom}
  542. {/block:NoteCount}
  543. </div>{/block:Date}
  544.  
  545. {block:Photo}{LinkOpenTag}
  546. <img src="{PhotoURL-500}" alt="{PhotoAlt}">{LinkCloseTag}
  547. {block:Caption}{Caption}{/block:Caption}
  548. {/block:Photo}
  549.  
  550. {block:Text}{block:Title}
  551. <div class="headings">{Title}</div>{/block:Title}{Body}
  552. {/block:Text}
  553.  
  554. {block:Photoset}
  555. {Photoset-500}{block:Caption}{Caption}{/block:Caption}
  556. {/block:Photoset}
  557.  
  558. {block:Quote}
  559. <div class="headings">❝ {Quote}</div>
  560. {block:Source}<div id="source"> —{Source}</div>{/block:Source}
  561. {/block:Quote}
  562.  
  563. {block:Link}
  564. <div class="headings"><a href="{URL}" {Target}>{Name}</a></div>
  565. {block:Description}{Description}{/block:Description}
  566. {/block:Link}
  567.  
  568. {block:Chat}
  569. {block:Title}<div class="headings">{Title}</div>{/block:Title}
  570. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  571. {/block:Chat}
  572.  
  573. {block:Audio}
  574. <div id="art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  575. <div class="music">{AudioPlayerWhite}</div>
  576. {block:Caption}{Caption}{/block:Caption}
  577. {/block:Audio}
  578.  
  579. {block:Video}{Video-500}
  580. {block:Caption}{Caption}{/block:Caption}
  581. {/block:Video}
  582.  
  583. {block:Answer}
  584. <div class="ask">
  585. <img src="{AskerPortraitURL-40}"><div class="asktitle"><i>{Asker} asked:</div></i> {Question}</div> <div class="qarrow">◤</div>{Answer}
  586. {/block:Answer}
  587.  
  588. <div id="tags">
  589. {block:Date}Posted: <a href="{Permalink}">{TimeAgo}</a>{/block:Date} {block:NoteCount}with <a href="{Permalink}"> {NoteCountWithLabel}</a> (<a href="{ReblogURL}">Reblog</a>) {/block:NoteCount}
  590. {block:HasTags}<br>Tags: {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  591.  
  592. </div>
  593. {block:PostNotes}{PostNotes}{/block:PostNotes}
  594. </div>
  595. {/block:Posts}
  596.  
  597.  
  598. </body>
  599. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement