API tools faq
paste
the49thname

Theme 02: Homesick (tab version)

the49thname
Aug 22nd, 2015
2,827
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.71 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 02: homesick (tab version) / version 1.3 (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:scrollbar" content="#ccc"/>
  32. <meta name="color:title" content="#000"/>
  33. <meta name="color:nav link" content="#ccc"/>
  34. <meta name="color:nav link hover" content="#444"/>
  35. <meta name="color:desc text" content="#888"/>
  36. <meta name="color:text" content="#888"/>
  37. <meta name="color:link" content="#ccc"/>
  38. <meta name="color:link hover" content="#888"/>
  39. <meta name="color:h1 text" content="#fff"/>
  40. <meta name="color:h1 bg" content="#ccc"/>
  41. <meta name="color:ask bg" content="#f6f6f6"/>
  42. <meta name="color:border" content="#ccc"/>
  43. <meta name="color:tags" content="#ccc"/>
  44. <meta name="color:tooltip text" content="#fff"/>
  45. <meta name="color:tooltip bg" content="#ccc"/>
  46. <meta name="color:selection text" content="#888"/>
  47. <meta name="color:selection bg" content="#ccc"/>
  48. <meta name="color:slide up links bg" content="#666"/>
  49. <meta name="color:slide up links" content="#fff"/>
  50. <meta name="color:slide up links hover" content="#eee"/>
  51.  
  52. <!-- text options -->
  53.  
  54. <meta name="text:title" content="郷愁"/>
  55. <meta name="text:tumblr username" content="type your username here"/>
  56.  
  57. <meta name="text:Link 1" content="Link 1"/>
  58. <meta name="text:Link 1 URL" content="/"/>
  59. <meta name="text:Link 2" content="Link 2"/>
  60. <meta name="text:Link 2 URL" content="/"/>
  61. <meta name="text:Link 3" content="Link 3"/>
  62. <meta name="text:Link 3 URL" content="/"/>
  63. <meta name="text:Link 4" content="Link 4"/>
  64. <meta name="text:Link 4 URL" content="/"/>
  65. <meta name="text:Link 5" content="Link 5"/>
  66. <meta name="text:Link 5 URL" content="/"/>
  67. <meta name="text:Link 6" content="Link 6"/>
  68. <meta name="text:Link 6 URL" content="/"/>
  69.  
  70. <!-- image options -->
  71.  
  72. <meta name="image:bg" content=""/>
  73. <meta name="image:side img" content=""/>
  74.  
  75. <!-- fonts - do not remove -->
  76.  
  77. <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
  78.  
  79. <style type="text/css">
  80.  
  81. iframe.tmblr-iframe {
  82. z-index:99999999999999!important;
  83. top:3px!important;
  84. right:0!important;
  85. opacity:0.4;
  86. filter:invert(1);
  87. -webkit-filter:invert(1);
  88. -o-filter:invert(1);
  89. -moz-filter:invert(1);
  90. -ms-filter:invert(1);
  91. transform:scale(0.6);
  92. transform-origin:100% 0;
  93. -webkit-transform:scale(0.8);
  94. -webkit-transform-origin:100% 0;
  95. -o-transform:scale(0.8);
  96. -o-transform-origin:100% 0;
  97. -moz-transform:scale(0.8);
  98. -moz-transform-origin:100% 0;
  99. -ms-transform:scale(0.8);
  100. -ms-transform-origin:100% 0;
  101. }
  102.  
  103. iframe.tmblr-iframe:hover {opacity:0.6!important;}
  104.  
  105. ::-webkit-scrollbar-thumb {z-index:9999999;position:relative;height:auto;background-color:{color:scrollbar};}
  106. ::-webkit-scrollbar {height:5px;width:5px;background-color:transparent;}
  107.  
  108. /* basics */
  109.  
  110. body {
  111. background-color:{color:background};
  112. color:{color:text};
  113. font-family: 'Roboto', sans-serif;
  114. font-size:10px;
  115. text-align:justify;
  116. word-wrap:break-word;
  117. margin:0;
  118. background-image:url('{image:bg}');
  119. background-position:left top;
  120. background-attachment:fixed;
  121. background-repeat:repeat;
  122. }
  123.  
  124. small {font-size:9px;}
  125.  
  126. pre {
  127. text-transform:uppercase;
  128. word-wrap:break-word;
  129. padding:5px;
  130. border:1px solid {color:border};
  131. white-space:pre-wrap;
  132. white-space:-moz-pre-wrap;
  133. white-space:-pre-wrap;
  134. white-space:-o-pre-wrap;
  135. }
  136.  
  137. blockquote {
  138. padding:5px 0px 5px 10px;
  139. border-left:1px solid {color:border};
  140. margin-left:20px;
  141. }
  142.  
  143. #posts blockquote img {max-width:100%;height:auto;}
  144.  
  145. b, strong {color:{color:bold};}
  146.  
  147. i, em {color:{color:italic};}
  148.  
  149. u {color:{color:underline};text-transform:none;}
  150.  
  151. a {
  152. color:{color:link};
  153. text-transform:uppercase;
  154. text-decoration:none;
  155. -moz-transition-duration:1s;
  156. -webkit-transition-duration:1s;
  157. -o-transition-duration:1s;
  158. }
  159.  
  160. a:hover {
  161. color:{color:link hover};
  162. -moz-transition-duration:1s;
  163. -webkit-transition-duration:1s;
  164. -o-transition-duration:1s;
  165. }
  166.  
  167. p {margin:10px;}
  168.  
  169. h1 {
  170. font-size:14px;
  171. font-family: 'Roboto', sans-serif;
  172. text-align:left;
  173. text-transform:uppercase;
  174. letter-spacing:1px;
  175. color:{color:h1 text};
  176. background-color:{color:h1 bg};
  177. padding:10px;
  178. }
  179.  
  180. h1 a {
  181. color:{color:h1 text};
  182. -moz-transition-duration:1s;
  183. -webkit-transition-duration:1s;
  184. -o-transition-duration:1s;
  185. }
  186.  
  187. h1 a:hover {
  188. color:{color:text};
  189. -moz-transition-duration:1s;
  190. -webkit-transition-duration:1s;
  191. -o-transition-duration:1s;
  192. }
  193.  
  194. h2 {
  195. text-align:center;
  196. font-size:12px;
  197. word-spacing:2px;
  198. line-height:17px;
  199. padding:5px 10px;
  200. text-transform:uppercase;
  201. font-family: 'Roboto', sans-serif;
  202. }
  203.  
  204. /* sidebar */
  205.  
  206. #sidebar {
  207. position:fixed;
  208. top:0px;
  209. left:0px;
  210. width:300px;
  211. height:100%;
  212. text-align:right;
  213. }
  214.  
  215. #title {
  216. font-size:40px;
  217. font-family: 'Roboto Condensed', sans-serif;
  218. font-weight:700;
  219. text-transform:uppercase;
  220. letter-spacing:8px;
  221. color:{color:title};
  222. margin-top:200px;
  223. }
  224.  
  225. #nav {
  226. width:300px;
  227. text-align:right;
  228. }
  229.  
  230. .tabs {
  231. width:100%;
  232. margin-left:0px;
  233. display:inline-block;
  234. }
  235.  
  236. .tab-links:after {
  237. display:block;
  238. clear:both;
  239. content:'';
  240. }
  241.  
  242. .tab-links li {display:inline-block;list-style:none;}
  243.  
  244. .tab-links a {
  245. font-family: 'Roboto Condensed', sans-serif;
  246. font-size:14px;
  247. text-transform:uppercase;
  248. letter-spacing:1px;
  249. color:{color:nav link};
  250. padding:0px 4px;
  251. -moz-transition-duration:1s;
  252. -webkit-transition-duration:1s;
  253. -o-transition-duration:1s;
  254. }
  255.  
  256. .tab-links a:hover {
  257. color:{color:nav link hover};
  258. -moz-transition-duration:1s;
  259. -webkit-transition-duration:1s;
  260. -o-transition-duration:1s;
  261. }
  262.  
  263. li.active a, li.active a:hover {
  264. color:{color:nav link hover};
  265. -moz-transition-duration:1s;
  266. -webkit-transition-duration:1s;
  267. -o-transition-duration:1s;
  268. }
  269.  
  270. .tab-content {}
  271. .tab {display:none;}
  272. .tab.active {display:block;}
  273.  
  274. #desc {
  275. width:270px;
  276. font-family:'Roboto', sans-serif;
  277. font-size:9px;
  278. text-transform:uppercase;
  279. letter-spacing:1px;
  280. color:{color:desc text};
  281. padding:5px 0px 10px 25px;
  282. }
  283.  
  284. .pagination {
  285. text-align:right;
  286. padding-top:100px;
  287. }
  288.  
  289. .pagination a {
  290. color:{color:nav link};
  291. padding:10px 5px;
  292. font-size:25px;
  293. font-family: 'Roboto Condensed', sans-serif;
  294. font-weight:400;
  295. letter-spacing:5px;
  296. -moz-transition-duration:1s;
  297. -webkit-transition-duration:1s;
  298. -o-transition-duration:1s;
  299. }
  300.  
  301. .pagination a:hover {
  302. color:{color:nav link hover};
  303. -moz-transition-duration:1s;
  304. -webkit-transition-duration:1s;
  305. -o-transition-duration:1s;
  306. }
  307.  
  308. /* slide up links */
  309.  
  310. .menu {cursor:pointer!important;} /* link on nav for extra links */
  311.  
  312. .down {
  313. height:0px;
  314. overflow:hidden;
  315. -webkit-transition:all 0.6s;
  316. -moz-transition:all 0.3s;
  317. -ms-transition:all 0.6s;
  318. -o-transition:all 0.6s;
  319. transition:all 0.6s;
  320. }
  321.  
  322. .up {
  323. height:30px; /* change height of slide up links container */
  324. z-index:10000000000;
  325. overflow:visible;
  326. -webkit-transition:all 0.6s;
  327. -moz-transition:all 0.3s;
  328. -ms-transition:all 0.6s;
  329. -o-transition:all 0.6s;
  330. transition:all 0.6s;
  331. }
  332.  
  333. #secondnav {
  334. width:100%;
  335. z-index:10;
  336. left:0;
  337. top:0;
  338. position:fixed;
  339. background-color:{color:slide up links bg};
  340. text-align:center;
  341. }
  342.  
  343. #secondnavtext a {
  344. font-size:14px;
  345. font-family:'Roboto Condensed', sans-serif;
  346. font-weight:700;
  347. text-transform:uppercase;
  348. letter-spacing:1px;
  349. display:inline-block;
  350. padding:8px;
  351. color:{color:slide up links};
  352. -moz-transition-duration:1s;
  353. -webkit-transition-duration:1s;
  354. -o-transition-duration:1s;
  355. }
  356.  
  357. #secondnavtext a:hover {
  358. color:{color:slide up links hover};
  359. -moz-transition-duration:1s;
  360. -webkit-transition-duration:1s;
  361. -o-transition-duration:1s;
  362. }
  363.  
  364. /* posts */
  365.  
  366. .tabcontent {
  367. position:relative;
  368. width:100%;
  369. text-align:justify;
  370. }
  371.  
  372. #container {
  373. top:0;
  374. left:350px;
  375. position:fixed;
  376. overflow:auto;
  377. width:700px;
  378. height:100%;
  379. padding:50px;
  380. margin:auto;
  381. background-color:#fff;
  382. box-sizing:border-box;
  383. }
  384.  
  385. #posts {
  386. width:500px;
  387. padding:50px 50px 0px 50px;
  388. margin-left:auto;
  389. margin-right:auto;
  390. margin-bottom:60px;
  391. line-height:14px;
  392. letter-spacing:1px;
  393. }
  394.  
  395. #posts img {max-width:500px;}
  396.  
  397. #posts iframe, #posts video {max-width:500px!important;}
  398.  
  399. #source {margin-top:15px;text-align:right;}
  400.  
  401. #audio {
  402. width:100%;
  403. height:100px;
  404. padding:10px 0px;
  405. color:{color:text};
  406. background-color:{color:ask bg};
  407. font-family:'Roboto Condensed', sans-serif;
  408. overflow:hidden;
  409. }
  410.  
  411. #audio b {color:{color:bold};}
  412.  
  413. #audioplayerbg {
  414. background:#fff;
  415. width:80px;
  416. height:80px;
  417. margin-left:10px;
  418. padding:10px;
  419. overflow:hidden;
  420. position:absolute;
  421. opacity:0.4;
  422. -moz-transition-duration:1s;
  423. -webkit-transition-duration:1s;
  424. -o-transition-duration:1s;
  425. }
  426.  
  427. #audioplayerbg:hover {
  428. opacity:0.7;
  429. -moz-transition-duration:1s;
  430. -webkit-transition-duration:1s;
  431. -o-transition-duration:1s;
  432. }
  433.  
  434. #audioplayer {
  435. width:30px;
  436. height:30px;
  437. overflow:hidden;
  438. margin-top:25px;
  439. margin-left:25px;
  440. }
  441.  
  442. #albumart {float:left;margin:0px 10px;}
  443.  
  444. #audioinfo {
  445. position:absolute;
  446. margin-left:125px;
  447. font-size:10px;
  448. line-height:25px;
  449. text-transform:uppercase;
  450. }
  451.  
  452. .chat ol {
  453. padding:0;
  454. list-style:none;
  455. margin-left:10px;
  456. }
  457.  
  458. .line {list-style:none;padding:5px 0px;}
  459.  
  460. .label {text-decoration:bold;}
  461.  
  462. .asker {
  463. text-align:right;
  464. font-size:15px;
  465. font-family: 'Roboto', sans-serif;
  466. padding:5px;
  467. text-transform:uppercase;
  468. }
  469.  
  470. .asker a {font-size:15px;text-transform:uppercase;}
  471.  
  472. .ask {
  473. margin-top:5px;
  474. padding:10px;
  475. text-align:right;
  476. background-color:{color:ask bg};
  477. }
  478.  
  479. .answer {
  480. text-align:left;
  481. padding:10px;
  482. margin-top:10px;
  483. background-color:{color:ask bg};
  484. }
  485.  
  486. #posts .answer img {max-width:100%;height:auto;}
  487.  
  488. .replier {
  489. text-align:left;
  490. font-size:15px;
  491. font-family: 'Roboto', sans-serif;
  492. padding:5px;
  493. text-transform:uppercase;
  494. margin-top:10px;
  495. }
  496.  
  497. .replier a {font-size:15px;text-transform:uppercase;}
  498.  
  499. .replies {margin-top:10px;}
  500.  
  501. #perma {
  502. border-top:1px solid {color:ask bg};
  503. letter-spacing:2px;
  504. text-align:right;
  505. margin-top:20px;
  506. }
  507.  
  508. #perma a {font-size:10px;}
  509.  
  510. #tags {
  511. text-align:right;
  512. word-wrap:break-word;
  513. }
  514.  
  515. #tags a {
  516. padding:0px 5px;
  517. font-size:8px;
  518. text-transform:none;
  519. display:inline-block;
  520. color:{color:tags};
  521. -moz-transition-duration:1s;
  522. -webkit-transition-duration:1s;
  523. -o-transition-duration:1s;
  524. }
  525.  
  526. #tags a:hover {
  527. color:{color:link hover};
  528. -moz-transition-duration:1s;
  529. -webkit-transition-duration:1s;
  530. -o-transition-duration:1s;
  531. }
  532.  
  533. ol.notes {
  534. margin-top:15px;
  535. list-style-type:none;
  536. padding:10px 25px 10px 25px;
  537. text-align:center;
  538. border-top:1px solid {color:ask bg};
  539. }
  540.  
  541. ol.notes li.note {
  542. padding:10px;
  543. text-align:center;
  544. line-height:140%;
  545. margin-top:10px;
  546. }
  547.  
  548. ol.notes li.note img.avatar {
  549. display:none !important;
  550. }
  551.  
  552. ol.notes li.note blockquote {
  553. padding:2px 5px;
  554. margin:5px 0px 0px 35px;
  555. }
  556.  
  557. /* extras */
  558.  
  559. #s-m-t-tooltip {
  560. z-index:9999999999;
  561. background:{color:tooltip bg};
  562. color:{color:tooltip text};
  563. font-size:9px;
  564. line-height:11px;
  565. font-family: 'Roboto Condensed', sans-serif;
  566. letter-spacing:1px;
  567. text-transform:uppercase;
  568. max-width:150px;
  569. word-wrap:break-word;
  570. padding:2px 5px 2px 5px;
  571. display:block;
  572. margin:24px 14px 7px 12px;
  573. }
  574.  
  575. ::selection {
  576. background:{color:selection bg};
  577. color:{color:selection text};
  578. }
  579.  
  580. /* credit - DO NOT REMOVE, EDIT, OR MOVE TO A PAGE */
  581.  
  582. #credit {
  583. position:fixed;
  584. bottom:14px;
  585. right:10px;
  586. width:relative;
  587. height:relative;
  588. text-align:center;
  589. z-index:9999999;
  590. }
  591.  
  592. #credit a {
  593. font-size:10px;
  594. color:{color:background};
  595. background-color:{color:scrollbar};
  596. padding:4px;
  597. -moz-transition-duration:1s;
  598. -webkit-transition-duration:1s;
  599. -o-transition-duration:1s;
  600. }
  601.  
  602. #credit a:hover {
  603. color:{color:scrollbar};
  604. background-color:{color:background};
  605. -moz-transition-duration:1s;
  606. -webkit-transition-duration:1s;
  607. -o-transition-duration:1s;
  608. }
  609.  
  610. </style>
  611. </head>
  612. <body>
  613.  
  614. <!-- all-in-one script - do not remove -->
  615.  
  616. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  617.  
  618. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  619.  
  620. <!-- slide up links jquery - do not remove -->
  621.  
  622. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  623. <script type="text/javascript">
  624. $(document).ready(function(){
  625. $(".menu").click(function(){
  626. $(".down").toggleClass("up");
  627. });
  628. });
  629. </script>
  630.  
  631. <!-- tooltip jquery scripts -->
  632.  
  633. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  634. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  635.  
  636. <script>
  637. (function($){
  638. $(document).ready(function(){
  639. $("a[title]").style_my_tooltips({
  640. tip_follows_cursor:true,
  641. tip_delay_time:90,
  642. tip_fade_speed:600,
  643. attribute:"title"});});
  644. })(jQuery);
  645. </script>
  646.  
  647. <div id="sidebar">
  648. <div id="title">{text:Title}</div>
  649. <div id="nav">
  650. <div class="tabs">
  651. <ul class="tab-links">
  652. <li><a href="/">Home</a></li>
  653. <li class="active"><a href="#tab1">Posts</a></li>
  654. <li><a href="#tab2">Ask</a></li>
  655. <li><a href="#tab3">Tab 3</a></li>
  656. <!-- you can change the name "tab 3" to whatever you wish! it could be an about page, or an edits page, or a page full of memes. whatever rocks your boat. obviously make it obvious what the tab contains however -->
  657. <li><a class="menu">Links</a></li>
  658. </ul>
  659. </div>
  660. </div>
  661.  
  662. <div id="desc">{Description}</div>
  663.  
  664. <div class="pagination">
  665. {block:PreviousPage}<a href="{PreviousPage}" title="back">後ろ /</a>{/block:PreviousPage}
  666. {block:NextPage}<a href="{NextPage}" title="forth">前</a>{/block:NextPage}</div>
  667.  
  668. </div>
  669.  
  670. <div class="down" id="secondnav">
  671. <div id="secondnavtext">
  672. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  673. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  674. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  675. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  676. <a href="{text:Link 5 URL}">{text:Link 5}</a>
  677. <a href="{text:Link 6 URL}">{text:Link 6}</a>
  678. </div>
  679. </div>
  680.  
  681. <div id="container">
  682.  
  683. <div class="tabs">
  684.  
  685. <!-- --------------------------- TAB 1 -------------------------- -->
  686.  
  687. <div class="tab-content">
  688. <div id="tab1" class="tab active">
  689.  
  690. <div class="tabcontent">
  691. {block:Posts}
  692. <div id="posts">
  693.  
  694. {block:Text}
  695. {block:Title}<h1>{Title}</h1>{/block:Title}
  696. {Body}
  697. {/block:Text}
  698.  
  699. {block:Quote}
  700. <h2>{Quote}</h2>
  701. {block:Source}<div id="source">— {Source}</div>{/block:Source}
  702. {/block:Quote}
  703.  
  704. {block:Link}
  705. <h1><a href="{URL}">{Name}</a></h1>
  706. {block:Description}{Description}{/block:Description}
  707. {/block:Link}
  708.  
  709. {block:Chat}
  710. {block:Title}
  711. <h1>{Title}</h1>
  712. {/block:Title}
  713. <div class="chat">
  714. <ol>{block:Lines}
  715. <li class="line {Alt}">
  716. {block:Label}
  717. <span class="label">
  718. <b>{Label}</b></span>
  719. {/block:Label}{Line}</li>
  720. {/block:Lines}
  721. </ol></div>
  722. {/block:Chat}
  723.  
  724. {block:Photo}
  725. {LinkOpenTag}<center><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></center>{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  726. {/block:Photo}
  727.  
  728. {block:Photoset}
  729. {Photoset-500}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  730. {/block:Photoset}
  731.  
  732. {block:Video}
  733. {Video-500}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  734. {/block:Video}
  735.  
  736. {block:Audio}
  737. <div id="audio">
  738. <div id="audioplayerbg"><div id="audioplayer">{AudioPlayerWhite}</div></div>
  739. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  740. <div id="audioinfo">
  741. {block:TrackName}<b>Song:</b> {TrackName}{/block:TrackName}
  742. <br>{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}
  743. <br>{block:Album}<b>Album:</b> {Album}{/block:Album}
  744. <br>{block:PlayCount}<b>Play count:</b> {PlayCount}{/block:PlayCount}
  745. </div></div>
  746. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  747. {/block:Audio}
  748.  
  749. {block:Answer}
  750. <div class="asker">{Asker} asked:</div>
  751. <div class="ask">{Question}</div>
  752. {block:Answerer}<div class="replier">{Answerer} replied:</div>{/block:Answerer}<div class="answer">{Answer}</div>
  753. {block:Answerer}<div class="replies">{Replies}</div>{/block:Answerer}
  754. {/block:Answer}
  755.  
  756. {block:Date}
  757.  
  758. {block:IndexPage}<div id="perma">
  759. <div style="text-align:left;position:relative;float:left;margin-top:23px;margin-left:25px;">{LikeButton size="25" color="gray"}</div> <div style="text-align:left;position:relative;float:left;margin-left:30px;margin-top:23px;">{ReblogButton size="25" color="gray"}</div>
  760. <br><br><a href="{Permalink}" title="{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}">{block:Date}{TimeAgo}{/block:Date} @ {NoteCountWithLabel}</a>
  761. <br>{block:RebloggedFrom}&emsp;<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  762. {block:ContentSource}&emsp;<a href="{SourceURL}" title="{SourceTitle}">source</a>{/block:ContentSource}
  763. <br>{block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  764. </div>{/block:IndexPage}
  765.  
  766. {block:PermalinkPage}<div id="perma">
  767. <br><a href="{Permalink}" title="{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}">{block:Date}{TimeAgo}{/block:Date} @ {NoteCountWithLabel}</a>
  768. <br>{block:RebloggedFrom}&emsp;<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  769. {block:ContentSource}&emsp;<a href="{SourceURL}" title="{SourceTitle}">source</a>{/block:ContentSource}
  770. <br>{block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  771. </div>{/block:PermalinkPage}
  772.  
  773. {/block:Date}
  774.  
  775. {block:PostNotes}{PostNotes}{/block:PostNotes}
  776.  
  777. </div>
  778. {/block:Posts}
  779. </div>
  780. </div>
  781.  
  782. <!-- -------------------------- TAB 2 -------------------------- -->
  783.  
  784. <div id="tab2" class="tab">
  785. <div class="tabcontent">
  786. <div id="posts">
  787.  
  788. <p><iframe frameborder="0" height="190" 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]--></p>
  789.  
  790. <!-- In order to get the askbox to work you need to type your tumblr username into the text field marked "tumblr username" on the customize menu. If you don't want an askbox on this tab and would like to put something else there just delete from < p >< iframe frameborder ... > to [ end if ] - - > < /p > and replace it with whatever you like!! -->
  791.  
  792. </div>
  793. </div>
  794. </div>
  795.  
  796. <!-- -------------------------- TAB 3 -------------------------- -->
  797.  
  798. <div id="tab3" class="tab">
  799. <div class="tabcontent">
  800. <div id="posts">
  801.  
  802. <p>Content goes here. You can make this tab your about page, or for edits/fics/etc. Whatever you want really!!</p>
  803.  
  804. </div>
  805. </div>
  806. </div>
  807.  
  808. <!-- END OF TABS -->
  809.  
  810. </div>
  811. </div>
  812. </div>
  813. </div>
  814.  
  815. </div>
  816.  
  817. <!-- all-in-one jquery - do not remove -->
  818.  
  819. <script>
  820. $(document).ready(function() {
  821. $('.tabs .tab-links a').on('click', function(e) {
  822. var currentAttrValue = $(this).attr('href');
  823.  
  824. // Show/Hide Tabs
  825. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  826.  
  827. // Change/remove current tab to active
  828. $(this).parent('li').addClass('active').siblings().removeClass('active');
  829.  
  830. e.preventDefault();
  831. });
  832. });
  833. </script>
  834.  
  835. <script>
  836. $(document).ready(function() {
  837. $('#filterOptions li a').click(function() {
  838. // fetch the class of the clicked item
  839. var ourClass = $(this).attr('class');
  840.  
  841. // reset the active class on all the buttons
  842. $('#filterOptions li').removeClass('active');
  843. // update the active state on our clicked button
  844. $(this).parent().addClass('active');
  845.  
  846. if(ourClass == 'all') {
  847. // show all our items
  848. $('#ourHolder').children('div.item').show();
  849. }
  850. else {
  851. // hide all elements that don't share ourClass
  852. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  853. // show all elements that do share ourClass
  854. $('#ourHolder').children('div.' + ourClass).show();
  855. }
  856. return false;
  857. });
  858. });
  859. </script>
  860.  
  861. <div style="position:fixed;bottom:-5px;right:0;z-index:9999;"><img src="{image:side img}"></div>
  862.  
  863. <div id="credit"><a href="//the49thname.tumblr.com/" title="made by the49thname">49</a></div>
  864.  
  865. </body>
  866. </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!