API tools faq
paste
Advertisement
Guest User

theme eight

a guest
Dec 19th, 2014
3,066
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.53 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. (／・Д・)／
  4. ◟(◕◡◕)◞
  5.  
  6. Theme Code by extrovhert.tumblr.com
  7. Any questions? http://extrovhert.tumblr.com/fask
  8.  
  9. Rules:
  10. 1. DO NOT REMOVE CREDIT
  11. 2. DO NOT STEAL ANY THEME / PART OF THEME
  12. 3. I REPEAT DO NOT REMOVE CREDIT OR YOU WILL BE REPORTED
  13.  
  14. yea thats it, you can edit them but KEEP CREDITS.
  15. -->
  16.  
  17. <!--Go to www.tumblr.com/docs/en/custom_themes for more assistance-->
  18.  
  19. <head>
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24. $(".menu").click(function(){
  25. $(".before").toggleClass("after");
  26. });
  27. });
  28. </script>
  29.  
  30. <!-- start of script tooltip -->
  31. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35. (function($){
  36. $(document).ready(function(){
  37. $("a[title]").style_my_tooltips({
  38. tip_follows_cursor:true,
  39. tip_delay_time:90,
  40. tip_fade_speed:600,
  41. attribute:"title"
  42. });
  43. });
  44. })(jQuery);
  45. </script>
  46. <!-- end of script tooltip -->
  47.  
  48. <title>{title}</title>
  49. <link rel="shortcut icon" href="{Favicon}"/>
  50. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  51. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  52.  
  53. <!--Default Variables-->
  54. <meta name="image:Background" content="">
  55.  
  56. <meta name="text:bottom title" content="type what whatever you want here :)">
  57. <meta name="text:link 1" content="home">
  58. <meta name="text:link 1 url" content="/">
  59. <meta name="text:link 2" content="ask">
  60. <meta name="text:link 2 url" content="/ask">
  61. <meta name="text:link 3" content="archive">
  62. <meta name="text:link 3 url" content="/archive">
  63. <meta name="text:link 4" content="shuffle">
  64. <meta name="text:link 4 url" content="/random">
  65. <meta name="text:link 5" content="link five">
  66. <meta name="text:link 5 url" content="/">
  67.  
  68. <meta name="color:Footer" content="#ffffff"/>
  69. <meta name="color:Footer Text" content="#000000"/>
  70. <meta name="color:Background" content="#ffffff"/>
  71. <meta name="color:Text" content="#000000"/>
  72. <meta name="color:Link" content="#888888"/>
  73. <meta name="color:Border" content="#000000"/>
  74.  
  75. <meta name="if:1 Column" content="0"/>
  76. <meta name="if:2 Column" content="1"/>
  77. <meta name="if:Posts Fade" content="0"/>
  78. <meta name="if:Black White" content="0"/>
  79.  
  80.  
  81. <!--Styling,css-->
  82. <style type="text/css">
  83. @font-face{
  84. font-family:'consolas';
  85. src:url('http://static.tumblr.com/apahx90/giAmolf5m/consolas.ttf');}
  86.  
  87. @font-face{
  88. font-family:'calibri';
  89. src:url('http://static.tumblr.com/zu4ce6n/HtCmyt93u/calibri_1_.ttf');}
  90.  
  91. #s-m-t-tooltip {
  92. line-height:7px;
  93. font-family:consolas;
  94. max-width:300px; /* maximum width */
  95. background-color:{color:Background}; /* color background */
  96. border:1px solid {color:Border}; /* color, shape and thickness of the border */
  97. font-size:9px; /* font size */
  98. color:{color:text}; /* font color */
  99. text-transform:uppercase; /* uppercase, lowercase, none */
  100. padding:4px 5px; /* padding size */
  101. margin:15px 0px 0px 15px; /* margin size */
  102. -webkit-transition: all 0.4s ease-out;
  103. -moz-transition: all 0.4s ease-out;
  104. transition: all 0.4s ease-out;
  105. z-index:9999999999999999999999;
  106. border-radius:1px; /* border radius */
  107. }
  108. /**dont change this OK!!**/
  109. #TUMBLR_CONTROLS{
  110. POSITION:FIXED !IMPORTANT;
  111. -WEBKIT-FILTER: INVERT(100%)
  112. }
  113.  
  114. body {
  115. text-transform:uppercase;
  116. color:{color:Text};
  117. font-family:calibri;/* The main font, you can change this anytime*/
  118. font-size:8px;/* Font size */
  119. background-color:{color:Background};/* Background color */
  120. letter-spacing:1px;
  121. font-weight:bold;
  122. cursor: url(http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;
  123.  
  124. }
  125.  
  126. /* Links */
  127. a{
  128. color:{color:Link};
  129. font-style:none;
  130. text-decoration:none;
  131. }
  132.  
  133. a:hover{
  134. cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;
  135. text-decoration:underline;
  136. -webkit-transition: all .7s ease-in-out;
  137. -moz-transition: all .7s ease-in-out;
  138. -o-transition: all .7s ease-in-out;
  139. }
  140.  
  141. .before {
  142. bottom:0px;left:0px;
  143. position:fixed;
  144. width:100%;
  145. height:40px;
  146. background-color:{color:footer};
  147. border-top:1px solid {color:border};
  148. z-index:99999;text-align:center;
  149. -webkit-transition:all 0.6s;
  150. -moz-transition:all 0.3s;
  151. -ms-transition:all 0.6s;
  152. -o-transition:all 0.6s;
  153. transition:all 0.6s;
  154. }
  155.  
  156. .before a{text-decoration:none;color:{color:footer text};}
  157.  
  158. .bottomtitle{
  159. font-size:13px;
  160. line-height:35px;letter-spacing:2px;padding:0px 5px;
  161.  
  162.  
  163. }
  164. .bottomlink a{font-size:10px;border:1px solid transparent;color:{color:footer text};line-height:35px;letter-spacing:2px;padding:2px 5px;margin:2px;
  165. }
  166. .bottomlink a:hover{border:1px solid {color:footer text}}
  167. .after {
  168. height:80px;
  169. -webkit-transition:all 0.6s;
  170. -moz-transition:all 0.3s;
  171. -ms-transition:all 0.6s;
  172. -o-transition:all 0.6s;
  173. transition:all 0.6s;
  174. }
  175.  
  176. /* What your entries are on*/
  177. #post{
  178. {block:If1Column}width:350px;left:38%;{/block:If1Column}
  179. {block:If2Column}width:600px;left:28%;{/block:If2Column}
  180. background-color:transparent;/* Background color for posts*/
  181. position:absolute;
  182. margin:10px 0px 50px 0px;
  183. {block:permalinkpage}
  184. height:100%;
  185. width:450px;left:33%;
  186. display:block;
  187. {/block:permalinkpage}
  188. }
  189.  
  190.  
  191. /* entries */
  192. .entry{
  193. {block:If1Column}width:300px;{block:If1Column}
  194. {block:If2Column}width:250px;{block:If2Column}
  195. float:middle;
  196. border: 1px solid {color:Border};
  197. margin: 20px 10px;/* Spacing of entries*/
  198. {block:PermalinkPage}
  199. width:400px;display:block;
  200. border: 1px solid {color:Border};
  201. background-color:transparent;
  202. {/block:PermalinkPage}
  203. }
  204.  
  205. .entry img{
  206. {block:If1Column}max-width:100%;{block:If1Column}
  207. {block:If2Column}max-width:100%;{block:If2Column}
  208. float:right;
  209. {block:IfBlackWhite}
  210. -webkit-filter: grayscale(70%);
  211. {/block:IfBlackWhite}
  212. {block:IfPostsFade}
  213. opacity:0.8;
  214. {/block:IfPostsFade}
  215. -webkit-transition: all 1s ease-in-out;
  216. -moz-transition: all 1s ease-in-out;
  217. -o-transition: all 1s ease-in-out;
  218. {block:PermalinkPage}
  219. border-bottom: 1px solid {color:Border};
  220. display:block;width:400px;
  221. background-color:transparent;
  222. {/block:PermalinkPage}
  223. }
  224.  
  225. .entry img:hover{
  226. {block:IfBlackWhite}
  227. -webkit-filter: grayscale(0%);
  228. {/block:IfBlackWhite}
  229. opacity:1;
  230. -webkit-transition: all 0.5s ease-in-out;
  231. -moz-transition: all 0.5s ease-in-out;
  232. -o-transition: all 0.5s ease-in-out;
  233. }
  234.  
  235. /* Permalinks on hover*/
  236. .permabar{
  237. width:70px;height:20px;
  238. top:5px;left:-5px;
  239. position:absolute;
  240. opacity:0;z-index:9;
  241. -webkit-transition: all 0.5s ease-in-out;
  242. -moz-transition: all 0.5s ease-in-out;
  243. -o-transition: all 0.5s ease-in-out;
  244. {block:PermalinkPage}
  245. display:none;
  246. {/block:PermalinkPage}
  247. }
  248. .entry:hover .permabar{opacity:1;
  249. -webkit-transition: all 1s ease-in-out;
  250. -moz-transition: all 1s ease-in-out;
  251. -o-transition: all 1s ease-in-out;}
  252.  
  253. .rb a{
  254. left:10px;
  255. position:absolute;display:inline;
  256. border: 4px double white;background:black;
  257. width:10px;height:10px;margin:3px;
  258. opacity:1;
  259. -webkit-transition: all .5s ease-in-out;
  260. -moz-transition: all .5s ease-in-out;
  261. -o-transition: all .5s ease-in-out;
  262.  
  263. }
  264. .rb a:hover{
  265. opacity:1;background:white;
  266. border:4px double black;
  267. -webkit-transition: all .5s ease-in-out;
  268. -moz-transition: all .5s ease-in-out;
  269. -o-transition: all .5s ease-in-out;
  270.  
  271. }
  272. .notecount a{
  273. left:35px;
  274. position:absolute;display:inline;
  275. border: 4px double white;background:black;
  276. width:10px;height:10px;margin:3px;
  277. opacity:1;
  278. -webkit-transition: all .5s ease-in-out;
  279. -moz-transition: all .5s ease-in-out;
  280. -o-transition: all .5s ease-in-out;
  281.  
  282. }
  283. .notecount a:hover{
  284. opacity:1;background:white;
  285. border:4px double black;
  286. -webkit-transition: all .5s ease-in-out;
  287. -moz-transition: all .5s ease-in-out;
  288. -o-transition: all .5s ease-in-out;
  289.  
  290. }
  291. .times a{
  292. left:60px;
  293. position:absolute;display:inline;
  294. border: 4px double white;background:black;
  295. width:10px;height:10px;margin:3px;
  296. opacity:1;
  297. -webkit-transition: all .5s ease-in-out;
  298. -moz-transition: all .5s ease-in-out;
  299. -o-transition: all .5s ease-in-out;
  300.  
  301. }
  302. .times a:hover{
  303. opacity:1;background:white;
  304. border:4px double black;
  305. -webkit-transition: all .5s ease-in-out;
  306. -moz-transition: all .5s ease-in-out;
  307. -o-transition: all .5s ease-in-out;
  308.  
  309. }
  310.  
  311. .txtperm{
  312. {block:If1Column}width:270px;{block:If1Column}
  313. {block:If2Column}width:220px;{block:If2Column}
  314. border:4px double {color:border};line-height:18px;
  315. bottom:0px;margin:10px;
  316. position:absolute;
  317. opacity:1;
  318. text-align:center;color:{color:link};
  319. -webkit-transition: all 0.5s ease-in-out;
  320. -moz-transition: all 0.5s ease-in-out;
  321. -o-transition: all 0.5s ease-in-out;
  322. {block:PermalinkPage}
  323. display:none;
  324. {/block:PermalinkPage}
  325. }
  326. .txtperm a, .txtperm a:hover{color:{color:link};}
  327.  
  328. .pagination {
  329. display: none;
  330. }
  331.  
  332. ol.notes{padding:0px 0px 0px 0px;line-height:10px;list-style-type:none;} ol.notes li.note{padding:2px 0px 6px 0px;text-align:left;}
  333. .notes img {display:none;}
  334.  
  335. .entry .perma_info{display:inline-block;position:relative;padding:10px;}
  336.  
  337. .entry #stuff{max-height:200px;min-height:0px;overflow-y:auto;overflow-x:hidden;display:block;border-top: 1px solid {color:Border};padding:10px;}
  338.  
  339.  
  340. .askpost {
  341. padding:10px 10px 40px 10px;
  342. }
  343. .audiopost {
  344. padding:10px 10px 40px 10px;
  345. }
  346. .txtpost {
  347. padding:10px 10px 40px 10px;
  348. }
  349. .quotepost {
  350. padding:10px 10px 45px 10px;
  351. }
  352. .linkpost {
  353. padding:10px 10px 40px 10px;
  354. }
  355. .chatpost {
  356. padding:10px 10px 45px 10px;
  357. }
  358.  
  359.  
  360. .title{
  361. display:inline;
  362. font-size:11px;
  363. background:transparent;
  364. color:{color:background};
  365. padding:0px 4px 0px 4px;
  366. }
  367.  
  368.  
  369. ::-webkit-scrollbar {
  370. height: 5px;
  371. width: 9px;
  372. background: {color:background};
  373. }
  374.  
  375. ::-webkit-scrollbar-thumb:vertical {
  376. background: {color:border};
  377. border: 4px solid {color:background};
  378. }
  379.  
  380. ::selection {
  381. background: {color:Border};
  382. color:{color:background} ;
  383. }
  384.  
  385. ::-moz-selection {
  386. background: {color:Border};
  387. color:{color:background} ;
  388. }
  389.  
  390. p::selection {
  391. background: {color:Border};
  392. color:{color:background} ;
  393. }
  394.  
  395. p::-moz-selection {
  396. background: {color:Border};
  397. color:{color:background} ;
  398. }
  399.  
  400. #creds {
  401. z-index:9999ppppp99;
  402. -moz-border-radius:3px;
  403. border-radius:2px;
  404. position:fixed;
  405. left:10px; bottom:50px;
  406. color:white;
  407. background:{color:Background};
  408. opacity:1;
  409. border:1px solid {color:Border};
  410. width:10px;
  411. height:10px;
  412. -webkit-transition: all 0.5s ease;
  413. -moz-transition: all 0.5s ease;
  414. transition: all 0.5s ease;
  415. }
  416.  
  417. #creds:hover {
  418. background:{color:Border};
  419. -webkit-transition: all 0.5s ease;
  420. -moz-transition: all 0.5s ease;
  421. transition: all 0.5s ease;
  422. }
  423.  
  424. {CustomCSS}</style>
  425.  
  426.  
  427. <!--I reccommend not touching any ofthis unless you don't want infinite scroll!-->
  428.  
  429. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  430.  
  431. <script>
  432. $(function(){
  433. var $container = $('#post');
  434. $container.imagesLoaded(function(){
  435. $container.masonry({
  436. itemSelector: '.entry',
  437. });
  438. });
  439. $container.infinitescroll({
  440. itemSelector : ".entry",
  441. navSelector : "div.pagination",
  442. nextSelector : ".pagination a#next",
  443. loadingImg : "",
  444. loadingText : "<em></em>",
  445. bufferPx : 10000,
  446. extraScrollPx: 12000,
  447. },
  448. // trigger Masonry as a callback
  449. function( newElements ) {
  450. var $newElems = $( newElements ).css({ opacity: 0 });
  451. // ensure that images load be4 adding to masonry layout
  452. $newElems.imagesLoaded(function(){
  453. $newElems.animate({ opacity: 1 });
  454. $container.masonry( 'appended', $newElems, true );
  455. });
  456. }
  457. );
  458. });
  459. </script>
  460.  
  461. </head>
  462. <body>
  463.  
  464. <div class="before">
  465. <a style="cursor:help" class="menu">
  466. <div class="bottomtitle">{text:bottom title}</a></div>
  467. <div class="bottomlink">
  468. {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}
  469. {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}
  470. {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}
  471. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}
  472. {block:iflink5}<a href="{text:link 5 url}">{text:link 5}</a>{/block:iflink5}
  473. <a href="http://extrovhert.tumblr.com">theme</a>
  474. </div></div>
  475.  
  476.  
  477. <!--Posts and entries-->
  478. <div id="post">
  479. {block:Posts}
  480. <div class="entry">
  481. {block:Text}
  482. {block:indexpage}
  483. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  484. {/block:indexpage}
  485. <div class="txtpost">
  486. {block:Title}<h1>{Title}</h1>{/block:Title}{Body}</div>
  487. {/block:Text}
  488.  
  489. {block:Photo}
  490. {block:indexpage}
  491. <div class="permabar">
  492. <div class="rb"><a title="reblog" href="{ReblogURL}"></a></div>
  493. <div class="notecount"><a title="{NoteCountwithLabel}" href="{Permalink}"></a></div>
  494. <div class="times"><a title="posted {block:Date}{TimeAgo}{/block:Date}" href="{Permalink}"></a></div></div>
  495. {/block:indexpage}
  496. {block:If2Column}
  497. <a href="{permalink}"><img src="{PhotoURL-500}" width="250"/></a>{/block:If2Column}
  498. {block:If1Column}
  499. <a href="{permalink}"><img src="{PhotoURL-500}" width="500"/></a>{/block:If1Column}
  500. {block:PermalinkPage}
  501. <center>{Photoset-500}</center>
  502. {/block:PermalinkPage}
  503. {/block:Photo}
  504.  
  505. {block:Photoset}
  506. {block:indexpage}
  507. <div class="permabar">
  508. <div class="rb"><a title="reblog" href="{ReblogURL}"></a></div>
  509. <div class="notecount"><a title="{NoteCountwithLabel}" href="{Permalink}"></a></div>
  510. <div class="times"><a title="{block:Date}{TimeAgo} on {block:Date}{ShortMonth} {DayofMonth}{DayofMonthSuffix}{/block:Date}" href="{Permalink}"></a></div>
  511. </div>
  512. {/block:indexpage}
  513. {block:If2Column}
  514. {Photoset-250}
  515. {/block:If2Column}
  516. {block:If1Column}
  517. {Photoset-500}
  518. {/block:If1Column}
  519. {block:PermalinkPage}
  520. <center>{Photoset-500}</center>
  521. {/block:PermalinkPage}
  522. {/block:Photoset}
  523.  
  524.  
  525. {block:Quote}
  526. {block:indexpage}
  527. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  528. {/block:indexpage}
  529. <div class="quotepost">
  530. {Quote}
  531. <div align="right">
  532. {block:Source}-{Source}{/block:Source}
  533. </div></div>
  534. {/block:Quote}
  535.  
  536.  
  537. {block:Video}
  538. {block:indexpage}
  539. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  540. {/block:indexpage}{block:If2Column}
  541. {Video-250}
  542. {/block:If2Column}
  543. {block:If1Column}
  544. {Video-500}
  545. {/block:If1Column}<br>
  546. {PlayCountWithLabel}
  547. {/block:Video}
  548.  
  549.  
  550. {block:Link}
  551. {block:indexpage}
  552. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  553. {/block:indexpage}
  554. <div class="linkpost">
  555. <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
  556. {block:Description}{Description}{/block:Description}</div>
  557. {/block:Link}
  558.  
  559. {block:Chat}
  560. {block:indexpage}
  561. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  562. {/block:indexpage}
  563. <div class="chatpost">
  564. {block:Lines}
  565. {block:Label}
  566. <br>{Label}
  567. {/block:Label}
  568. &nbsp;{Line}
  569. {/block:Lines}</div>
  570. {/block:Chat}
  571.  
  572. {block:Audio}
  573. {block:indexpage}
  574. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  575. {/block:indexpage}
  576. <div class="audiopost">{AudioPlayerWhite}
  577. <br>{block:Artist}
  578. Artist: {Artist}
  579. {/block:Artist}<br>
  580. {block:Caption}{Caption}{/block:Caption}</div>
  581. {/block:Audio}
  582.  
  583.  
  584. {block:Answer}
  585. {block:indexpage}
  586. <div class="txtperm">posted {timeago} with <a title="notes" href="{Permalink}">{NoteCount}</a> / <a title="reblog" href="{ReblogURL}">reblog</a></div>
  587. {/block:indexpage}
  588. <div class="askpost">
  589. {Asker} asked: <b>{Question}</b><br>
  590. {Answer}</div>
  591. {/block:Answer}
  592.  
  593. <a href="http://extrovhert.tumblr.com" title="theme by extrovhert"><div id="creds"></div></a>
  594.  
  595. {block:PermalinkPage}
  596. <div class="perma_info">{block:Caption}{Caption}{/block:Caption}{/block:Date}{block:Date}posted: {TimeAgo} on {ShortMonth} {DayofMonth}{DayofMonthSuffix}{/block:Date}<br>Notes: {block:NoteCount}{NoteCount}{/block:NoteCount}<br>{block:RebloggedFrom} Reblogged from <a title="VIA" href="{ReblogParentURL}">{ReblogParentName}</a><br>Posted by <a title="SOURCE" href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}<br>{block:HasTags}tags: {block:Tags}<a href="http://tumblr.com/{Tag}" target="blank">#{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  597. {/block:PermalinkPage}
  598. {block:PostNotes}
  599. <div id="stuff">{PostNotes}</div>
  600. {/block:PostNotes}
  601.  
  602. </div>
  603.  
  604. {/block:Posts}
  605.  
  606. </div>
  607. <!--Pagination-->
  608. <div class="pagination">
  609. {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}
  610. </div>
  611. </body>
  612. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!