Advertisement
0fficialvanessa

"Serenity" Theme Three- FIRST.

Aug 8th, 2013
85
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.57 KB | None | 0 0
  1. <!--
  2. Theme Three by Jade (mxrandakerr)
  3. -->
  4.  
  5. <html lang="en">
  6. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9.  
  10. <script type="text/javascript">
  11. <!--
  12.  
  13. // Disable Right Click Script
  14.  
  15. function IE(e)
  16. {
  17. if (navigator.appName == "Microsoft Internet Explorer" && (event.button == "2" || event.button == "3"))
  18. {
  19. return false;
  20. }
  21. }
  22. function NS(e)
  23. {
  24. if (document.layers || (document.getElementById && !document.all))
  25. {
  26. if (e.which == "2" || e.which == "3")
  27. {
  28. return false;
  29. }
  30. }
  31. }
  32. document.onmousedown=IE;document.onmouseup=NS;document.oncontextmenu=new Function("return false");
  33.  
  34. //-->
  35. </script>
  36.  
  37.  
  38. <script type="text/javascript"
  39. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  40.  
  41. <!--DEFAULT VARIABLES-->
  42. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  43.  
  44. <meta name="color:background" content="#fff"/>
  45. <meta name="color:link" content="#777"/>
  46. <meta name="color:text" content="#777"/>
  47. <meta name="color:title" content="#333"/>
  48. <meta name="color:hover" content="#fff"/>
  49. <meta name="color:scrollbar" content="#727272"/>
  50. <meta name="color:sidebar title" content="#ddd"/>
  51. <meta name="color:sidebar title 2" content="#fcfcfc"/>
  52.  
  53. <meta name="image:sidebar" content="1"/>
  54. <meta name="image:background" content="1"/>
  55.  
  56. <meta name="text:link one" content=""/>
  57. <meta name="text:link one title" content="Refresh"/>
  58. <meta name="text:link two" content=""/>
  59. <meta name="text:link two title" content="Inbox"/>
  60. <meta name="text:link three" content=""/>
  61. <meta name="text:link three title" content="Etcetera"/>
  62. <meta name="text:link four" content=""/>
  63. <meta name="text:link four title" content="Themes"/>
  64. <meta name="text:link five" content=""/>
  65. <meta name="text:link five title" content="Life"/>
  66. <meta name="text:sidebar title" content="{Serenity}"/>
  67. <meta name="text:underbar title" content="Serenity"/>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73. iframe#tumblr_controls {right:2px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.05;-webkit-transition: all 0.8s ease-out;-moz-
  74.  
  75. transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  76.  
  77. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 0.8;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  78.  
  79. p {
  80. margin:0px;
  81. margin-top:0px;
  82. }
  83.  
  84.  
  85. body {
  86. padding: 0px;
  87. margin: 0px;
  88. color:{color:text};
  89. font-family: ronda;
  90. line-height:7x;
  91. font-size:8px;
  92. background-color: {color:Background};
  93. background-image:url({image:Background});
  94. background-attachment: fixed;
  95. background-repeat: repeat;
  96. cursor:url(http://i.imgur.com/2qleX.jpg), progress;
  97. }
  98.  
  99. body, a, a:hover {cursor: url(http://i.imgur.com/2qleX.jpg), progress;}
  100.  
  101. @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
  102. @font-face { font-family: "ronda"; src: url('http://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf'); }
  103.  
  104.  
  105. a:link, a:active, a:visited{
  106. text-decoration: none;
  107. -webkit-transition: color 0.3s ease-out;
  108. -moz-transition: color 0.3s ease-out;
  109. transition: color 0.3s ease-out;
  110. color:{color:link};
  111. }
  112.  
  113. a:hover {
  114. color:{color:Hover};
  115. text-decoration: none;
  116. -webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
  117. text-shadow:0px 0px 2px {color:text shadow};
  118. cursor: url(http://i.imgur.com/2qleX.jpg), auto;
  119. }
  120.  
  121. div#center{
  122. margin:auto;
  123. position:relative;
  124. width:1000px;
  125. background-color:;
  126. overflow:auto;
  127. overflow-y:hidden;
  128. }
  129.  
  130. .entry {
  131. float:left;
  132. display: block;
  133. margin:5px;
  134. overflow:hidden;
  135. padding:5px;
  136. width:300px;
  137. border: 1px solid #f5f5f5;
  138. {block:PermalinkPage}
  139. width:450px;
  140. text-align:left;
  141. line-height:10px;
  142. {/block:PermalinkPage}
  143. background:#f5f5f5;
  144. }
  145.  
  146. .entry .perma{
  147. width:300px;
  148. height:16px;
  149. margin-left:0px;
  150. position: absolute;
  151. line-height: 16px;
  152. border-bottom: 2px solid #f5f5f5;
  153. overflow:hidden;
  154. text-align:center;
  155. top:5px;
  156. background:white;
  157. word-spacing:2px;
  158. letter-spacing:1px;
  159. opacity: 0.0;
  160. -webkit-transition: all .7s ease;
  161. -moz-transition: all .7s ease;
  162. -o-transition: all .7s ease;
  163. transition: all .7s ease;
  164.  
  165. }
  166.  
  167. .entry:hover .perma{
  168. overflow:visible;
  169. opacity:0.9;
  170. }
  171.  
  172. #posts {
  173. width:700px;
  174. margin-top:1px;
  175. z-index:99;
  176. margin-left:490px;
  177. padding:5px;
  178. right:auto;
  179. background:transparent;
  180. margin-right:auto;
  181. position:relative;
  182. overflow-y: hidden;
  183. }
  184.  
  185. #sidebar{
  186. position:fixed !important;
  187. width:220px;
  188. background:#f5f5f5;
  189. height:auto;
  190. margin-top:150px;
  191. margin-left:-50px;
  192. text-align:center;
  193. padding:6px;
  194. }
  195.  
  196. #sidebarimg {
  197. padding:4px;
  198. background:#fff;
  199. }
  200.  
  201. #sidebarimg img {
  202. width:210px;
  203. height:210px;
  204. }
  205.  
  206. div#links{
  207. position: fixed !important;
  208. opacity: 1.0;
  209. width: 214px;
  210. height: 10px;
  211. margin-top: 6px;
  212. padding: 7px;
  213. padding-left: 10px;
  214. padding-right: 0px;
  215. margin-left: -6px;
  216. font-size: 8px;
  217. border: 4px solid #f5f5f5;
  218. background-color:#fff;
  219. font-family: ronda;
  220. text-align:center;
  221. font-weight: normal;
  222. }
  223.  
  224. div#desc{
  225. position:fixed !important;
  226. opacity: 0.0;
  227. width: 209px;
  228. height: 149px;
  229. margin-top: -212px;
  230. padding-top:60px;
  231. margin-left:1px;
  232. font-size: 8px;
  233. background-color:white;
  234. font-family: ronda;
  235. border: 1px dotted #ddd;
  236. overflow: auto;
  237. text-align: left;
  238. z-index: 99999;
  239. transition: all 0.9s ease-out;
  240. -o-transition-transition: all 0.9s ease-out;
  241. -webkit-transition: all 0.9s ease-out;
  242. -moz-transition: all 0.9s ease-out;
  243. }
  244.  
  245. #sidebarimg:hover #desc{
  246. opacity: 0.9;
  247. transition: all 0.9s ease-out;
  248. -o-transition-transition: all 0.9s ease-out;
  249. -webkit-transition: all 0.9s ease-out;
  250. -moz-transition: all 0.9s ease-out;
  251. }
  252.  
  253. @font-face {font-family: "Tall Films"; src: url('http://static.tumblr.com/w1f0ilq/4m9lyy51c/tall_film.ttf');}
  254. @font-face { font-family: "lovenote"; src: url('http://static.tumblr.com/4yxykdm/k6plrfhwf/ck_love_note.ttf'); }
  255.  
  256.  
  257. div#titlebar{
  258. position: fixed !important;
  259. margin-left:-160px;
  260. margin-top:110px;
  261. color:{color:Sidebar Title};
  262. text-shadow: 1px 0px 10px #000;
  263. width: 388px;
  264. font-family:tall films;
  265. font-size: 95px;
  266. line-height:10px;
  267. letter-spacing:0px;
  268. font-weight: normal;
  269. text-transform: uppercase;
  270. text-align: bold;
  271. }
  272.  
  273.  
  274. div#underbar{
  275. position: fixed !important;
  276. margin-left:-50px;
  277. margin-top:104px;
  278. color:{color:Sidebar Title 2};
  279. text-shadow: 0px 0px 10px #fff;
  280. border-bottom: 0px double #ddd;
  281. padding-bottom: 5px;
  282. width: 305px;
  283. font-family: lovenote;
  284. font-size: 35px;
  285. line-height:10px;
  286. letter-spacing:0px;
  287. font-weight: bold;
  288. text-align: left;
  289. }
  290.  
  291. .title{
  292. line-height: 21px;
  293. font-family:tall films;
  294. font-size:22px;
  295. letter-spacing:1px;
  296. padding:2px;
  297. color:{color:Title};
  298. font-weight: normal;
  299. }
  300.  
  301. .permalink{
  302. text-transform: normal;
  303. display: block;
  304. text-align: right;
  305. text-decoration: none;
  306. border-top: 1px dashed #ddd;
  307. }
  308.  
  309. #infscr-loading{
  310. bottom: -70px;
  311. position: absolute;
  312. left: 50%;
  313. margin-left:-8px;
  314. width:16px;
  315. height:11px;
  316. overflow:hidden;
  317. margin-bottom: 50px;
  318. }
  319.  
  320. @font-face { font-family: "yolo"; src: url('http://static.tumblr.com/5fd89aw/H0ilkmgoh/arsenale_white.ttf'); }
  321.  
  322. askk {
  323. font-family: yolo;
  324. color: {color:Title};
  325. font-size:25px;
  326. z-index:1;}
  327.  
  328. ::-webkit-scrollbar {
  329. width: 4px;
  330. height: 4px;
  331. border-left:0px solid #ccc;
  332. background-color:{color:background};
  333. }
  334. ::-webkit-scrollbar-thumb {
  335. background: {color:scrollbar};
  336. }
  337. ::-webkit-scrollbar {
  338. width: 5px;
  339. height: 5px;
  340. background: #dddddd;
  341. }
  342. ::-webkit-scrollbar-thumb {
  343. background-color:{color:scrollbar};
  344. }
  345.  
  346. #postnotes{
  347. text-align: justify;}
  348.  
  349. #postnotes blockquote{
  350. border: 0px;}
  351.  
  352. blockquote{
  353. padding:0px 0px 2px 5px;
  354. margin:0px 0px 2px 10px;
  355. border-left: 1px dotted #555555;
  356. }
  357.  
  358. blockquote p, ul{
  359. margin:0px;
  360. padding:0px;
  361. }
  362.  
  363. a img{border: 0px;}
  364.  
  365.  
  366. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  367.  
  368. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  369. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:text};}
  370.  
  371. .notes img{width:10px; position:relative; top:3px;}
  372. <--ses-->
  373. small{font-size: 90%;}
  374.  
  375. {CustomCSS}
  376.  
  377. </style>
  378.  
  379. {block:IndexPage}
  380. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  381. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  382.  
  383. <script type="text/javascript">
  384. $(window).load(function(){
  385. var $wall = $('#posts');
  386. $wall.imagesLoaded(function(){
  387. $wall.masonry({
  388. itemSelector: '.entry, .entry_photo',
  389. isAnimated : false
  390. });
  391. });
  392.  
  393. $wall.infinitescroll({
  394. navSelector : '#pagination',
  395. nextSelector : '#pagination a',
  396. itemSelector : '.entry, .entry_photo',
  397. bufferPx : 2000,
  398. debug : false,
  399. errorCallback: function() {
  400. $('#infscr-loading').fadeOut('normal');
  401. }},
  402. function( newElements ) {
  403. var $newElems = $( newElements );
  404. $newElems.hide();
  405. $newElems.imagesLoaded(function(){
  406. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  407. });
  408. }); $('#posts').show(500);
  409. });
  410. </script>
  411.  
  412.  
  413. {/block:IndexPage}
  414.  
  415.  
  416. <title>{title}</title>
  417.  
  418. <link rel="shortcut icon" href="http://media.tumblr.com/tumblr_llidlpN38o1qzbrv5.png" />
  419. <meta name="viewport" content="width=820" />
  420. </head>
  421.  
  422. <body>
  423. <BODY onselectstart="return false;" ondragstart="return false;">
  424. <div class="wrapper">
  425. <div class="header">
  426. </div>
  427.  
  428. <div id="cage">
  429. <div id="center">
  430.  
  431. <!---->
  432. <div id="titlebar">
  433. <center>
  434. {text:Sidebar Title}
  435. </center>
  436. </div>
  437. <div id="underbar">
  438. {text:Underbar Title}
  439. </div>
  440.  
  441. <div id="sidebar">
  442. <div id="sidebarimg">
  443. <img src="{image:sidebar}" width=100%>
  444. <div id="desc"><center>{Description}</center></div></div>
  445. <div id="links">
  446. <a href="{text:link one}">{text:link one title}</a> &middot
  447. <a href="{text:link two}">{text:link two title}</a> &middot
  448. <a href="{text:link three}">{text:link three title}</a> &middot
  449. <a href="{text:link four}">{text:link four title}</a> &middot
  450. <a href="{text:link five}">{text:link five title}</a></div>
  451. </div>
  452. </div>
  453. <!------------------------------------->
  454.  
  455.  
  456. <div class="left">
  457. <div id="posts">
  458. {block:Posts}
  459. <div class="entry">
  460.  
  461. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="body">{Body}</span><p align=right><span class="permalink"><a
  462.  
  463. href="{Permalink}"><a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</a></a> &middot <a href="{Permalink}">{TimeAgo}</a><br>{/block:HasTags}</span></align>
  464. {/block:Text}
  465.  
  466. {block:Link}<a href="{URL}" class="title">{Name}</a>{block:Description}<div class="body">{Description}</div>{/block:Description} <p align=right><span
  467.  
  468. class="permalink"><a href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}"></span></align>{block:Link}
  469.  
  470. {block:Photo}
  471. {block:IndexPage}
  472. <center>
  473. <div class="perma">
  474. {timeago} &middot <a> <a href="{ReblogURL}" target="_blank"> Reblog </a></span></div>
  475.  
  476. <div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  477. {/block:IndexPage}
  478. {block:PermalinkPage}
  479. {LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  480.  
  481. {LinkCloseTag}
  482. {/block:PermalinkPage}
  483. {/block:Photo}
  484.  
  485. {block:Photoset}
  486. {block:IndexPage}
  487. <center>
  488.  
  489. <div class="perma">
  490. {timeago} &middot <a> <a href="{ReblogURL}" target="_blank"> Reblog </a></span></div>
  491.  
  492. {Photoset-250}</center>
  493. {/block:IndexPage}
  494. {block:PermalinkPage}
  495. <center>
  496. {Photoset-500}</center>
  497. {/block:PermalinkPage}
  498. {/block:Photoset}
  499.  
  500. {block:Quote}<span class="title">"{Quote}"</span> — {block:Source}<b>{Source}</b>{/block:Source}<br><p align=right><span class="permalink"><a
  501.  
  502. href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}"> </span>{/block:Quote}
  503.  
  504. {block:Answer}
  505. <br>
  506. <div style="border-radius:5px; border: 1px solid #ddd; margin: 3px; margin-top: -2px; min-height:30px; padding: 3px; background: white; box-shadow: 0px 0px 5px 3px #eee;">
  507. <img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px; box-shadow: 0px 0px 0px 2px #E6DFDF; border-radius: 3px;"/>
  508. <askk>{Asker}</askk>: {Question}<br></div>
  509. <div style="font-family: ronda; font-size: 8px;">
  510. {Answer}
  511. </div>
  512. {/block:Answer}
  513.  
  514. {block:Chat}{block:Title}<span class="title">{Title}</span>{/block:Title}
  515. <ul class="chat">
  516. {block:Lines}
  517. <li class="user_{UserNumber}">
  518. {block:Label}
  519. <span class="label">{Label}</span>
  520. {/block:Label}
  521.  
  522. {Line}
  523. </li>
  524. {/block:Lines}
  525. <p align=right><span class="permalink"><a href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}">
  526. {/block:Chat}
  527.  
  528. {block:Audio}
  529. <div style="width:200px; height:30px;">
  530. {AudioPlayerBlack}
  531. </div>
  532. {block:IndexPage}<span class="permalink">
  533. <p align=right><span class="permalink"><a href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}"> </a>
  534. </span>{/block:IndexPage}
  535. {/block:Audio}
  536.  
  537. {block:Video}
  538. {block:IndexPage}
  539. <center>
  540. <div class="perma">
  541. {timeago} &middot <a> <a href="{ReblogURL}" target="_blank"> Reblog </a></span></div>
  542. {Video-250}</center>
  543. {/block:IndexPage}
  544. {block:PermalinkPage}
  545. <center>
  546. {Video-400}</center>
  547. {/block:PermalinkPage}
  548. {block:Video}
  549.  
  550.  
  551. {block:PostNotes}<div align="middle">{caption}</div>
  552. <center>
  553.  
  554. {block:NoteCount}{NoteCountWithLabel}<br>{/block:NoteCount}
  555.  
  556. {block:HasTags}
  557. tags: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
  558. {block:RebloggedFrom}
  559. reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  560. posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
  561.  
  562. {/block:RebloggedFrom}
  563. </center></span>
  564. <br>
  565. <div id="postnotes">{PostNotes}</div><br>
  566.  
  567. <center>{block:ContentSource}
  568. <br><a href="{SourceURL}">
  569. {lang:Source}:
  570. {block:SourceLogo}
  571. <img src="{BlackLogoURL}" width="{LogoWidth}"
  572. height="{LogoHeight}" alt="{SourceTitle}" />
  573. {/block:SourceLogo}
  574. {block:NoSourceLogo}
  575. {SourceLink}
  576. {/block:NoSourceLogo}
  577. </a>
  578. {/block:ContentSource}</center>
  579.  
  580. {/block:PostNotes}
  581. </div>
  582. {/block:Posts}
  583. </div></div>
  584.  
  585. {block:IndexPage}
  586. {block:Pagination}
  587. <div id="pagination">
  588. {block:NextPage}
  589. <a id="nextPage" href="{NextPage}"></a>
  590. {/block:NextPage}
  591. {block:PreviousPage}
  592. <a href="{PreviousPage}"></a>
  593. {/block:PreviousPage}
  594. </div>
  595. {/block:Pagination}
  596. {/block:IndexPage}
  597. </body>
  598. <div style="position:fixed; font-family:calibri; font-size: 8px; text-transform:uppercase; bottom:0px; right:0px; padding: 6px; background: white; border-top-left-radius: 20px; border: 4px double #eee;">
  599. <a href="http://heavenlyhugs.tumblr.com/">heavenlyhugs</a>
  600. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement