Advertisement
candycaiine

Vanity Theme

Sep 25th, 2013
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.25 KB | None | 0 0
  1. <!---
  2.  
  3. Vanity theme.
  4. © theme by lloydey // themesbylloyd.tumblr.com
  5.  
  6. How to install:
  7. 1. Customize -> Edit HTML
  8. 2. Delete all of the coding in your HTML
  9. 3. Copy this theme code
  10. 4. Paste it
  11. 5. Update Preview & Save & Refresh
  12. 6. Edit your theme appearance in the Appearance section after you refresh.
  13.  
  14. --->
  15.  
  16. <head>
  17. <link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
  18. <link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
  19. <link href="http://static.tumblr.com/z0cd8ty/aJjm6uyej/meffects.css" rel="stylesheet">
  20. <link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
  21. <meta name="color:Background" content="#ffffff"/>
  22. <meta name="color:Text" content="#000000"/>
  23. <meta name="color:Title" content="#000000"/>
  24. <meta name="color:Hover" content="#000000"/>
  25. <meta name="color:Link" content="#000000"/>
  26. <meta name="image:Background" content=""/>
  27. <meta name="if:show photo" content="0"/>
  28. <meta name="image:sidebar" content=""/>
  29. <meta name="text:Blog Title Size" content="20" />
  30. <meta name="color:Borders" content="#CECECE"/>
  31. <meta name="if:3 Column" content="0"/>
  32. <meta name="text:Custom Link One Title" content= >
  33. <meta name="text:Custom Link One" content="http://" />
  34. <meta name="text:Custom Link Two Title" content= >
  35. <meta name="text:Custom Link Two" content="http://" />
  36. <meta name="text:Custom Link Three Title" content= >
  37. <meta name="text:Custom Link Three" content="http://" />
  38. <meta name="text:Custom Link Four Title" content= >
  39. <meta name="text:Custom Link Four" content="http://" />
  40. <meta name="text:Custom Link Five Title" content= >
  41. <meta name="text:Custom Link Five" content="http://" />
  42.  
  43.  
  44. <!-- Fav Icon -->
  45.  
  46. <link rel="shortcut icon" href="{favicon}">
  47.  
  48.  
  49. <title>{Title} {block:PostTitle} : {PostTitle}{/block:PostTitle}</title>
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54.  
  55.  
  56.  
  57. @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
  58.  
  59.  
  60.  
  61.  
  62. #tumblr_controls{
  63. position:fixed !important;
  64. -webkit-filter: invert(100%) ;
  65. }
  66.  
  67. ::-webkit-scrollbar-thumb {-webkit-border-radius: 2px;border-radius: 2px;background:#fff;box-shadow: 0 0 3px 0 rgba(0,0,0,0.1) inset;}
  68. ::-webkit-scrollbar-track-piece {background:none;box-shadow: 0 0 6px 0 rgba(0,0,0,0.4) inset;}
  69. ::-webkit-scrollbar {background:#ffffff;width:5px;height:5px;}
  70.  
  71. body {
  72. padding: 0px;
  73. margin: 0px;
  74. color:{color:text};
  75. background-color: {color:Background};
  76. background-image:url({image:Background});
  77. background-attachment: fixed;
  78. -webkit-background-size: cover;
  79. -moz-background-size: cover;
  80. -o-background-size: cover;
  81. background-size: cover;
  82. background-size: ;
  83. font-family:;
  84. letter-spacing: 1px;
  85. font-size: 12px;
  86. line-height:10px;
  87. color:{color:text};
  88. }
  89.  
  90.  
  91. p {
  92. margin:0px;
  93. margin-top:0px;
  94. }
  95.  
  96. a:link, a:active, a:visited{
  97. color: {color:Link};
  98. text-decoration: none;
  99. -webkit-transition: color 0.5s ease-out;
  100. -moz-transition: color 0.5s ease-out;
  101. }
  102.  
  103. a:hover{
  104. color:{color:Hover};
  105. -webkit-transition-duration: .9s;
  106. -webkit-transition: color 0.3s ease-out;
  107. -moz-transition: color 0.3s ease-out;
  108. }
  109.  
  110. .entry {
  111. margin:6px;
  112. padding: 8px;
  113. float:left;
  114. background-color:#fff;
  115. border: 1px solid #eee;
  116. font-family: ubuntu;
  117. font-size: 10px;
  118. line-height:14px;
  119. -webkit-transition: all 0.5s ease;
  120. -moz-transition: all 0.5s ease;
  121. -o-transition: all 0.5s ease;
  122. -webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;transition: all 0.6s ease-out;
  123.  
  124. {block:if3Column} margin:5px;{/block:if3Column}
  125.  
  126. {block:IndexPage}
  127. width:200px;
  128. {/block:IndexPage}
  129. {block:PermalinkPage}
  130. width:500px;
  131. {/block:PermalinkPage}
  132.  
  133. }
  134.  
  135. .entry:hover{
  136. opacity: 1;}
  137.  
  138.  
  139. .entry .cocaine{
  140. position:absolute;
  141. width:200px;
  142. height: 15px;
  143. padding-top:2px;
  144. padding-bottom: 2px;
  145. background-color: #fff;
  146. margin-left: 0px;
  147. overflow:hidden;
  148. letter-spacing: 0;
  149. top: 15px;
  150. font-family: Droid sans Mono;
  151. text-transform: uppercase;
  152. font-size: 8px;
  153. line-height:16px;
  154. text-align:center;
  155. opacity:0.0;
  156. border-bottom-right-radius:0px;
  157. border-top-right-radius:0px;
  158. border-top-left-radius:0px;
  159. border-bottom-left-radius:0px;
  160. -webkit-transition: all 0.6s linear;
  161. -moz-transition: all 0.6s linear;
  162. transition: all 0.6s linear;
  163. }
  164.  
  165. .entry:hover .cocaine{
  166. overflow:visible;
  167. -webkit-transition: opacity 0.5s linear; opacity: 0.6;
  168. transition: all 0.4s linear;
  169. margin-left: 0px;
  170. width: 200px;
  171. height: 15px;
  172. top: 15px;
  173. padding-top: 2px;
  174. padding-bottom: 2px;
  175. opacity: 0.7;
  176. border-bottom-right-radius:0px;
  177. border-top-right-radius:0px;
  178. border-top-left-radius:0px;
  179. border-bottom-left-radius:0px;
  180. -webkit-transition: all 0.6s linear;
  181. -moz-transition: all 0.6s linear;
  182. transition: all 0.6s linear;
  183. }
  184.  
  185. .entry:hover .cocaine:hover {
  186. opacity: 1;
  187. height: 15px;
  188. top: 15px;
  189. padding-top: 2px;
  190. padding-bottom: 2px;
  191. border-bottom-right-radius:0px;
  192. border-top-right-radius:0px;
  193. border-top-left-radius:0px;
  194. border-bottom-left-radius:0px;
  195. -webkit-transition: all 0.2s linear;
  196. -moz-transition: all 0.6s linear;
  197. transition: all 0.2s linear;
  198. }
  199.  
  200. .links a{
  201. text-transform: uppercase;
  202. background:;
  203. text-decoration: none;
  204. text-align: center;
  205. padding:1px;
  206. font-family:consolas;
  207. font-size:9px;
  208. line-height: 13px;
  209. z-index: 99999999999;
  210. margin-top: 5px;
  211. letter-spacing: 2px;
  212. display:inline-block;
  213. text-align:right;
  214. -webkit-transition: all 0.5s ease;
  215. -moz-transition: all 0.5s ease;
  216. -o-transition: all 0.5s ease;
  217. }
  218.  
  219. .btn a:hover {text-shadow:0px;}
  220.  
  221. a.btn{ position:absolute;z-index:99;-webkit-filter: invert(100%);top:26px;right:3px;white-space:nowrap;outline:0;text-decoration:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;font:600 12px/18px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;height:20px;padding:0 5px;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:padding;-moz-transition-property:padding;-ms-transition-property:padding;-o-transition-property:padding;transition-property:padding;-webkit-transition-duration:.1s;-moz-transition-duration:.1s;-ms-transition-duration:.1s;-o-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-ms-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.btn{color:#000;border:1px solid rgba(0,0,0,0.18);background:rgba(0,0,0,0.38);text-shadow:1px 1px 0 rgba(0,0,0,0.08)}a.btn,a.btn:hover{color:white!important}.btn{margin-bottom:5px;color:#fff;border:1px solid rgba(0,0,0,0.18);background:rgba(0,0,0,0.38);text-shadow:1px 1px 0 rgba(0,0,0,0.08);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.btn:hover::after,.btn:focus::after{background:rgba(255,255,255,0.09);color:white}.btn:active::after{background:rgba(255,255,255,0.18) color:black}.btn_label.show{display:block}.btn::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';-webkit-border-radius:inherit;-moz-border-radius:inherit;border-radius:inherit}.btn.icon::before{display:block;content:'';position:absolute;top:0;left:0;bottom:0;width:20px;border-radius:inherit;background:url('http://static.tumblr.com/tpqedpr/cQ1mbwb60/de.png') 0 0 no-repeat}.btn.theme::before{background-position:0 -0px}.btn img{width:15px}.btn.icon{padding-left:20px}.btn:active::after {background:rgba(255,255,255,0.18)}.clear {clear: both;} #pagination {display: none;} .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}
  222.  
  223.  
  224. .blogtitle{
  225. font-family: xx ;
  226. font-size: {text:blog title size}px;
  227. line-height: 28px;
  228. color: {color:Title};
  229. border-bottom: 1px solid {color:borders};
  230. letter-spacing: 0px;
  231. font-weight: normal;
  232. padding:0px 0px 0px 0px;
  233. text-transform:uppercase;
  234. }
  235.  
  236. @font-face {font-family: xx; src: url('http://static.tumblr.com/fxpo5zq/ad0m5vybr/quicksand_light.otf');
  237. }
  238.  
  239. #sidey{
  240. z-index:999;
  241. position:fixed!important;
  242. width:220px;
  243. height:auto;
  244. opacity: 1;
  245. padding:6px;
  246. margin-left:200px;
  247. border: 1px solid #eee;
  248. -webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;transition: all 0.6s ease-out;
  249. margin-top:155px;
  250. font-size: 9px;
  251. line-height:11px;
  252. letter-spacing:1px;
  253. background-color:#fff;
  254. font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  255. overflow:hidden;
  256. text-align:center;
  257. {block:if3Column}
  258. margin-left: 30px;
  259. {/block:if3Column}
  260. }
  261.  
  262. .title {
  263. font-family: 'death';
  264. font-size: 13px;
  265. letter-spacing:5px
  266. text-transform: uppercase;
  267. font-weight: bold;
  268. padding: 2px;
  269. }
  270.  
  271. #posts {
  272. width: 600px;
  273. background-attachment: fixed;
  274. background-color:auto;
  275. background-repeat:repeat;
  276. opacity: .5px;
  277. margin-left:440px;
  278. {block:if3Column}
  279. width: 820px;
  280. margin-left: 275px;
  281. {/block:if3Column}
  282. {block:permalinkpage}
  283. width: 500px;
  284. {/block:permalinkpage}
  285. float:left;
  286. -webkit-animation:fadeIn 3s;
  287. -moz-animation:fadeIn 3s;
  288. -ms-animation:fadeIn 3s;
  289. margin-top:0px;
  290. }
  291.  
  292. {CustomCSS}
  293.  
  294. </style>
  295. <script>
  296. window.onload = function () {
  297. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  298. document.addEventListener( 'click', function ( event ) {
  299. var myLike = event.target;
  300. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  301. var frame = document.getElementById( 'my-like-frame' ),
  302. liked = ( myLike.className == 'my-liked' ),
  303. command = liked ? 'unlike' : 'like',
  304. reblog = myLike.getAttribute( 'data-reblog' ),
  305. id = myLike.getAttribute( 'data-id' ),
  306. oauth = reblog.slice( -8 );
  307. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  308. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  309. };
  310. }, false );
  311. };
  312. </script>
  313. <script type="text/javascript">
  314. $(window).load(function(){
  315. $("p").remove(":contains('Source:')");
  316. $("p").remove(":contains('via ')");
  317. });
  318. </script>
  319. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  320. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  321. <script>
  322. (function($){
  323. $(document).ready(function(){
  324. $("[title],a[title],img[title]").style_my_tooltips({
  325. tip_follows_cursor:true,
  326. tip_delay_time:100,
  327. tip_fade_speed:300,
  328. attribute:"title"
  329. });
  330. });
  331. })(jQuery);
  332. </script>
  333.  
  334.  
  335. <script type="text/javascript"
  336. src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  337. <script type="text/javascript"
  338. src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  339.  
  340.  
  341. <script type="text/javascript">
  342. $(window).load(function () {
  343. var $content = $('#posts');
  344. $content.masonry({itemSelector: '.entry'}),
  345. $content.infinitescroll({
  346. navSelector : 'div#pagination',
  347. nextSelector : 'div#pagination a#nextPage',
  348. itemSelector : '.entry',
  349. loading: {
  350. finishedMsg: '',
  351. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  352. },
  353. bufferPx : 600,
  354. debug : false,
  355. },
  356. // call masonry as a callback.
  357. function( newElements ) {
  358. var $newElems = $( newElements );
  359. $newElems.hide();
  360. // ensure that images load before adding to masonry layout
  361. $newElems.imagesLoaded(function(){
  362. $content.masonry( 'appended', $newElems, true,
  363. function(){$newElems.fadeIn(300);} );
  364.  
  365.  
  366. });
  367. });
  368. });
  369. </script>
  370. </head>
  371.  
  372. <body>
  373. </script><script src="http://static.tumblr.com/jkg9xxi/gBCmsyr4m/gbreauhbfuhenwuafbi.js"></script>
  374. <div id="sidey"><div class="blogtitle"><a href="/">{Title}</div></a></br>{block:ifshowphoto}<a href="/"><img src="{image:sidebar}" style="" width=220px height=auto></a><p>{/block:ifshowphoto}<div style=";margin-top:2px; padding-bottom: 2px;">{description}</div>
  375.  
  376. <div style="border-top: 1px #ccc solid;">
  377.  
  378. <div class="links">
  379.  
  380. <a href="/">home</a>
  381.  
  382. <a href="/ask">message</a>
  383.  
  384. {block:ifcustomlinkonetitle}<a href="{text:custom link one}" class="links">{text:custom link one title}</a>{/block:ifcustomlinkonetitle}
  385.  
  386. {block:ifcustomlinktwotitle} <a href="{text:custom link two}" class="links">{text:custom link two title}</a>{/block:ifcustomlinktwotitle}
  387.  
  388. {block:ifcustomlinkthreetitle} <a href="{text:custom link three}" class="links">{text:custom link three title}</a>{/block:ifcustomlinkthreetitle}
  389.  
  390. {block:ifcustomlinkfourtitle} <a href="{text:custom link four}" class="links">{text:custom link four title}</a>{/block:ifcustomlinkfourtitle}
  391.  
  392. {block:ifcustomlinkfivetitle} <a href="{text:custom link five}" class="links">{text:custom link five title}</a>{/block:ifcustomlinkfivetitle}
  393. </div></div></div>
  394.  
  395.  
  396.  
  397.  
  398.  
  399. <div class="wrapper">
  400. <div style="position:fixed;right:0px;top:28px;">
  401. </span>
  402. </div>
  403.  
  404.  
  405.  
  406.  
  407. <div id="posts">
  408.  
  409. {block:Posts}
  410. <div class="entry">
  411.  
  412. {block:Text}
  413. {block:Title}<span class="title">{Title}</span>{/block:Title}
  414. <div class="caption"><span class="entrytext">{Body}</span></div>
  415. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount} </a></span></div></div>{/block:IndexPage}
  416. {/block:Text}
  417.  
  418. {block:Link}
  419. <a href="{URL}" class="title">{Name}</a>
  420. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  421. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount} </a></span></div></div>{/block:IndexPage}
  422. {block:Link}
  423.  
  424.  
  425. {block:Photo}
  426. {block:IndexPage}
  427. <div class="cocaine">
  428. <a href="{Permalink}">{NoteCountwithlabel}</a> &#8226; {timeago} &#8226; <a href="{ReblogURL}">reblog</a></div>
  429. {/block:IndexPage}
  430. {block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="200"/></a></div>{LinkCloseTag}
  431. {/block:IndexPage}
  432. {block:PermalinkPage}<center>{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}{/block:PermalinkPage}</center>
  433. {/block:Photo}
  434.  
  435.  
  436. {block:Photoset}
  437. {block:IndexPage}
  438. {block:IndexPage}
  439. <div class="cocaine">
  440. <a href="{Permalink}">{NoteCountwithlabel}</a> &#8226; {timeago} &#8226; <a href="{ReblogURL}">reblog</a></div>
  441. {/block:IndexPage}<center>{Photoset-250}</center>{/block:IndexPage}
  442. <center>{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center>
  443. {/block:Photoset}
  444.  
  445. {block:Quote}
  446. {Quote}</span>
  447. {block:Source}{Source}{/block:Source}
  448. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount}</a></span></div></div>{/block:IndexPage}
  449. {/block:Quote}
  450.  
  451. {block:Chat}
  452. {block:Title}<span class="title">{Title}</span>{/block:Title}
  453. <ul class="chat">
  454. {block:Lines}
  455. <li class="user_{UserNumber}">
  456. {block:Label}
  457. <span class="label">{Label}</span>
  458. {/block:Label}
  459.  
  460. {Line}
  461. </li>
  462. {/block:Lines}
  463. </ul>
  464. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount}</a></span></div></div>{/block:IndexPage}
  465. {/block:Chat}
  466.  
  467. {block:Audio}
  468. <div style="width:250px; height:28px;">{AudioPlayerWhite}</div>
  469. {block:IndexPage}
  470. <div class="caption">
  471. {caption}</div>{/block:IndexPage}
  472. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount}</a></span></div></div>{/block:IndexPage}
  473. {/block:Audio}
  474.  
  475. {block:Video}
  476. {block:IndexPage}<div class="permalink">
  477. <a href="{ReblogURL}" target="_blank"> ↺ </a> | <a href="{Permalink}"><a href="{permalink}">{NoteCount}</a></span></div>{/block:IndexPage}
  478. <center>
  479. {block:IndexPage}
  480. {Video-250}
  481. {/block:IndexPage}
  482. </center>
  483. {block:PermalinkPage}
  484. <center>{Video-500}</center>
  485. {/block:PermalinkPage}
  486. {block:Video}
  487.  
  488. {block:Answer}
  489. <img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;"/>
  490. <strong>{Asker}: {Question}</strong>
  491. <div class="caption">
  492. {Answer}</div>
  493. {block:IndexPage}<a href="{permalink}"><div align="right"><div style="font-size:9px;line-height:10px; border-top: 0px #777777 solid; padding-bottom: 2px;">{Notecount}</a></span></div></div>{/block:IndexPage}
  494. {/block:Answer}
  495.  
  496. {block:IndexPage}<div style="display:none;">{block:ContentSource}<a href="{SourceURL}">{SourceTitle}</a> {block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}{/block:ContentSource}</div>{/block:IndexPage}
  497.  
  498. {block:PermalinkPage}
  499. {block:Date}
  500. {block:Caption}{Caption}{/block:Caption}<center>
  501. {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}<br>
  502. {block:NoteCount}{NoteCount} notes{/block:NoteCount}{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
  503. {/block:Date}
  504.  
  505. {/block:PermalinkPage}
  506.  
  507. {block:PostNotes}{PostNotes}
  508. {/block:PostNotes}
  509. </div>
  510.  
  511.  
  512. {/block:Posts}
  513. </div>
  514. </div>
  515. {block:IndexPage}<br>
  516. {block:Pagination}
  517. <div id="pagination">
  518. {block:NextPage}
  519. <a id="nextPage" href="{NextPage}"></a>
  520. {/block:NextPage}
  521. {block:PreviousPage}
  522. <a href="{PreviousPage}"></a>
  523. {/block:PreviousPage}
  524. </div>
  525. {/block:Pagination}
  526. {/block:IndexPage}
  527. </div>
  528.  
  529.  
  530.  
  531.  
  532. </body>
  533. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement