Advertisement
Korra

Theme: Magica

May 5th, 2012
16,332
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.43 KB | None | 0 0
  1. <html>
  2.  
  3.  
  4. <!---
  5.  
  6.  
  7. THEME: MAGICA BY HEARTENS (HEARTENS.TUMBLR.COM)
  8.  
  9. - DO NOT REMOVE THE CREDITS OR MOVE IT TO A SECONDARY PAGE
  10. - DO NOT REUPLOAD OR REDISTRIBUTE
  11. - DO NOT USE AS A BASE CODE
  12. ___________________________________________________________________
  13.  
  14. BACKGROUND IMAGE: SUBTLEPATTERNS.COM
  15. ___________________________________________________________________
  16.  
  17. --->
  18.  
  19. <head>
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}
  24. <meta name="description" content="{MetaDescription}" />
  25. {/block:Description}
  26.  
  27. <meta name="color:background" content="#eff4d9" />
  28. <meta name="color:sidebar" content="#fefff6" />
  29. <meta name="color:entry" content="#fefff6" />
  30. <meta name="color:permalink" content="#f4f9e5" />
  31.  
  32. <meta name="color:bold" content="#fea3a3" />
  33. <meta name="color:italic" content="#b5cd46" />
  34. <meta name="color:link" content="#F3B1C5" />
  35. <meta name="color:custom link" content="#F4FAD2" />
  36.  
  37. <meta name="color:title" content="#FFA5BE" />
  38. <meta name="color:title bg" content="#F4FAD2" />
  39. <meta name="color:scroll" content="#b2bd8b" />
  40. <meta name="color:text" content="#726e77" />
  41. <meta name="color:border" content="#E1EDB9" />
  42. <meta name="color:hover" content="#FFFFFF" />
  43.  
  44. <meta name="font:body" content="georgia" />
  45.  
  46. <meta name="if:HoverOverNavigation" content="1" />
  47. <meta name="if:InfiniteScrolling" content="1" />
  48. <meta name="if:ShowCaption" content="0" />
  49. <meta name="if:FadingImages" content="1" />
  50. <meta name="if:ShowMusicPlayer" content="1" />
  51.  
  52. <meta name="text:Background Repeat" content="repeat"/>
  53. <meta name="text:Player URL" content=""/>
  54.  
  55. <meta name="image:Sidebar" content="http://static.tumblr.com/pkk9drj/0ijm3kiyq/default.png"/>
  56. <meta name="image:Sidebar 2" content="http://static.tumblr.com/pkk9drj/QQkm3kixw/default2.png"/>
  57. <meta name="image:Background" content="http://static.tumblr.com/4hejznv/wp7m3fsot/concrete_wall_2.png"/>
  58.  
  59. <meta name="text:Link1" content="link title #1" />
  60. <meta name="text:Link1 URL" content="/"/>
  61. <meta name="text:Link2" content="link title #2" />
  62. <meta name="text:Link2 URL" content="/"/>
  63. <meta name="text:Link3" content="link title #3" />
  64. <meta name="text:Link3 URL" content="/"/>
  65. <meta name="text:Link4" content="link title #4" />
  66. <meta name="text:Link4 URL" content="/"/>
  67.  
  68. <style type="text/css">
  69. body {
  70. background-image: url('{image:background}');
  71. background-color: {color:background};
  72. background-attachment: fixed;
  73. background-repeat: {text:Background Repeat};
  74. background-position:bottom right;
  75. color: {color:text};
  76. font-family: calibri;
  77. text-align:justify;
  78. font-size: 11px;
  79. line-height: 11px;
  80. }
  81.  
  82. .entry b, #desc b, strong, #music b {
  83. color: {color:bold};
  84. }
  85.  
  86. .entry i, #desc i, em {
  87. color: {color:italic};
  88. }
  89.  
  90. .entry blockquote {
  91. border-left: 2px {color:border} solid;
  92. padding-left: 5px;
  93. }
  94.  
  95. @font-face {
  96. font-family: "Ostrich";
  97. src: url(http://static.tumblr.com/4hejznv/nH6m3fpw8/opensans-condlight.ttf) format("truetype");
  98. }
  99.  
  100. ::-webkit-scrollbar {
  101. height: 5px;
  102. width: 5px;
  103. background-color: {color:background};
  104. }
  105. ::-webkit-scrollbar-thumb:vertical {
  106. height: 5px;
  107. background-color: {color:scroll};
  108. }
  109. ::-webkit-scrollbar-thumb:vertical:hover{ 
  110. background-color: {color:scroll};
  111. }
  112. ::-webkit-scrollbar-thumb:horizontal:hover{ 
  113. background-color: {color:scroll};
  114. }
  115.  
  116. a {
  117. text-decoration:none;
  118. outline:none;
  119. color: {color:link};
  120. -moz-outline-style:none;
  121. -webkit-transition: all 0.5s linear;
  122. -moz-transition: all 0.5s linear;
  123. -o-transition: all 0.5s linear;
  124. }
  125.  
  126. a:hover {
  127. color: {color:border};
  128. }
  129.  
  130. .title {
  131. background-color: {color:title bg};
  132. color: {color:sidebar title};
  133. font-family: "Ostrich";
  134. font-size: 12pt;
  135. text-align: center;
  136. text-transform: uppercase;
  137. width: 260px;
  138. padding: 5px;
  139. margin-top: 60px;
  140. margin-bottom: 10px;
  141. }
  142.  
  143. .title a:hover {
  144. color: {color:hover};
  145. }
  146.  
  147. .title2 {
  148. background-color: {color:title bg};
  149. color: {color:sidebar title};
  150. font-family: "Ostrich";
  151. font-size: 12pt;
  152. text-align: center;
  153. text-transform: uppercase;
  154. width: 260px;
  155. padding: 5px;
  156. margin-top: 5px;
  157. }
  158.  
  159. #desc {
  160. margin-top: 110px
  161. text-align: justify;
  162. font-family: tahoma;
  163. width: 270px;
  164. font-size: 9px;
  165. line-height: 12px;
  166. letter-spacing: 1px;
  167. }
  168.  
  169. #sideimage {
  170. max-width: 260px;
  171. }
  172.  
  173. #sideimage img {
  174. max-width: 260px;
  175. margin-left: -5px;
  176. background-color: {color:title bg};
  177. padding: 5px;
  178. }
  179.  
  180. #sidebar {
  181. width: 290px;
  182. padding: 10px;
  183. text-align: justify;
  184. font-size: 10px;
  185. line-height: 110%;
  186. -webkit-transition: all 1s linear;
  187. -moz-transition: all 1s linear;
  188. -o-transition: all 1s linear;
  189. }
  190.  
  191. #left {
  192. height: 1100px;
  193. margin-top: -10px;
  194. margin-left: -10px;
  195. width: 290px;
  196. position: fixed;
  197. background-color: {color:sidebar};
  198. overflow: hidden;
  199. border-right: dotted 1px {color:border};
  200. }
  201.  
  202. {block:IfHoverOverNavigation}#left:hover #page {
  203. margin-left: 290px;
  204. -webkit-transition: all 0.5s linear;
  205. -moz-transition: all 0.5s linear;
  206. -o-transition: all 0.5s linear;
  207. }{/block:IfHoverOverNavigation}
  208.  
  209. #main {
  210. {block:IndexPage}width: 650px;{/block:IndexPage}
  211. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  212. float: left;
  213. margin-left: 350px;
  214. }
  215.  
  216. #page {
  217. width: 48px;
  218. height: auto;
  219. padding: 5px;
  220. margin-left: 290px;
  221. {block:IfHoverOverNavigation}
  222. margin-left: 236px;
  223. z-index: -1;
  224. {/block:IfHoverOverNavigation}
  225. margin-top: 50px;
  226. position: fixed;
  227. overflow: hidden;
  228. background-color: {color:entry};
  229. border-top: solid 10px {color:border};
  230. border-bottom: solid 10px {color:border};
  231. border-right: solid 1px {color:border};
  232. -webkit-transition: all 0.5s linear;
  233. -moz-transition: all 0.5s linear;
  234. -o-transition: all 0.5s linear;
  235. -moz-box-shadow: 0px 0px 3px #e2e2e2;
  236. -webkit-box-shadow: 0px 0px 3px #e2e2e2;
  237. box-shadow: 0px 0px 3px #e2e2e2;
  238. }
  239.  
  240. .custom {
  241. width: 45px;
  242. height: 45px;
  243. -webkit-border-radius: 45px;
  244. -moz-border-radius: 45px;
  245. border-radius: 45px;
  246. line-height: 55px;
  247. font-size: 9px;
  248. letter-spacing: 1px;
  249. display:block;
  250. text-align: center;
  251. background-color: {color:custom link};
  252. text-transform: lowercase;
  253. overflow: hidden;
  254. color: {color:misc links};
  255. float: left;
  256. margin-bottom: 5px;
  257. -webkit-transition: all 0.5s linear;
  258. -moz-transition: all 0.5s linear;
  259. -o-transition: all 0.5s linear;
  260. }
  261.  
  262. .custom1 {
  263. width: 45px;
  264. height: 45px;
  265. -webkit-border-radius: 45px;
  266. -moz-border-radius: 45px;
  267. border-radius: 45px;
  268. line-height: 45px;
  269. font-size: 9px;
  270. letter-spacing: 1px;
  271. display:block;
  272. text-align: center;
  273. background-color: {color:custom link};
  274. text-transform: lowercase;
  275. overflow: hidden;
  276. color: {color:misc links};
  277. float: left;
  278. margin-bottom: 5px;
  279. -webkit-transition: all 0.5s linear;
  280. -moz-transition: all 0.5s linear;
  281. -o-transition: all 0.5s linear;
  282. }
  283.  
  284. .custom:hover, .custom1:hover {
  285. background-color: {color:hover};
  286. }
  287.  
  288. .entry:hover #perma {
  289. height: auto;
  290. font-size: 9px;
  291. letter-spacing: 1px;
  292. margin-left: -10px;
  293. margin-top: -7px;
  294. opacity: 0.9;
  295. filter:alpha(opacity=90);
  296. -moz-opacity: 0.9;
  297. -webkit-transition: all 0.8s ease;
  298. -moz-transition: all 0.8s ease;
  299. -o-transition: all 0.8s ease;
  300. position: absolute;
  301. }
  302.  
  303. #perma {
  304. background-color: {color:permalink};
  305. border-top: 1px {color:border} dotted;
  306. font-family: calibri;
  307. font-size: 9px;
  308. letter-spacing: 1px;
  309. width: 270px;
  310. margin-top: -7px;
  311. margin-left: -10px;
  312. text-align: center;
  313. padding-top: 5px;
  314. text-transform: uppercase;
  315. font-style: none;
  316. opacity: 0;
  317. filter:alpha(opacity=0);
  318. -moz-opacity: 0;
  319. -webkit-transition: all 0.5s ease;
  320. -moz-transition: all 0.5s ease;
  321. -o-transition: all 0.5s ease;
  322. position:absolute;
  323. z-index: 999;
  324. }
  325.  
  326. #player {
  327. background-color: {color:title bg};
  328. color: {color:sidebar title};
  329. text-align: left;
  330. margin-left: -5px;
  331. padding: 5px;
  332. z-index: 999;
  333. width: 190px;
  334. overflow: hidden;
  335. }
  336.  
  337. #melo {
  338. margin-left: 10px;
  339. }
  340.  
  341. #music {
  342. width: 190px;
  343. background-color: {color:entry};
  344. overflow:hidden;
  345. margin-left: 955px;
  346. bottom: 150px;
  347. border:solid 3px {color:border};
  348. -moz-border-radius: 10px;
  349. -webkit-border-radius: 10px;
  350. border-radius: 10px;
  351. position: fixed;
  352. padding: 10px;
  353. padding-bottom: 4px;
  354. -moz-box-shadow: 0px 0px 3px #e2e2e2;
  355. -webkit-box-shadow: 0px 0px 3px #e2e2e2;
  356. box-shadow: 0px 0px 3px #e2e2e2;
  357. }
  358.  
  359. #music img {
  360. max-width: 180px;
  361. margin-top: -5px;
  362. margin-left: -5px;
  363. padding: 10px;
  364. background-color: {color:title bg};
  365. }
  366.  
  367. .entry {
  368. float: left;
  369. {block:IndexPage}width: 250px;{/block:IndexPage}
  370. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  371. padding: 10px;
  372. margin-bottom: 15px;
  373. background-color: {color:entry};
  374. overflow:hidden;
  375. margin: 5px;
  376. border:solid 6px {color:border};
  377. -moz-box-shadow: 0px 0px 3px #e2e2e2;
  378. -webkit-box-shadow: 0px 0px 3px #e2e2e2;
  379. box-shadow: 0px 0px 3px #e2e2e2;
  380. }
  381.  
  382. .entry img {
  383. {block:IndexPage}max-width: 250px;{/block:IndexPage}
  384. {block:PermalinkPage}max-width: 500px;{/block:PermalinkPage}
  385. }
  386.  
  387. {block:IfFadingImages}{block:IndexPage}
  388. .eimages {
  389. opacity: 0.5;
  390. filter:alpha(opacity=50);
  391. -moz-opacity: 0.5;
  392. -webkit-transition: all 0.5s linear;
  393. -moz-transition: all 0.5s linear;
  394. -o-transition: all 0.5s linear;
  395. }{/block:IndexPage}{/block:IfFadingImages}
  396.  
  397.  
  398. {block:IfFadingImages}{block:IndexPage}.eimages:hover {
  399. opacity: 0.9;
  400. filter:alpha(opacity=90);
  401. -moz-opacity: 0.9;
  402. }{/block:IndexPage}{/block:IfFadingImages}
  403.  
  404. iframe#tumblr_controls {
  405. right:3px !important;
  406. position:fixed !important;
  407. opacity: 0.5;
  408. filter:alpha(opacity=0.5);
  409. -moz-opacity: 0.5;
  410. -webkit-transition: all 1s linear;
  411. -moz-transition: all 1s linear;
  412. -o-transition: all 1s linear;
  413. }
  414.  
  415. iframe#tumblr_controls:hover {
  416. opacity: 1;
  417. filter:alpha(opacity=1);
  418. -moz-opacity: 1;
  419. }
  420.  
  421. .header {
  422. color: {color:title};
  423. font-family: 'Ostrich';
  424. font-size: 14pt;
  425. text-align: left;
  426. line-height: 16px;
  427. text-transform: uppercase;
  428. margin-bottom: 5px;
  429. }
  430.  
  431. #tags {
  432. width: 512px;
  433. margin-left: -10px;
  434. margin-top: 10px;
  435. margin-bottom: 10px;
  436. text-transform: uppercase;
  437. padding: 2px;
  438. font-size: 9px;
  439. padding-left: 6px;
  440. letter-spacing: 1px;
  441. text-align: center;
  442. line-height: 10px;
  443. border-top: dotted 1px {color:border};
  444. }
  445.  
  446. .ask {
  447. position: relative;
  448. background-color: {color:permalink};
  449. {block:IndexPage}width: 240px;{/block:IndexPage}
  450. {block:PermalinkPage}width: 490px;{/block:PermalinkPage}
  451. display: block;
  452. font-size: 10px;
  453. padding: 5px;
  454. margin: 0;
  455. }
  456.  
  457. .asktitle {
  458. font-family: calibri;
  459. text-transform: uppercase;
  460. color: {color:title};
  461. text-align: left;
  462. margin-bottom: 2px;
  463. }
  464.  
  465. ol.notes, .notes li {
  466. margin-left: 5px;
  467. list-style-type:square;
  468. }
  469.  
  470. .notes img {
  471. display: none;
  472. }
  473.  
  474.  
  475. .music {
  476. background-color: #e4e4e4;
  477. margin-bottom:0px;
  478. }
  479.  
  480. #source {
  481. font-family: calibri;
  482. font-size: 7pt;
  483. text-align: right;
  484. text-transform: uppercase;
  485. }
  486.  
  487. .pagination {
  488. width: 260px;
  489. padding: 5px;
  490. font-family: calibri;
  491. font-size: 12px;
  492. margin-top: 10px;
  493. background-color: {color:title bg};
  494. float: left;
  495. {block:IfInfiniteScrolling}
  496. display: none;
  497. {/block:IfInfiniteScrolling}
  498. text-align: center;
  499. }
  500.  
  501. .end {
  502. width: 500px;
  503. color: {color:text};
  504. }
  505. {CustomCSS}
  506. </style>
  507. {block:IndexPage}
  508.  
  509. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  510. {block:IfInfiniteScrolling}
  511. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>{/block:IfInfiniteScrolling}
  512. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  513. <script>
  514. $(function(){
  515. var $container = $('#main');
  516. $container.imagesLoaded(function(){
  517. $container.masonry({
  518. itemSelector: '.entry',
  519. });
  520. });
  521. $container.infinitescroll({
  522. itemSelector : ".entry",
  523. navSelector : "div.pagination",
  524. nextSelector : ".pagination a#next",
  525. loadingImg : "",
  526. loadingText : "",
  527. bufferPx : 10000,
  528. extraScrollPx: 12000,
  529. },
  530. // trigger Masonry as a callback
  531. function( newElements ) {
  532. var $newElems = $( newElements ).css({ opacity: 0 });
  533. // ensure that images load before adding to masonry layout
  534. $newElems.imagesLoaded(function(){
  535. $newElems.animate({ opacity: 1 });
  536. $container.masonry( 'appended', $newElems, true );
  537. });
  538. }
  539. );
  540. });
  541. </script>
  542. {/block:IndexPage}
  543.  
  544. </head>
  545. <body>
  546.  
  547. <div id="left">
  548. <div id="page">
  549. <a href="/" class="custom" title="home"><img src="http://static.tumblr.com/4hejznv/G81m3efkm/home.png"></a>
  550. <a href="/ask" class="custom" title="ask"><img src="http://static.tumblr.com/4hejznv/z8Dm3efj3/msg.png"></a>
  551. <a href="/archive" class="custom" title="archive"><img src="http://static.tumblr.com/4hejznv/grym3efhz/ac.png"></a>
  552. <a href="http://heartens.tumblr.com" class="custom" title="theme">
  553. <img src="http://static.tumblr.com/4hejznv/Rpcm3efjy/crd.png"></a>
  554. {block:ifLink1}<a href="{text:Link1 URL}" class="custom1" title="{text:Link1}">01</a>{/block:ifLink1}
  555. {block:ifLink2}<a href="{text:Link2 URL}" class="custom1" title="{text:Link2}">02</a>
  556. {/block:ifLink2}
  557. {block:ifLink3}<a href="{text:Link3 URL}" class="custom1" title="{text:Link3}">03</a>{/block:ifLink3}
  558. {block:ifLink4}<a href="{text:Link4 URL}" class="custom1" title="{text:Link4}">04</a>{/block:ifLink4}
  559. </div>
  560.  
  561. <div id="sidebar">
  562. <div id="desc"><div class="title">{title}</div>
  563. <center><div id="sideimage"><img src="{image:sidebar}"></div></center>
  564. {description}
  565.  
  566. <div class="pagination">
  567. {block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}{CurrentPage}/ {TotalPages}{block:NextPage}<a href="{NextPage}" id="next"> »</a>{/block:NextPage}{/block:Pagination}
  568. </div>
  569. </div></div></div>
  570.  
  571. <div id="music"><center><img src="{image:sidebar 2}"></center>
  572. {block:IfShowMusicPlayer}<div id="player"><div id="melo">{text:Player URL}</div></div>{/block:IfShowMusicPlayer}
  573. </div>
  574.  
  575. <div id="main">{block:Posts}<div class="entry">
  576.  
  577. {block:Text}{block:Title}<div class="header">{Title}</div>{/block:Title}{Body}
  578. {/block:Text}
  579.  
  580. {block:Photo}{LinkOpenTag}<div class="eimages"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></div>{LinkCloseTag}
  581. {block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
  582. {block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
  583. {/block:Photo}
  584.  
  585. {block:Photoset}
  586. {block:IndexPage}<div class="eimages">{Photoset-250}</div>{/block:IndexPage}
  587. {block:PermalinkPage}<div class="eimages">{Photoset-500}</div>{/block:PermalinkPage}
  588. {block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
  589. {block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
  590. {/block:Photoset}
  591.  
  592. {block:Quote}<div class="header">❝ {Quote}</div>
  593. {block:Source}<div id="source"> —{Source}</div>{/block:Source}
  594. {/block:Quote}
  595.  
  596. {block:Link}<div class="header"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}
  597. {/block:Link}
  598.  
  599. {block:Chat}{block:Title}<t>{Title}</t>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  600. {/block:Chat}
  601.  
  602. {block:Audio}<div class="music">{AudioPlayerGrey}</div>
  603. {block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
  604. {block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
  605. {/block:Audio}
  606.  
  607. {block:Video}{block:IndexPage}{Video-250}{/block:IndexPage}
  608. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  609. {block:IfShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaption}
  610. {block:IfNotShowCaption}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaption}
  611. {/block:Video}
  612.  
  613. {block:Answer}
  614. <div class="ask"><div class="asktitle">{Asker} asked:</div> {Question}</div>{Answer}
  615. {/block:Answer}
  616.  
  617. {block:IndexPage}
  618. {block:Date}<div id="perma">posted <a href="{Permalink}">{TimeAgo}</a> {block:NoteCount}with <a href="{Permalink}"> {NoteCountWithLabel}</a>
  619. {/block:NoteCount}
  620. </div>{/block:Date}
  621. {/block:IndexPage}
  622.  
  623. {block:PermalinkPage}
  624. <div class="end"><div id="tags">
  625. {block:Date}Posted: <a href="{Permalink}">{TimeAgo}</a>{/block:Date} {block:NoteCount} | <a href="{Permalink}"> {NoteCountWithLabel}</a> (<a href="{ReblogURL}">Reblog</a>){/block:NoteCount}
  626.  
  627. {block:RebloggedFrom}<br> origin: <a href="{ReblogRootURL}"> {ReblogRootName}</a>, via: <a href="{ReblogParentURL}"> {ReblogParentName}</a>{/block:RebloggedFrom}
  628.  
  629. {block:HasTags}<br>Tags: {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  630.  
  631. {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  632. {/block:PermalinkPage}
  633. </div>
  634.  
  635. {/block:Posts}
  636. </div>
  637. </body>
  638. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement