API tools faq
paste
jbtthemes

Page 03: ---theme page---

jbtthemes
Aug 10th, 2016
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>ⓙⓑⓣ themes</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  11. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  12.  
  13. <script type="text/javascript">
  14. $(window).load(function(){
  15. var $wall = $('.container');
  16. $wall.imagesLoaded(function(){
  17. $wall.masonry({
  18. itemSelector: '.posts',
  19. isAnimated : true
  20. });
  21. });
  22. $wall.infinitescroll({
  23. navSelector : "div#navigation",
  24. nextSelector : "div#navigation a#nextPage",
  25. itemSelector : '.posts',
  26. loadingImg : "",
  27. loadingText : " ",
  28. donetext : " ",
  29. extraScrollPx : 0,
  30. bufferPx : 10000,
  31. debug : false,
  32. errorCallback: function() {
  33. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  34. }},
  35. function( newElements ) {
  36. var $newElems = $( newElements );
  37. $newElems.hide();
  38. $newElems.imagesLoaded(function(){
  39. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  40. });
  41. }); $('.container').show(500);
  42. });
  43. </script>
  44.  
  45.  
  46. <!-- jquery -->
  47.  
  48. <script type="text/javascript">
  49. function unhide(divID) {
  50. var item = document.getElementById(divID);
  51. if (item) {
  52. item.className=(item.className=='hidden')?'unhidden':'hidden';
  53. }
  54. }
  55. </script>
  56.  
  57. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  58.  
  59. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  60.  
  61. <script>
  62.  
  63. (function($){
  64.  
  65. $(document).ready(function(){
  66.  
  67. $("a[title]").style_my_tooltips({
  68.  
  69. tip_follows_cursor:true,
  70.  
  71. tip_delay_time:30,
  72.  
  73. tip_fade_speed:300,
  74.  
  75. attribute:"title"
  76.  
  77. });
  78.  
  79. });
  80.  
  81. })(jQuery);
  82.  
  83. </script>
  84. <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
  85.  
  86. <!--CSS customization here. -->
  87.  
  88. <style type="text/css">
  89.  
  90. #s-m-t-tooltip{
  91. font-size:9px;
  92. position:absolute;
  93. margin-top: 15px;
  94. letter-spacing:1px;
  95. z-index:9999;
  96. background:white;
  97. text-transform:uppercase;
  98. padding:2px 3px 2px 3px;
  99. }
  100.  
  101. /*scrollbar*/
  102. ::-webkit-scrollbar{height: 5px;
  103. width: 4px;
  104. -webkit-border-radius: 0px;
  105. background-color:white}
  106. ::-webkit-scrollbar-thumb{background-color:#eee;}
  107. ::-webkit-scrollbar-track{background-color:white;}
  108.  
  109. #text {margin-bottom:50px;
  110. margin-top:100px;
  111. margin-top:5px;
  112. text-transform:uppercase;
  113. font-size:7px;
  114. letter-spacing:2px;
  115. text-align:center;}
  116.  
  117. /*main structure*/
  118. blockquote {padding:5px 0 5px 30px;
  119. border-left:1px solid #eee;
  120. margin:10px 30px;
  121. }
  122.  
  123. body {
  124. color:#def4f9;
  125. font-family:helvetica;
  126. font-weight:100;
  127. font-size:11px;
  128. text-align:justify;
  129. margin:0;
  130. line-height:18px;
  131. background:url('http://static.tumblr.com/poesisw/1IKobpwrg/1-bg-texture_copy.png');}
  132.  
  133. a {color:#998200;
  134. text-decoration:none;
  135. -webkit-transition:all 0.8s;
  136. -moz-transition:all 0.8s;
  137. -ms-transition:all 0.8s;
  138. -o-transition:all 0.8s;
  139. transition:all 0.8s; }
  140.  
  141. a:hover {
  142. color:#f8f8f8;
  143. -webkit-transition:all 0.8s;
  144. -moz-transition:all 0.8s;
  145. -ms-transition:all 0.8s;
  146. -o-transition:all 0.8s;
  147. transition:all 0.8s; }
  148.  
  149. img{
  150. border:none;
  151. text-decoration:none}
  152.  
  153. p {
  154. margin-top:5px;
  155. margin-bottom:5px}
  156.  
  157. /*container*/
  158. .container {
  159. width:800px;
  160. margin-right:auto;
  161. margin-left:auto;
  162. }
  163.  
  164. /*posts*/
  165.  
  166. .posts {
  167. float:left;
  168. width:200px;
  169. margin:80px 20px;
  170. padding-bottom:10px;
  171. }
  172.  
  173. #image {position:absolute;
  174. margin-right:15px;
  175. width:190px;
  176. }
  177. #image img {
  178. width:190px;
  179. padding:4px;
  180. border:1px solid #eee;
  181. margin-bottom:10px;
  182. }
  183.  
  184. #titlebox {
  185. position:absolute;
  186. top:-40px;
  187. width:200px;
  188. height:40px;
  189. text-align:center;
  190. }
  191.  
  192. .tit {font-weight:bold;
  193. font-family:inconsolata;
  194. color:#def4f9;
  195. font-size:12px;
  196. letter-spacing:1px;
  197. text-transform:uppercase;}
  198.  
  199. .lank {
  200. margin-bottom:5px;
  201. }
  202.  
  203. .lank a:hover {
  204. letter-spacing:3px
  205. }
  206.  
  207. .info {margin-top:125px;
  208. width:185px;}
  209.  
  210. .about {text-align:left;}
  211.  
  212. .about ul {margin-left:-10px}
  213.  
  214. .hidden {display: none;}
  215. .unhidden {display: block;}
  216.  
  217. /*header*/
  218. .header {
  219. margin-top:10px;
  220. margin-right:auto;
  221. margin-left:auto;
  222. width:400px;
  223. text-align:center;
  224. font-family:inconsolata;
  225. text-transform:uppercase;
  226. }
  227.  
  228. #title {
  229. font-size:14px;
  230. margin-bottom:12px;
  231. text-align:center;
  232. letter-spacing:1px;
  233. font-family:inconsolata;
  234. text-transform:uppercase;
  235. color:#def4f9;
  236. background:rgba(0,0,0,.3);
  237. border-top:5px double rgba(58,96,121,.7);
  238. padding:15px;
  239. }
  240.  
  241. .links {
  242. padding-bottom:10px;
  243. border-bottom:1px solid #eee;
  244. }
  245. .links a {
  246. margin:0 5px;
  247. padding:2px 5px;
  248. border:none;
  249. }
  250. .links a:hover {
  251. letter-spacing:3px;
  252. }
  253. .desc {
  254. text-transform:none;
  255. margin:10px 25px;
  256. font-family:helvetica;
  257. }
  258.  
  259. </style>
  260.  
  261. </head>
  262.  
  263. <body>
  264. <div class="header">
  265. <div id="title">ⓙⓑⓣ themes</div>
  266. <div class="links">
  267. <a href="/">home</a>
  268. <a href="/tagged/custom-theme">custom</a>
  269. <a href="/tagged/page-theme">pages</a>
  270. <a href="/archive">memories</a>
  271. </div>
  272. <div class="desc">the theme dumping ground | designed by breq<p><small>*all themes are optimized for full-screen chrome</small><br><small>*note that custom themes and pages are not displayed here.
  273. </small></p></div>
  274. </div>
  275.  
  276. <div class="container">
  277. <!--entry-->
  278. <div class="posts">
  279. <div id="image"><!--the url for your image goes here--><img src="http://66.media.tumblr.com/aa22e9c79d4aa38612457881b333fdf4/tumblr_oa9z2u0cFB1vaph30o1_r1_500.png">
  280. <div id="titlebox"><!--theme title here--><div class="tit">01: wanderer</div>
  281. <!--links here--><div class="lank">
  282. <a href="/01wanderer">static preview</a> | <a href="http://pastebin.com/CtVnFevx">code</a> | <a href="javascript:unhide('01features');">features</a>
  283. </div>
  284. </div></div>
  285. <div class="info">
  286. <div class="about"><!--theme description goes here>-->
  287. <span id="01features" class="hidden">
  288. <ul>
  289. <li>off-center container theme</li></li>
  290. <li>optional container background color</li>
  291. <li>post width 500px</li>
  292. <li>customizable body font size</li>
  293. <li>hover description + sidebar</li>
  294. <li>star-shaped scattered links (up to 4 customizable)</li>
  295. <li>optional container border</li>
  296. <li>optional sidebar icon image</li>
  297. <li>background image aligned left</li>
  298. <li>customizable colors (17 options in basic editor)</li>
  299. up to 3 additional links (in hover sidebar)</li>
  300. </ul>
  301. </span>
  302. </div>
  303. </div>
  304. </div>
  305. <!--end entry-->
  306.  
  307. <!--entry-->
  308. <div class="posts">
  309. <div id="image"><!--the url for your image goes here--><img src="http://65.media.tumblr.com/b55e146008cfacf2891a419cad146198/tumblr_oah176IOxI1vaph30o1_r4_500.png">
  310. <div id="titlebox">
  311. <!--theme title here--><div class="tit">02: evergreen</div>
  312. <!--links here--><div class="lank">
  313. <a href="/02evergreen">static preview</a> | <a href="http://pastebin.com/rbNq1kp5">code</a> | <a href="javascript:unhide('02features');">features</a>
  314. </div>
  315. </div></div>
  316. <div class="info">
  317. <div class="about"><!--theme description goes here>-->
  318. <span id="02features" class="hidden">
  319. <ul>
  320. <li>left-justified full-height theme</li>
  321. <li>optional background image, aligned left</li>
  322. <li>post width 500px</li>
  323. <li>customizable body font size</li>
  324. <li>optional sidebar portrait (250x250)</li>
  325. <li>up to 5 additional links in sidebar</li>
  326. <li>customizable colors (14 options in basic editor)</li>
  327. </ul>
  328. </span>
  329. </div>
  330. </div>
  331. </div>
  332. <!--end entry-->
  333.  
  334. <!--entry-->
  335. <div class="posts">
  336. <div id="image"><!--the url for your image goes here--><img src="https://66.media.tumblr.com/47abd791e5d25f0b8241b7c0112c2597/tumblr_oakvxjFgBZ1vaph30o1_r1_1280.jpg">
  337. <div id="titlebox">
  338. <!--theme title here--><div class="tit">03: quarante-sept</div>
  339. <!--links here--><div class="lank">
  340. <a href="/03quarante-sept">static preview</a> | <a href="http://pastebin.com/bKd0Epqn">code</a> | <a href="javascript:unhide('03features');">features</a>
  341. </div>
  342. </div>
  343. </div>
  344. <div class="info">
  345. <div class="about"><!--theme description goes here>-->
  346. <span id="03features" class="hidden">
  347. <ul>
  348. <li>off-center container theme</li>
  349. <li>custom fonts: norican, crimson text, poiret one, old standard TT</li>
  350. <li>optional background image, aligned left</li>
  351. <li>optional teardrop-shaped 50x50 portrait icon </li>
  352. <li>post width 500px</li>
  353. <li>transparent scrollbar that transitions to black and white when active</li>
  354. <li>customizable body font size</li>
  355. <li>‘slide out on hover’ bars for sidebar and navigation</li>
  356. <li>up to 5 additional links in the second hover bar</li>
  357. <li>customizable opacity for portrait icon, title bar and hover bars</li>
  358. <li>customizable colors (19 options in basic editor)</li>
  359. <li>option to make browser title different from blog title</li>
  360. </ul>
  361. </span>
  362. </div>
  363. </div>
  364. </div>
  365. <!--end entry-->
  366.  
  367. <!--entry-->
  368. <div class="posts">
  369. <div id="image"><!--the url for your image goes here--><img src="https://67.media.tumblr.com/c475e052c37193885a1f8373cfa584cf/tumblr_oaty0uL1hl1vaph30o1_1280.jpg">
  370. <div id="titlebox">
  371. <!--theme title here--><div class="tit">04: ianthe</div>
  372. <!--links here--><div class="lank">
  373. <a href="/04ianthe">static preview</a> | <a href="http://pastebin.com/iBg6AbhD">code</a> | <a href="javascript:unhide('04features');">features</a>
  374. </div>
  375. </div>
  376. </div>
  377. <div class="info">
  378. <div class="about"><!--theme description goes here>-->
  379. <span id="04features" class="hidden">
  380. <ul>
  381. <li>off-center full-height theme</li>
  382. <li>optional background image, aligned left</li>
  383. <li>optional left sidebar image (300x750), aligned left</li>
  384. <li>optional circle 50x50 portrait icon as a home link</li>
  385. <li>post width 500px</li>
  386. <li>customizable body font size</li>
  387. <li>‘show on hover’ post info (permalinks)</li>
  388. <li>nav links ‘show on hover’ over left sidebar</li>
  389. <li>up to 5 additional links </li>
  390. <li>customizable colors (14 options in basic editor)</li>
  391. <li>option to make browser title different from blog title</li>
  392. </ul>
  393. </span>
  394. </div>
  395. </div>
  396. </div>
  397. <!--end entry-->
  398.  
  399. <!--entry-->
  400. <div class="posts">
  401. <div id="image"><!--the url for your image goes here--><img src="https://66.media.tumblr.com/c943096b1552f98bbb003472cf8d00d4/tumblr_oaundq8WQd1vaph30o1_r1_1280.gif">
  402. <div id="titlebox">
  403. <!--theme title here--><div class="tit">05: bróntion</div>
  404. <!--links here--><div class="lank">
  405. <a href="/05bróntion">static preview</a> | <a href="http://pastebin.com/6qMhHHqt">code</a> | <a href="javascript:unhide('05features');">features</a>
  406. </div>
  407. </div>
  408. </div>
  409. <div class="info">
  410. <div class="about"><!--theme description goes here>-->
  411. <span id="05features" class="hidden">
  412. <ul>
  413. <li>off-center container theme</li>
  414. <li>post width 400px</li>
  415. <li>4 customizable links</li>
  416. <li>custom fonts: dawning of a new day, merienda, slabo +27</li>
  417. <li>optional background image, aligned left</li>
  418. <li>triangle sidebar</li>
  419. <li>‘slide out on hover’ description and nav links on title</li>
  420. <li>circle 100x100 portrait icon, as home link</li>
  421. <li>3 separate circle 100x100 icon portraits</li>
  422. <li>font awesome icons as nav links and footer links</li>
  423. <li>“slide down on hover’ post info, permalink and tags</li>
  424. <li>transparent scrollbar that turns black and white when active</li>
  425. <li>customizable body font size</li>
  426. <li>customizable colors (19 options in basic editor)</li>
  427. <li>georgian list-style-type</li>
  428. </ul>
  429. </span>
  430. </div>
  431. </div>
  432. </div>
  433. <!--end entry-->
  434.  
  435. <!--entry-->
  436. <div class="posts">
  437. <div id="image"><!--the url for your image goes here--><img src="https://66.media.tumblr.com/0eb6c2d1028785b889796d14048e23a9/tumblr_oazh9rAqDw1vaph30o1_r1_540.gif">
  438. <div id="titlebox">
  439. <!--theme title here--><div class="tit">06: diamond rough</div>
  440. <!--links here--><div class="lank">
  441. <a href="/06diamond-rough">static preview</a> | <a href="http://pastebin.com/cYVMmZmQ">code</a> | <a href="javascript:unhide('06features');">features</a>
  442. </div>
  443. </div>
  444. </div>
  445. <div class="info">
  446. <div class="about"><!--theme description goes here>-->
  447. <span id="06features" class="hidden">
  448. <ul>
  449. <li>centered container theme</li>
  450. <li>post width 500px</li>
  451. <li>custom fonts: advent pro, playfair display, cedarville cursive</li>
  452. <li>optional background image with customizable position (default: aligned center center)</li>
  453. <li>‘slide up on hover’ description over title</li>
  454. <li>optional circle portrait icon in hover description</li>
  455. <li>customizable title</li>
  456. <li>customizable home link icon (default: big diamond)</li>
  457. <li>customizable navigation link icons (default; small diamonds)</li>
  458. <li>customizable tooltips</li>
  459. <li>transparent scrollbar that transitions to customizable colors on hover + active</li>
  460. <li>customizable body font size</li>
  461. <li>customizable list-style-type (default: diamond)</li>
  462. <li>up to 5 additional links in navigation</li>
  463. <li>customizable colors (28 options in basic editor)</li>
  464. <li>option to make browser title different from blog title</li>
  465. <li>switches for tag hover, permalink hover, hide captions, archive link and portrait icon</li>
  466. </ul>
  467. </span>
  468. </div>
  469. </div>
  470. </div>
  471. <!--end entry-->
  472.  
  473. <!--entry-->
  474. <div class="posts">
  475. <div id="image"><img src="https://66.media.tumblr.com/b571dbd4e5af3d00b46eabff6af948e0/tumblr_obh7swund81vaph30o1_r1_540.gif">
  476. <div id="titlebox">
  477. <div class="tit">07.1 the night circus</div>
  478. <div class="lank">
  479. <a href="/07.1thenightcircus">static preview</a> | <a href="http://pastebin.com/gwUXLVbr">code</a> | <a href="javascript:unhide('07features');">features</a>
  480. </div>
  481. </div>
  482. </div>
  483. <div class="info">
  484. <div class="about">
  485. <span id="07features" class="hidden">
  486. <ul>
  487. <li>left-justified container theme</li>
  488. <li>post width 500px</li>
  489. <li>custom fonts: cedarville cursive</li>
  490. <li>optional background image with customizable position (default: aligned top left)</li>
  491. <li>container-sized sidebar</li>
  492. <li>‘slide down hover’ description over customizable title</li>
  493. <li>customizable tooltips</li>
  494. <li>transparent scrollbar that transitions to customizable colors on hover + active</li>
  495. <li>customizable body font size</li>
  496. <li>customizable list-style-type (default: circles)</li>
  497. <li>up to 5 additional links in navigation</li>
  498. <li>customizable colors (23 options in basic editor)</li>
  499. <li>option to make browser title different from blog title</li>
  500. <li>switches for tag hover, permalink hover, hide captions, and archive link</li>
  501. </ul>
  502. </span>
  503. </div>
  504. </div>
  505. </div>
  506. <!--end entry-->
  507.  
  508. <!--entry-->
  509. <div class="posts">
  510. <div id="image"><img src="https://66.media.tumblr.com/8833ed14bf33c7207d46ba225ef14fc3/tumblr_obh7swund81vaph30o2_r1_540.gif">
  511. <div id="titlebox">
  512. <div class="tit">07.2 seeing redd</div>
  513. <div class="lank">
  514. <a href="/07.2seeingredd">static preview</a> | <a href="http://pastebin.com/gTkjqHmG">code</a> | <a href="javascript:unhide('07.2features');">features</a>
  515. </div>
  516. </div>
  517. </div>
  518. <div class="info">
  519. <div class="about">
  520. <span id="07.2features" class="hidden">
  521. <ul>
  522. <li>left-justified container theme</li>
  523. <li>post width 300px, 400px or 500px</li>
  524. <li>custom fonts: cookie, dawning of a new day</li>
  525. <li>optional background image with customizable position (default: aligned top left)</li>
  526. <li>container-sized sidebar with optional background image</li>
  527. <li>‘slide down hover’ description over customizable title</li>
  528. <li>5 updates section in hover description</li>
  529. <li>customizable tooltips</li>
  530. <li>transparent scrollbar that transitions to customizable colors on hover + active</li>
  531. <li>customizable body font size</li>
  532. <li>customizable list-style-type (default: spades)</li>
  533. <li>up to 5 additional links in navigation</li>
  534. <li>customizable colors (24 options in basic editor)</li>
  535. <li>option to make browser title different from blog title</li>
  536. <li>switches for tag hover, permalink hover, hide captions, and archive link</li>
  537. </ul>
  538. </span>
  539. </div>
  540. </div>
  541. </div>
  542. <!--end entry-->
  543.  
  544. <!--entry
  545. <div class="posts">
  546. <div id="image"><img src=""></div>
  547. <div class="info">
  548. <div class="tit">TITLE</div>
  549. <div class="lank">
  550. <a href="">static preview</a> | <a href="">code</a>
  551. </div>
  552. <div class="about">
  553. This theme features:
  554. <a href="javascript:unhide('05features');">features</a>
  555. <span id="05features" class="hidden">
  556. <ul>
  557. <li></li>
  558. </ul>
  559. </span>
  560. </div>
  561. </div>
  562. </div>
  563. <!--end entry-->
  564.  
  565. </div>
  566. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!