API tools faq
paste
the49thname

Theme 05: The Shore (tab version - ask+plain tabs)

the49thname
Dec 28th, 2015
12,594
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <head>
  4.  
  5. <!-- theme 05: the shore (ask+ plain tab version) / version 1.4 (edited 03/09/19)
  6.  
  7. themes by ro (the49thname) / the49ththeme.tumblr.com
  8. all-in-one base code by neonbikethemes / neonbikethemes.tumblr.com
  9. tumblr controls fix by cyantists @ tumblr
  10. don't remove the credit, use as a base code, or claim as your own work.
  11. edit as much as you want, and feel free to send me any queries/problems.
  12.  
  13. -->
  14.  
  15. <html xlmns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16.  
  17. <title>{Title}</title>
  18.  
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <!-- colour options -->
  26.  
  27. <meta name="color:bold" content="#000"/>
  28. <meta name="color:italic" content="#ccc"/>
  29. <meta name="color:underline" content="#888"/>
  30. <meta name="color:background" content="#f6f6f6"/>
  31. <meta name="color:sidebar bg" content="#dcecf5"/>
  32. <meta name="color:nav bg" content="#f6f6f6"/>
  33. <meta name="color:nav link" content="#888"/>
  34. <meta name="color:nav link hover" content="#ccc"/>
  35. <meta name="color:scrollbar" content="#97c5e0"/>
  36. <meta name="color:text" content="#888"/>
  37. <meta name="color:desc bg" content="#fff"/>
  38. <meta name="color:link" content="#bad8eb"/>
  39. <meta name="color:link hover" content="#888"/>
  40. <meta name="color:perma link" content="#fff"/>
  41. <meta name="color:perma link hover" content="#75b1d6"/>
  42. <meta name="color:perma link bg" content="#bad8eb"/>
  43. <meta name="color:tags" content="#fff"/>
  44. <meta name="color:tags hover" content="#75b1d6"/>
  45. <meta name="color:border" content="#eee"/>
  46. <meta name="color:h1 text" content="#fff"/>
  47. <meta name="color:h1 bg" content="#bad8eb"/>
  48. <meta name="color:ask text" content="#fff"/>
  49. <meta name="color:ask link" content="#fff"/>
  50. <meta name="color:ask link hover" content="#75b1d6"/>
  51. <meta name="color:ask bg" content="#bad8eb"/>
  52. <meta name="color:reply bg" content="#fff"/>
  53. <meta name="color:tooltip text" content="#fff"/>
  54. <meta name="color:tooltip bg" content="#97c5e0"/>
  55. <meta name="color:selection text" content="#fff"/>
  56. <meta name="color:selection bg" content="#97c5e0"/>
  57.  
  58. <!-- text options -->
  59.  
  60. <meta name="text:Tumblr username" content=""/>
  61. <meta name="text:Tab 3 name" content="Tab 3"/>
  62.  
  63. <!-- image options -->
  64.  
  65. <meta name="image:bg" content=""/>
  66. <meta name="image:sidebar" content="https://68.media.tumblr.com/9e419ea039af57f6286315d39e35684f/tumblr_inline_nxpwjtLqxC1rrt3vb_540.png"/>
  67.  
  68. <!-- toggle options -->
  69.  
  70. <meta name="if:tab 3" content="1"/>
  71.  
  72. <meta name="if:400px posts" content="0"/>
  73. <meta name="if:show buttons" content="1"/>
  74. <meta name="if:hover buttons" content="1"/>
  75. <meta name="if:show caption" content="1"/>
  76. <meta name="if:show tags" content="1"/>
  77.  
  78. <!-- fonts -->
  79.  
  80. <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
  81.  
  82. <style type="text/css">
  83.  
  84. iframe.tmblr-iframe {
  85. z-index:99999999999999!important;
  86. top:3px!important;
  87. right:0!important;
  88. opacity:0.4;
  89. filter:invert(1);
  90. -webkit-filter:invert(1);
  91. -o-filter:invert(1);
  92. -moz-filter:invert(1);
  93. -ms-filter:invert(1);
  94. transform:scale(0.6);
  95. transform-origin:100% 0;
  96. -webkit-transform:scale(0.8);
  97. -webkit-transform-origin:100% 0;
  98. -o-transform:scale(0.8);
  99. -o-transform-origin:100% 0;
  100. -moz-transform:scale(0.8);
  101. -moz-transform-origin:100% 0;
  102. -ms-transform:scale(0.8);
  103. -ms-transform-origin:100% 0;
  104. }
  105.  
  106. iframe.tmblr-iframe:hover {opacity:0.6!important;}
  107.  
  108. ::-webkit-scrollbar-thumb {
  109. z-index:9999999;
  110. position:relative;
  111. height:auto;
  112. background-color:{color:scrollbar};
  113. }
  114.  
  115. ::-webkit-scrollbar {
  116. height:5px;
  117. width:5px;
  118. background-color:{color:background};
  119. }
  120.  
  121. /* basics */
  122.  
  123. body {
  124. color:{color:text};
  125. background-color:{color:background};
  126. font-family: 'Roboto', sans-serif;
  127. font-size:10px;
  128. margin:0;
  129. line-height:14px;
  130. letter-spacing:1px;
  131. text-align:justify;
  132. word-wrap:break-word;
  133. background-image:url('{image:bg}');
  134. background-position:left top;
  135. background-attachment:fixed;
  136. background-repeat:repeat;
  137. }
  138.  
  139. small {font-size:9px;}
  140.  
  141. pre {
  142. word-wrap:break-word;
  143. padding:5px;
  144. margin:0px 10px;
  145. border:1px solid {color:border};
  146. white-space:pre-wrap;
  147. white-space:-moz-pre-wrap;
  148. white-space:-pre-wrap;
  149. white-space:-o-pre-wrap;
  150. }
  151.  
  152. blockquote {
  153. margin:0px 0px 0px 20px;
  154. padding:2px 0px 2px 5px;
  155. border-left:1px solid {color:border};
  156. }
  157.  
  158. #posts blockquote img {max-width:100%;height:auto;}
  159.  
  160. b, strong {color:{color:bold};}
  161.  
  162. i, em {color:{color:italic};}
  163.  
  164. u {color:{color:underline};text-transform:none;}
  165.  
  166. a {
  167. color:{color:link};
  168. text-transform:uppercase;
  169. text-decoration:none;
  170. -moz-transition-duration:1s;
  171. -webkit-transition-duration:1s;
  172. -o-transition-duration:1s;
  173. }
  174.  
  175. a:hover {
  176. color:{color:link hover};
  177. -moz-transition-duration:1s;
  178. -webkit-transition-duration:1s;
  179. -o-transition-duration:1s;
  180. }
  181.  
  182. p {margin:5px 10px;padding:5px 0px;}
  183.  
  184. h1 {
  185. font-size:14px;
  186. font-family: 'Roboto', sans-serif;
  187. text-align:left;
  188. text-transform:uppercase;
  189. letter-spacing:1px;
  190. color:{color:h1 text};
  191. background-color:{color:h1 bg};
  192. padding:10px;
  193. margin-top:0px;
  194. }
  195.  
  196. h1 a {
  197. color:{color:h1 text};
  198. -moz-transition-duration:1s;
  199. -webkit-transition-duration:1s;
  200. -o-transition-duration:1s;
  201. }
  202.  
  203. h1 a:hover {
  204. color:{color:text};
  205. -moz-transition-duration:1s;
  206. -webkit-transition-duration:1s;
  207. -o-transition-duration:1s;
  208. }
  209.  
  210. h2 {
  211. text-align:center;
  212. font-size:12px;
  213. word-spacing:2px;
  214. line-height:17px;
  215. padding:5px 10px;
  216. text-transform:uppercase;
  217. font-family: 'Roboto', sans-serif;
  218. }
  219.  
  220. /* sidebar */
  221.  
  222. #sidebarcont {
  223. position:fixed;
  224. width:300px;
  225. height:100%;
  226. background-color:{color:sidebar bg};
  227. z-index:999;
  228. }
  229.  
  230. #sidebar {
  231. margin-top:70px;
  232. width:200px;
  233. margin-left:auto;
  234. margin-right:auto;
  235. }
  236.  
  237. #icon {width:200px;height:200px;}
  238.  
  239. #icon img {width:200px;height:200px;}
  240.  
  241. #desc {
  242. width:200px;
  243. padding:10px;
  244. box-sizing:border-box;
  245. color:{color:text};
  246. background-color:{color:desc bg};
  247. text-transform:uppercase;
  248. font-size:10px;
  249. }
  250.  
  251. #nav {width:200px;background-color:{color:nav bg};}
  252.  
  253. .tab-links li {
  254. list-style:none;
  255. width:180px;
  256. margin-left:-30px;
  257. }
  258.  
  259. .und {display:inline-block;}
  260.  
  261. .und:after {
  262. content:'';
  263. display:block;
  264. height:1px;
  265. width:0;
  266. margin-top:2px;
  267. background-color:{color:nav link};
  268. transition: width 1s ease, background-color 1s ease;
  269. }
  270.  
  271. .und:hover:after {width:180px;background-color:{color:nav link hover};}
  272.  
  273. .tab-links a {
  274. display:block;
  275. color:{color:nav link};
  276. font-family: 'Roboto Condensed', sans-serif;
  277. font-size:11px;
  278. padding:5px 0px;
  279. -moz-transition-duration:1s;
  280. -webkit-transition-duration:1s;
  281. -o-transition-duration:1s;
  282. }
  283.  
  284. .tab-links a:hover {
  285. color:{color:nav link hover};
  286. -moz-transition-duration:1s;
  287. -webkit-transition-duration:1s;
  288. -o-transition-duration:1s;
  289. }
  290.  
  291. li.active a, li.active a:hover {
  292. color:{color:nav link hover};
  293. -moz-transition-duration:1s;
  294. -webkit-transition-duration:1s;
  295. -o-transition-duration:1s;
  296. }
  297.  
  298. .tab-links:after {
  299. display:block;
  300. clear:both;
  301. content:'';
  302. }
  303.  
  304. .tab-content {}
  305. .tab {display:none;}
  306. .tab.active {display:block;}
  307.  
  308. .tabs {
  309. width:100%;
  310. margin-left:0px;
  311. display:inline-block;
  312. }
  313.  
  314. .pagination {
  315. width:200px;
  316. padding:10px;
  317. box-sizing:border-box;
  318. text-align:center;
  319. background-color:{color:perma link bg};
  320. }
  321.  
  322. .pagination a {
  323. padding:2px 10px 0px 10px;
  324. font-size:14px;
  325. display:inline-block;
  326. color:{color:perma link};
  327. -moz-transition-duration:1s;
  328. -webkit-transition-duration:1s;
  329. -o-transition-duration:1s;
  330. }
  331.  
  332. .pagination a:hover {
  333. color:{color:perma link hover};
  334. -moz-transition-duration:1s;
  335. -webkit-transition-duration:1s;
  336. -o-transition-duration:1s;
  337. }
  338.  
  339. /* posts */
  340.  
  341. #postcontainer {
  342. position:relative;
  343. top:0px;
  344. width:100%;
  345. overflow:hidden;
  346. text-align:justify;
  347. }
  348.  
  349. .tabcontent {
  350. position:relative;
  351. top:0px;
  352. width:100%;
  353. text-align:justify;
  354. }
  355.  
  356. .tabcontent blockquote {
  357. margin:0px 0px 0px 20px;
  358. padding:2px 10px 2px 10px;
  359. border-left:1px solid {color:border};
  360. }
  361.  
  362. #container {
  363. {block:if400pxposts}
  364. width:500px;
  365. {/block:if400pxposts}
  366. {block:ifnot400pxposts}
  367. width:600px;
  368. {/block:ifnot400pxposts}
  369. height:100%;
  370. margin-top:70px;
  371. margin-left:350px;
  372. overflow:hidden;
  373. }
  374.  
  375. #posts {
  376. background-color:#fff;
  377. {block:if400pxposts}
  378. width:400px;
  379. {/block:if400pxposts}
  380. {block:ifnot400pxposts}
  381. width:500px;
  382. {/block:ifnot400pxposts}
  383. margin-left:auto;
  384. margin-right:auto;
  385. {block:IndexPage}margin-bottom:80px;{/block:IndexPage}
  386. {block:PermalinkPage}margin-bottom:40px;{/block:PermalinkPage}
  387. }
  388.  
  389. .buttons {
  390. position:absolute;
  391. {block:if400pxposts}
  392. margin-left:415px;
  393. {/block:if400pxposts}
  394. {block:ifnot400pxposts}
  395. margin-left:515px;
  396. {/block:ifnot400pxposts}
  397. display:block;
  398. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  399. }
  400.  
  401. #likebutton {
  402. background-color:{color:sidebar bg};
  403. padding:5px;
  404. margin-bottom:10px;
  405. width:30px;
  406. height:30px;
  407. overflow:hidden;
  408. box-sizing:border-box;
  409. {block:ifhoverbuttons}
  410. opacity:0;
  411. -moz-transition-duration:1s;
  412. -webkit-transition-duration:1s;
  413. -o-transition-duration:1s;
  414. {/block:ifhoverbuttons}
  415. }
  416.  
  417. #reblogbutton {
  418. background-color:{color:sidebar bg};
  419. padding:5px;
  420. width:30px;
  421. height:30px;
  422. overflow:hidden;
  423. box-sizing:border-box;
  424. {block:ifhoverbuttons}
  425. opacity:0;
  426. -moz-transition-duration:.5s;
  427. -webkit-transition-duration:.5s;
  428. -o-transition-duration:.5s;
  429. {/block:ifhoverbuttons}
  430. }
  431.  
  432. {block:ifhoverbuttons}
  433. #posts:hover #likebutton {
  434. opacity:1;
  435. -moz-transition-duration:1s;
  436. -webkit-transition-duration:1s;
  437. -o-transition-duration:1s;
  438. }
  439.  
  440. #posts:hover #reblogbutton {
  441. opacity:1;
  442. -moz-transition-duration:2s;
  443. -webkit-transition-duration:2s;
  444. -o-transition-duration:2s;
  445. }
  446. {/block:ifhoverbuttons}
  447.  
  448. #posts ul, ol {margin-left:15px;padding:0px!important;}
  449.  
  450. #posts li {margin:0px 10px;}
  451.  
  452. #posts img {
  453. {block:if400pxposts}
  454. max-width:400px;
  455. {/block:if400pxposts}
  456. {block:ifnot400pxposts}
  457. max-width:500px;
  458. {/block:ifnot400pxposts}
  459. }
  460.  
  461. #posts p img {margin:0px 10px;}
  462.  
  463. #posts iframe, #posts video {max-width:100%;}
  464.  
  465. #source {margin-top:5px;text-align:right;padding-right:10px;}
  466.  
  467. .caption {
  468. {block:ifnotshowcaption}
  469. {block:IndexPage}display:none;{/block:IndexPage}
  470. {/block:ifnotshowcaption}
  471. }
  472.  
  473. #audio {
  474. width:100%;
  475. height:100px;
  476. padding:10px 0px;
  477. color:#fff;
  478. background-color:{color:sidebar bg};
  479. font-family:'Roboto Condensed', sans-serif;
  480. font-size:10px;
  481. line-height:25px;
  482. overflow:hidden;
  483. }
  484.  
  485. #audio b {color:{color:scrollbar};}
  486.  
  487. #audioplayerbg {
  488. background:#fff;
  489. width:80px;
  490. height:80px;
  491. margin-left:10px;
  492. padding:10px;
  493. overflow:hidden;
  494. position:absolute;
  495. opacity:0.4;
  496. -moz-transition-duration:1s;
  497. -webkit-transition-duration:1s;
  498. -o-transition-duration:1s;
  499. }
  500.  
  501. #audioplayerbg:hover {
  502. opacity:0.7;
  503. -moz-transition-duration:1s;
  504. -webkit-transition-duration:1s;
  505. -o-transition-duration:1s;
  506. }
  507.  
  508. #audioplayer {
  509. width:30px;
  510. height:30px;
  511. overflow:hidden;
  512. margin-top:25px;
  513. margin-left:25px;
  514. }
  515.  
  516. #albumart {float:left;margin:0px 10px;}
  517.  
  518. #audioinfo {
  519. position:absolute;
  520. {block:if400pxposts}
  521. width:260px;
  522. {/block:if400pxposts}
  523. {block:ifnot400pxposts}
  524. width:360px;
  525. {/block:ifnot400pxposts}
  526. max-height:100px;
  527. overflow:auto;
  528. margin-left:125px;
  529. padding-right:10px;
  530. text-transform:uppercase;
  531. }
  532.  
  533. .chat ol {margin:0px!important;list-style:none;}
  534.  
  535. .line {list-style:none;padding:5px 0px;}
  536.  
  537. .label {text-decoration:bold;}
  538.  
  539. .askericon {
  540. width:64px;
  541. height:64px;
  542. float:left;
  543. border:10px solid {color:sidebar bg};
  544. }
  545.  
  546. .asker {
  547. text-align:left;
  548. font-size:15px;
  549. font-family: 'Roboto', sans-serif;
  550. text-transform:uppercase;
  551. margin-bottom:10px;
  552. }
  553.  
  554. .asker a {
  555. color:{color:ask link};
  556. -moz-transition-duration:1s;
  557. -webkit-transition-duration:1s;
  558. -o-transition-duration:1s;
  559. }
  560.  
  561. .asker a:hover {
  562. color:{color:ask link hover};
  563. -moz-transition-duration:1s;
  564. -webkit-transition-duration:1s;
  565. -o-transition-duration:1s;
  566. }
  567.  
  568. .ask {
  569. text-align:left;
  570. color:{color:ask text};
  571. background-color:{color:ask bg};
  572. height:64px;
  573. padding:10px;
  574. overflow:auto;
  575. }
  576.  
  577. .answer {
  578. text-align:left;
  579. padding:10px;
  580. margin-top:10px;
  581. background-color:{color:reply bg};
  582. }
  583.  
  584. #posts .answer img {max-width:100%;height:auto;margin:0px;}
  585.  
  586. .replier {
  587. text-align:left;
  588. font-size:15px;
  589. font-family: 'Roboto', sans-serif;
  590. text-transform:uppercase;
  591. margin:10px 0px 10px 10px;
  592. }
  593.  
  594. .replies {margin-top:10px;}
  595.  
  596. #perma {
  597. padding:10px;
  598. letter-spacing:2px;
  599. text-align:center;
  600. background-color:{color:perma link bg};
  601. margin-top:10px;
  602. }
  603.  
  604. #perma a {
  605. color:{color:perma link};
  606. font-size:9px;
  607. padding:5px;
  608. -moz-transition-duration:1s;
  609. -webkit-transition-duration:1s;
  610. -o-transition-duration:1s;
  611. }
  612.  
  613. #perma a:hover {
  614. color:{color:perma link hover};
  615. -moz-transition-duration:1s;
  616. -webkit-transition-duration:1s;
  617. -o-transition-duration:1s;
  618. }
  619.  
  620. #tags {
  621. text-align:center;
  622. word-wrap:break-word;
  623. margin:5px 0px 0px 5px;
  624. {block:ifnotshowtags}
  625. {block:IndexPage}display:none;{/block:IndexPage}
  626. {/block:ifnotshowtags}
  627. }
  628.  
  629. #tags a {
  630. padding:0px 5px;
  631. font-size:8px;
  632. text-transform:none;
  633. color:{color:tags};
  634. -moz-transition-duration:1s;
  635. -webkit-transition-duration:1s;
  636. -o-transition-duration:1s;
  637. }
  638.  
  639. #tags a:hover {
  640. color:{color:tags hover};
  641. -moz-transition-duration:1s;
  642. -webkit-transition-duration:1s;
  643. -o-transition-duration:1s;
  644. }
  645.  
  646. ol.notes {
  647. margin-top:15px;
  648. list-style-type:none;
  649. padding:10px 25px 10px 25px;
  650. text-align:center;
  651. }
  652.  
  653. ol.notes li.note {
  654. padding:10px;
  655. text-align:center;
  656. line-height:140%;
  657. margin-top:10px;
  658. }
  659.  
  660. ol.notes li.note img.avatar {display:none!important;}
  661.  
  662. ol.notes li.note blockquote {padding:2px 5px;margin:5px 0px 0px 35px;}
  663.  
  664. /* extras */
  665.  
  666. #s-m-t-tooltip {
  667. z-index:9999999999;
  668. color:{color:tooltip text};
  669. background:{color:tooltip bg};
  670. font-size:9px;
  671. line-height:11px;
  672. font-family: 'Roboto Condensed', sans-serif;
  673. letter-spacing:1px;
  674. text-transform:uppercase;
  675. max-width:150px;
  676. word-wrap:break-word;
  677. padding:2px 5px 2px 5px;
  678. display:block;
  679. margin:24px 14px 7px 12px;
  680. }
  681.  
  682. ::selection {color:{color:selection text};background:{color:selection bg};}
  683.  
  684. /* credit - do not remove, alter, or move to another page */
  685.  
  686. #credit {
  687. position:fixed;
  688. bottom:14px;
  689. right:10px;
  690. text-align:center;
  691. z-index:9999999;
  692. }
  693.  
  694. #credit a {
  695. font-size:10px;
  696. color:{color:background};
  697. background-color:{color:scrollbar};
  698. padding:4px;
  699. -moz-transition-duration:1s;
  700. -webkit-transition-duration:1s;
  701. -o-transition-duration:1s;
  702. }
  703.  
  704. #credit a:hover {
  705. color:{color:scrollbar};
  706. background-color:{color:background};
  707. -moz-transition-duration:1s;
  708. -webkit-transition-duration:1s;
  709. -o-transition-duration:1s;
  710. }
  711.  
  712. </style>
  713. </head>
  714. <body>
  715.  
  716. <!-- all-in-one script - do not remove -->
  717.  
  718. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  719.  
  720. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  721.  
  722. <!-- tooltip script -->
  723.  
  724. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  725.  
  726. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  727.  
  728. <script>
  729. (function($){
  730. $(document).ready(function(){
  731. $("a[title]").style_my_tooltips({
  732. tip_follows_cursor:true,
  733. tip_delay_time:90,
  734. tip_fade_speed:600,
  735. attribute:"title"
  736. });
  737. });
  738. })(jQuery);
  739. </script>
  740.  
  741. <div id="sidebarcont">
  742. <div id="sidebar">
  743.  
  744. <div id="icon"><img src="{image:sidebar}"></div>
  745. <div id="desc">{Description}</div>
  746.  
  747. <div id="nav">
  748. <div class="tabs">
  749. <ul class="tab-links">
  750. <li><a href="/"><div class="und">Home</div></a></li>
  751. <li class="active"><a href="#tab1"><div class="und">Posts</div></a></li>
  752. <li><a href="#tab2"><div class="und">Ask</div></a></li>
  753. {block:iftab3}
  754. <li><a href="#tab3"><div class="und">{text:Tab 3 name}</div></a></li>
  755. {/block:iftab3}
  756.  
  757. <!-- to add a link to another tab please copy the following:
  758.  
  759. <li><a href="#tab4"><div class="und">Tab4</div></a></li>
  760.  
  761. and paste below <li><a href="#tab3">...</li>. if you want to add more than one simply copy the text above and replace #tab4 with #tab5, then if adding another use #tab6, etc. -->
  762.  
  763. <li><a href="/archive"><div class="und">Past</div></a></li>
  764. </ul>
  765. </div>
  766. </div>
  767.  
  768. {block:Pagination}
  769. <div class="pagination">
  770. {block:PreviousPage}<a href="{PreviousPage}">Back</a>{/block:PreviousPage}
  771. {block:NextPage}<a href="{NextPage}">Forth</a>{/block:NextPage}</div>
  772. {/block:Pagination}
  773.  
  774. </div>
  775. </div>
  776.  
  777. <div class="tabs">
  778.  
  779. <!-- --------------------------- TAB 1 -------------------------- -->
  780.  
  781. <div class="tab-content">
  782. <div id="tab1" class="tab active">
  783.  
  784. <div id="postcontainer">
  785.  
  786. <div id="container">
  787. {block:Posts}
  788. <div id="posts">
  789.  
  790. {block:ifshowbuttons}
  791. <div class="buttons">
  792. <div id="likebutton">{LikeButton color="white" size="20"}</div>
  793. <div id="reblogbutton">{ReblogButton color="white" size="20"}</div>
  794. </div>
  795. {/block:ifshowbuttons}
  796.  
  797. {block:Text}
  798. {block:Title}<h1>{Title}</h1>{/block:Title}
  799. {Body}
  800. {/block:Text}
  801.  
  802. {block:Quote}
  803. <h2>{Quote}</h2>
  804. {block:Source}<div id="source">— {Source}</div>{/block:Source}
  805. {/block:Quote}
  806.  
  807. {block:Link}
  808. <h1><a href="{URL}">{Name}</a></h1>
  809. {block:Description}{Description}{/block:Description}
  810. {/block:Link}
  811.  
  812. {block:Chat}
  813. {block:Title}
  814. <h1>{Title}</h1>
  815. {/block:Title}
  816. <div class="chat">
  817. <ol>{block:Lines}
  818. <li class="line {Alt}">
  819. {block:Label}
  820. <span class="label">
  821. <b>{Label}</b></span>
  822. {/block:Label}{Line}</li>
  823. {/block:Lines}
  824. </ol></div>
  825. {/block:Chat}
  826.  
  827. {block:Photo}
  828. {LinkOpenTag}<center>{block:if400pxposts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxposts}{block:ifnot400pxposts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:ifnot400pxposts}</center>{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  829. {/block:Photo}
  830.  
  831. {block:Photoset}
  832. <center>{block:if400pxposts}{Photoset-400}{/block:if400pxposts}{block:ifnot400pxposts}{Photoset-500}{/block:ifnot400pxposts}</center>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  833. {/block:Photoset}
  834.  
  835. {block:Video}
  836. <center>{block:if400pxposts}{Video-400}{/block:if400pxposts}{block:ifnot400pxposts}{Video-500}{/block:ifnot400pxposts}</center>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  837. {/block:Video}
  838.  
  839. {block:Audio}
  840. <div id="audio">
  841. <div id="audioplayerbg"><div id="audioplayer">{AudioPlayerWhite}</div></div>
  842. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  843. <div id="audioinfo">
  844. <span{block:TrackName} style="display:none;"{block:TrackName}><b>Song:</b> unknown</span>{block:TrackName}<b>Song:</b> {TrackName}{/block:TrackName}
  845. <br><span{block:Artist} style="display:none;"{block:Artist}><b>Artist:</b> unknown</span>{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}
  846. <br><span{block:Album} style="display:none;"{block:Album}><b>Album:</b> unknown</span>{block:Album}<b>Album:</b> {Album}{/block:Album}
  847. <br>{block:PlayCount}<b>Play count:</b> {PlayCount}{/block:PlayCount}
  848. </div></div>
  849. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  850. {/block:Audio}
  851.  
  852. {block:Answer}
  853. <div class="askericon"><img src="{AskerPortraitURL-64}"></div>
  854. <div class="ask"><div class="asker">{Asker} asked:</div>{Question}</div>
  855. <div class="answer">{block:Answerer}<div class="replier">{Answerer} replied:</div>{/block:Answerer}{Answer}</div>
  856. {block:Answerer}<div class="replies">{Replies}</div>{/block:Answerer}
  857. {/block:Answer}
  858.  
  859. {block:Date}
  860.  
  861. {block:IndexPage}<div id="perma">
  862. <a href="{Permalink}" title="{DayofMonth}{DayofMonthSuffix} {Month} {Year}">{block:Date}{TimeAgo}{/block:Date}</a>
  863. <a href="{Permalink}">{NoteCountwithLabel}</a>
  864. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  865. {block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}">©</a>{/block:ContentSource}
  866. <br>{block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  867. </div>{/block:IndexPage}
  868.  
  869. {block:PermalinkPage}<div id="perma">
  870. <a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}</a>
  871. <a href="{Permalink}">{NoteCountwithLabel}</a>
  872. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  873. {block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}">©</a>{/block:ContentSource}
  874. <br>{block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  875. </div>{/block:PermalinkPage}
  876.  
  877. {/block:Date}
  878.  
  879. {block:PostNotes}{PostNotes}{/block:PostNotes}
  880.  
  881. </div>
  882. {/block:Posts}
  883. </div>
  884.  
  885. </div>
  886. </div>
  887.  
  888. <!-- -------------------------- TAB 2 -------------------------- -->
  889.  
  890. <div id="tab2" class="tab">
  891. <div class="tabcontent">
  892. <div id="container">
  893. <div id="posts">
  894. <h1 style="margin-bottom:0px;">Ask/FAQ</h1>
  895. <iframe frameborder="0" height="{block:if400pxposts}250{/block:if400pxposts}{block:ifnot400pxposts}190{/block:ifnot400pxposts}" id="ask_form" scrolling="no" src="//www.tumblr.com/ask_form/{text:tumblr username}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  896. <p>You can put an FAQ here if you wish.</p>
  897. <p><b>Question:</b>
  898. <blockquote>Answer.</blockquote></p>
  899. <p><b>Question:</b>
  900. <blockquote>Answer.</blockquote></p>
  901. <p><b>Question:</b>
  902. <blockquote>Answer.</blockquote></p>
  903. <p><b>Question:</b>
  904. <blockquote>Answer.</blockquote></p>
  905. <p><b>Question:</b>
  906. <blockquote>Answer.</blockquote></p>
  907. <p><b>Question:</b>
  908. <blockquote>Answer.</blockquote></p>
  909. </div>
  910. </div>
  911. </div>
  912. </div>
  913.  
  914. <!-- -------------------------- TAB 3 -------------------------- -->
  915.  
  916. <div id="tab3" class="tab">
  917. <div class="tabcontent">
  918. <div id="container">
  919. <div id="posts">
  920. <h1>Tab #3 content</h1>
  921. <p>Content goes here. You can put anything you want here i.e. an about page / links / quality memes.</p>
  922. </div>
  923. </div>
  924. </div>
  925. </div>
  926.  
  927. <!-- to add another tab please copy the following:
  928.  
  929. <div id="tab4" class="tab">
  930. <div class="tabcontent">
  931. <div id="container">
  932. <div id="posts">
  933. <h1>Tab #4 content</h1>
  934. <p>Content goes here. You can put anything you want here i.e. an about page / links / quality memes.</p>
  935. </div>
  936. </div>
  937. </div>
  938. </div>
  939.  
  940. and paste below the last 4 </div> for tab 3. make sure to create a link to the tab on the sidebar (scroll up to <div id="nav"> for instructions). if you wish to add more than one tab simply copy what's written above and replace "tab4" with "tab5", then if adding another use "tab6", etc. -->
  941.  
  942. <!-- END OF TABS -->
  943.  
  944. </div>
  945. </div>
  946. </div>
  947. </div>
  948.  
  949. <!-- all-in-one scripts - do not remove -->
  950.  
  951. <script>
  952. $(document).ready(function() {
  953. $('.tabs .tab-links a').on('click', function(e) {
  954. var currentAttrValue = $(this).attr('href');
  955.  
  956. // Show/Hide Tabs
  957. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  958.  
  959. // Change/remove current tab to active
  960. $(this).parent('li').addClass('active').siblings().removeClass('active');
  961.  
  962. e.preventDefault();
  963. });
  964. });
  965. </script>
  966.  
  967. <script>
  968. $(document).ready(function() {
  969. $('#filterOptions li a').click(function() {
  970. // fetch the class of the clicked item
  971. var ourClass = $(this).attr('class');
  972.  
  973. // reset the active class on all the buttons
  974. $('#filterOptions li').removeClass('active');
  975. // update the active state on our clicked button
  976. $(this).parent().addClass('active');
  977.  
  978. if(ourClass == 'all') {
  979. // show all our items
  980. $('#ourHolder').children('div.item').show();
  981. }
  982. else {
  983. // hide all elements that don't share ourClass
  984. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  985. // show all elements that do share ourClass
  986. $('#ourHolder').children('div.' + ourClass).show();
  987. }
  988. return false;
  989. });
  990. });
  991. </script>
  992.  
  993. <div id="credit"><a href="//the49thname.tumblr.com/" title="made by the49thname">49</a>
  994. </div>
  995.  
  996. </body>
  997. </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!