Advertisement
dreamermeetsreality

Elysian - Czarina Theme

Dec 16th, 2012
205
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.20 KB | None | 0 0
  1. <html>
  2.  
  3. <!--
  4. CZARINA THEME BY HTTP://DREAMERMEETSREALITY.TUMBLR.COM
  5. DO NOT REMOVE CREDITS
  6. CREDITS:
  7. SIDEBAR PHOTO FROM MORTGRAPHICS.LIVEJOURNAL.COM-->
  8.  
  9.  
  10. <head>
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}"/>
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description} <meta name="description" content="{MetaDescription}"/> {/block:Description}
  16.  
  17. <!-- CUSTOMIZE THEM ALL -->
  18. <meta name="color:background" content="#390039" />
  19. <meta name="color:text" content="#FFE5F9" />
  20. <meta name="color:links" content="#820081" />
  21. <meta name="color:links hover" content="#FFFFFF" />
  22. <meta name="color:description" content="#906090" />
  23. <meta name="color:description bg" content="#EFD7FA" />
  24. <meta name="color:side links" content="#601286" />
  25. <meta name="color:side links bg" content="#CFACF7" />
  26. <meta name="color:side links hover" content="#943D8A" />
  27. <meta name="color:left" content="#000000" />
  28. <meta name="color:title" content="#000000" />
  29. <meta name="color:bold" content="#686466" />
  30. <meta name="color:italic" content="#FE1CAC" />
  31. <meta name="color:scrollbar bg" content="#000000" />
  32. <meta name="color:scrollbar" content="#EFD7FA" />
  33. <meta name="color:posts bg" content="#943D8A" />
  34. <meta name="color:photo border" content="#943D8A" />
  35. <meta name="color:perma bg" content="#000000" />
  36. <meta name="color:perma text" content="#943D8A" />
  37. <meta name="color:ask line" content="#943D8A" />
  38. <meta name="font:description" content="Georgia" />
  39. <meta name="font:text" content="Georgia" />
  40. <meta name="image:background" content="" />
  41. <meta name="image:side" content="http://i.imgbox.com/aah96T8b" />
  42. <meta name="text:border size" content="1" />
  43. <meta name="text:Link1" content="" />
  44. <meta name="text:Link2" content="" />
  45. <meta name="text:Link3" content="" />
  46. <meta name="text:Link4" content="" />
  47. <meta name="text:Link1URL" content="" />
  48. <meta name="text:Link2URL" content="" />
  49. <meta name="text:Link3URL" content="" />
  50. <meta name="text:Link4URL" content="" />
  51. <meta name="text:links title" content="Navigation" />
  52. <meta name="text:additional text" content="Additional words" />
  53. <meta name="if:ShowBlogTitle" content="1" />
  54. <meta name="if:FadingImages" content="1" />
  55. <meta name="if:RoundedPosts" content="1" />
  56. <meta name="if:RoundedSidebar" content="1" />
  57. <meta name="if:ShowCaptions" content="1" />
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
  60.  
  61. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  62.  
  63. <style type="text/css">
  64. body
  65. {
  66. background: url("image:background") {color:background};
  67. color: {color:text};
  68. background-attachment: fixed;
  69. font-family: {font:text};
  70. font-size: 12px;
  71. line-height: 13px;
  72. text-align: left;
  73. }
  74.  
  75. a, a:link, a:active, a:visited
  76. {
  77. text-decoration: none;
  78. color: {color:links} ;
  79. -webkit-transition: all 0.5s ease-in-out;
  80. -moz-transition: all 0.5s ease-in-out;
  81. -o-transition: all 0.5s ease-in-out;
  82. -ms-transition: all 0.5s ease-in-out;
  83. transition: all 0.5s ease-in-out;
  84. }
  85.  
  86. a:hover
  87. {
  88. color: {color:links hover};
  89. -webkit-transition: all 0.5s ease-in-out;
  90. -moz-transition: all 0.5s ease-in-out;
  91. -o-transition: all 0.5s ease-in-out;
  92. -ms-transition: all 0.5s ease-in-out;
  93. transition: all 0.5s ease-in-out;
  94. }
  95.  
  96. #posts
  97. {
  98. {block:IndexPage}width: 600px;{/block:IndexPage}
  99. {block:PermalinkPage}width: 400px;{/block:PermalinkPage}
  100. float: right;
  101. }
  102.  
  103. #left
  104. {
  105. background-color: {color:left};
  106. background-repeat: repeat;
  107. position: fixed;
  108. width: 250px;
  109. height: 400px; /* ADJUST THIS TO ADD MORE LINKS */
  110. top: 60px;
  111. left: 15px;
  112. {block:IfRoundedSidebar}
  113. border-radius: 15px;
  114. -o-border-radius: 15px;
  115. -moz-border-radius: 15px;
  116. -webkit-border-radius: 15px;
  117. {/block:IfRoundedSidebar}
  118. }
  119.  
  120. #photo
  121. {
  122. top: 70px;
  123. left: 19px;
  124. width:240px;
  125. height: 180px;
  126. position: fixed;
  127.  
  128. }
  129.  
  130. #description
  131. {
  132. top: 70px;
  133. left: 19px;
  134. width:240px;
  135. height: 180px;
  136. position: fixed;
  137. opacity: 0;
  138. padding: 1px;
  139. -webkit-transition: all 0.5s ease-in-out;
  140. -moz-transition: all 0.5s ease-in-out;
  141. -o-transition: all 0.5s ease-in-out;
  142. -ms-transition: all 0.5s ease-in-out;
  143. transition: all 0.5s ease-in-out;
  144. color: {color:description};
  145. font-face:{font:description};
  146. background:{color:description bg}
  147. }
  148.  
  149. #description:hover
  150. {
  151. -webkit-transition: all 0.5s ease-in-out;
  152. -moz-transition: all 0.5s ease-in-out;
  153. -o-transition: all 0.5s ease-in-out;
  154. -ms-transition: all 0.5s ease-in-out;
  155. transition: all 0.5s ease-in-out;
  156. opacity: 0.9;
  157. {block:IfRoundedSidebar}
  158. border-radius: 15px;
  159. -o-border-radius: 15px;
  160. -moz-border-radius: 15px;
  161. -webkit-border-radius: 15px;
  162. {/block:IfRoundedSidebar}
  163. }
  164.  
  165. #link
  166. {
  167. top: 270px;
  168. width:210px;
  169. left:20px;
  170. height:auto;
  171. position: fixed;
  172. text-align: left;
  173. }
  174. .links
  175. {
  176. text-transform: lowercase;
  177. font-family: 'Georgia';
  178. text-align: center;
  179. width:240px;
  180. height: 10px;
  181. padding-top: 2px;
  182. padding-bottom: 2px;
  183. -webkit-transition: all 0.5s ease-in-out;
  184. -moz-transition: all 0.5s ease-in-out;
  185. -o-transition: all 0.5s ease-in-out;
  186. -ms-transition: all 0.5s ease-in-out;
  187. transition: all 0.5s ease-in-out;
  188. background: {color:side links bg};
  189. color: {color:side links};
  190. display: block;
  191. opacity: 0.6;
  192. }
  193.  
  194. .links:hover
  195. {
  196. padding-top: 10px;
  197. padding-bottom: 10px;
  198. -webkit-transition: all 0.5s ease-in-out;
  199. -moz-transition: all 0.5s ease-in-out;
  200. -o-transition: all 0.5s ease-in-out;
  201. -ms-transition: all 0.5s ease-in-out;
  202. transition: all 0.5s ease-in-out;
  203. color:{color:side links hover};
  204. }
  205.  
  206. .notes
  207. {
  208. float: left;
  209. }
  210.  
  211. .photo
  212. {
  213. width:240px;
  214. height: 180px;
  215. border: {text:border size}px solid {color:photo border};
  216. text-align: center;
  217. {block:IfRoundedSidebar}
  218. border-radius: 15px;
  219. -o-border-radius: 15px;
  220. -moz-border-radius: 15px;
  221. -webkit-border-radius: 15px;
  222. {/block:IfRoundedSidebar}
  223. }
  224.  
  225. .title
  226. {
  227. padding-top: 5px;
  228. font-size: 50px;
  229. color: {color:title};
  230. font-family: 'Tangerine', cursive;
  231. }
  232.  
  233. .add
  234. {
  235. color:{color:additional text};
  236. font-family: 'Courier';
  237. padding-left: 20px;
  238. padding-top: 10px;
  239. text-align: right;
  240. width: 220px;
  241. }
  242.  
  243. .text b, strong{
  244. color: {color:bold};}
  245.  
  246. .text i, em {
  247. color: {color:italic};}
  248.  
  249. .post img{
  250. {block:IndexPage}max-width: 250px;{/block:IndexPage}
  251. {block:PermalinkPage}max-width: 500px;{/block:PermalinkPage}
  252. {block:IfFadingImages}
  253. -webkit-transition: all 0.5s ease-in-out;
  254. -moz-transition: all 0.5s ease-in-out;
  255. -o-transition: all 0.5s ease-in-out;
  256. -ms-transition: all 0.5s ease-in-out;
  257. transition: all 0.5s ease-in-out;
  258. opacity: 0.7;
  259. {/block:IfFadingImages}
  260. {block:IfRoundedPosts}
  261. border-radius: 15px;
  262. -o-border-radius: 15px;
  263. -moz-border-radius: 15px;
  264. -webkit-border-radius: 15px;
  265. {/block:IfRoundedPosts}
  266. float: right;
  267. }
  268.  
  269. .post
  270. {
  271. padding: 5px;
  272. position: relative;
  273. margin: 5px;
  274. font-size: 10px;
  275. background: {color:posts bg};
  276. {block:IndexPage}width: 250px;{/block:IndexPage}
  277. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  278. {block:IfRoundedPosts}
  279. border-radius: 15px;
  280. -o-border-radius: 15px;
  281. -moz-border-radius: 15px;
  282. -webkit-border-radius: 15px;
  283. {/block:IfRoundedPosts}
  284. margin-bottom: 20px;
  285. position: relative;
  286. {block:IndexPage}float: right;;{/block:IndexPage}
  287. }
  288.  
  289. .post img:hover
  290. {
  291. opacity: 1;
  292. -webkit-transition: all 0.5s ease-in-out;
  293. -moz-transition: all 0.5s ease-in-out;
  294. -o-transition: all 0.5s ease-in-out;
  295. -ms-transition: all 0.5s ease-in-out;
  296. transition: all 0.5s ease-in-out;
  297. }
  298.  
  299.  
  300. .ask
  301. {
  302. background: {color:ask bg};
  303. padding-top: 6px;
  304. height: auto;
  305. padding-left: 15px;
  306. vertical-align: middle;
  307. }
  308.  
  309. .answer
  310. {
  311. margin-top: -10px;
  312. padding-left: 10px;
  313. text-align: right;
  314. vertical-align: top;
  315. }
  316.  
  317. .pagination
  318. {
  319. display: none;
  320. }
  321.  
  322. ::-webkit-scrollbar {
  323. width: 7px;
  324. background-color: #676767;
  325. }
  326.  
  327. ::-webkit-scrollbar-track-piece {
  328. background-color: {color:scrollbar bg};
  329. -webkit-border-radius:15px;
  330. }
  331.  
  332. ::-webkit-scrollbar-button:start:decrement,
  333. ::-webkit-scrollbar-button:end:increment {
  334. height: 5px;
  335. display: block;
  336. background: #676767;
  337. }
  338.  
  339. ::-webkit-scrollbar-thumb{
  340. background-color: {color:scrollbar};
  341. -webkit-border-radius:15px;
  342. border:solid 1px #666666;
  343. }
  344.  
  345. {CustomCSS}
  346. </style>
  347.  
  348. <!-- THESE ARE IMPORTANT. DO NOT REMOVE!-->
  349. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  350.  
  351. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  352.  
  353. <script>
  354. $(function(){
  355. var $container = $('#posts');
  356. $container.imagesLoaded(function(){
  357. $container.masonry({
  358. itemSelector: '.post',
  359. });
  360. });
  361. $container.infinitescroll({
  362. itemSelector : ".post",
  363. navSelector : "div.pagination",
  364. nextSelector : ".pagination a#next",
  365. loadingImg : "",
  366. loadingText : "<em></em>",
  367. bufferPx : 10000,
  368. extraScrollPx: 12000,
  369. },
  370. // trigger Masonry as a callback
  371. function( newElements ) {
  372. var $newElems = $( newElements ).css({ opacity: 0 });
  373. // ensure that images load before adding to masonry layout
  374. $newElems.imagesLoaded(function(){
  375. $newElems.animate({ opacity: 1 });
  376. $container.masonry( 'appended', $newElems, true );
  377. });
  378. }
  379. );
  380. });
  381. </script>
  382. </head>
  383.  
  384. <body>
  385. <div id="left">
  386. <center>
  387. <div id="photo">
  388. <img src="{image:side}" class="photo">
  389. </div>
  390. <div id="description">
  391. {block:IfShowBlogTitle}<div class="title">{Title}</div><br>{/block:IfShowBlogTitle}
  392. {Description}
  393. </div>
  394. <br>
  395. <div id="link">
  396. <font face="Tangerine" size="30px">{text:links title}</font>
  397. <a href="/" class="links">home</a>
  398. <a href="/ask" class="links">letterbox</a>
  399. <a href="/archive" class="links">memories</a>
  400. {block:IfLink1}
  401. <a href="{text:Link1URL}" class="links">{text:Link1}</a>
  402. {/block:IfLink1}
  403. {block:IfLink2}
  404. <a href="{text:Link2URL}" class="links">{text:Link2}</a>
  405. {/block:IfLink2}
  406. {block:IfLink3}
  407. <a href="{text:Link3URL}" class="links">{text:Link3}</a>
  408. {/block:IfLink3}
  409. {block:IfLink4}
  410. <a href="{text:Link4URL}" class="links">{text:Link4}</a>
  411. {/block:IfLink4}
  412. <!-- MORE LINKS CAN BE ADDED HERE. HOWEVER, IF YOU WANT TO DO SO, YOU HAVE TO ADJUST THE HEIGHT OF THE SIDEBAR. IT'S DIV IS #LEFT-->
  413. <a href="http://dreamermeetsreality.tumblr.com" class="links">theme designer</a>
  414. <div class="add">{text:additional text}</div>
  415. </center>
  416. <br>
  417. <div class="pagination">
  418. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  419. </div>
  420. </div>
  421. <div id="posts">
  422. <div class="text">
  423. {block:Posts}
  424.  
  425. {block:Text}
  426.  
  427. <div class="post">
  428. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  429. {block:Title}
  430. <h3><a href="{Permalink}">{Title}</a></h3>
  431. {/block:Title}
  432. {Body}
  433. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  434. </div>
  435. {/block:Text}
  436.  
  437. {block:Photo}
  438. <div class="post">
  439. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  440. <center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  441. {block:IfShowCaptions}
  442. {block:Caption}
  443. <div class="caption">{Caption}</div>
  444. {/block:Caption}
  445. {/block:IfShowCaptions}
  446. </div>
  447. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  448. {/block:Photo}
  449.  
  450. {block:Photoset}
  451. <div class="post">
  452. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  453. <center>{Photoset-400}</center>
  454. {block:IfShowCaptions}
  455. {block:Caption}
  456. <div class="caption">{Caption}</div>
  457. {/block:Caption}
  458. {/block:IfShowCaptions}
  459. </div>
  460. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  461. {/block:Photoset}
  462.  
  463. {block:Quote}
  464. <div class="post">
  465. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  466. <div class="quote">"{Quote}"</div>
  467. {block:Source}
  468. <div class="source">{Source}</div>
  469. {/block:Source}
  470. </div>
  471. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  472. {/block:Quote}
  473.  
  474. {block:Link}
  475. <div class="post">
  476. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  477. {block:Description}
  478. <div class="description">{Description}</div>
  479. {/block:Description}
  480. </div>
  481. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  482. {/block:Link}
  483.  
  484. {block:Chat}
  485. <div class="post">
  486. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  487. {block:Title}
  488. <h3><a href="{Permalink}">{Title}</a></h3>
  489. {/block:Title}
  490. <ul class="chat">
  491. {block:Lines}
  492. <li class="{Alt} user_{UserNumber}">
  493. {block:Label}
  494. <span class="label">{Label}</span>
  495. {/block:Label}
  496. {Line}
  497. </li>
  498. {/block:Lines}
  499. </ul>
  500. </div>
  501. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  502. {/block:Chat}
  503.  
  504. {block:Video}
  505. <div class="post">
  506. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  507. <center>{Video-500}</center>
  508. {block:Caption}
  509. <div class="caption">{Caption}</div>
  510. {/block:Caption}
  511. </div>
  512. {block:PostNotes}{PostNotes}{/block:PostNotes}
  513. {/block:Video}
  514.  
  515. {block:Audio}
  516. <div class="post">
  517. <a title="" href="{Permalink}">{NoteCountWithLabel}</a> &middot; <a href="{ReblogUrl}">reblog </a>
  518. {AudioPlayerBlack}
  519. {block:Caption}
  520. <div class="caption">{Caption}</div>
  521. {/block:Caption}
  522. </div>
  523. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  524. {/block:Audio}
  525.  
  526. {block:Answer}
  527. <div class="post">
  528. <div class="ask"> {Asker} : {Question}</div>
  529. <hr color="{color:ask line}">
  530. <div class="answer">{Answer}</div></div>
  531. {/block:Answer}
  532.  
  533. {/block:Posts}
  534.  
  535. </div>
  536.  
  537. </div>
  538. </body>
  539.  
  540. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement