API tools faq
paste
Advertisement
tiffxny21

side navi

tiffxny21
Oct 29th, 2019
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. theme by jenesis aka vielenes - made from a base code by neonbikethemes.
  8.  
  9. -->
  10.  
  11. {block:Description}
  12. <meta name="description" content="{MetaDescription}" />
  13. {/block:Description}
  14. <meta charset="utf-8">
  15. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  16. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20.  
  21.  
  22. <meta name="color:Background" content="#ffffff" />
  23. <meta name="color:Selection" content="#000000" />
  24. <meta name="color:Scrollbar" content="#947979" />
  25. <meta name="color:Text" content="#555" />
  26. <meta name="color:Bold" content="#947979" />
  27. <meta name="color:Italic" content="#947979" />
  28. <meta name="color:Header" content="#ffffff" />
  29. <meta name="color:Blockquote" content="#555" />
  30. <meta name="color:Post Info Text" content="#ffffff" />
  31. <meta name="color:Tags" content="#555" />
  32. <meta name="color:Navigation Link" conteont="#947979" />
  33.  
  34.  
  35. <meta name="image:sidepic" content=""/>
  36. <meta name="image:Link1" content=""/>
  37. <meta name="image:Link2" content=""/>
  38. <meta name="image:Link3" content=""/>
  39. <meta name="image:Link4" content=""/>
  40. <meta name="image:Link5" content=""/>
  41.  
  42.  
  43. <!-- FONT SCRIPTS -->
  44.  
  45. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. <!-- IMPORTANT SCRIPTS - DO NOT REMOVE -->
  53.  
  54. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  55.  
  56. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  57.  
  58. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  59.  
  60. <script>
  61.  
  62. $(document).ready(function(){
  63. $("ul#tabs li").click(function(e){
  64. if (!$(this).hasClass("active")) {
  65. var tabNum = $(this).index();
  66. var nthChild = tabNum+1;
  67. $("ul#tabs li.active").removeClass("active");
  68. $(this).addClass("active");
  69. $("ul#tab li.active").removeClass("active");
  70. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  71. }
  72. });
  73. });
  74. </script>
  75.  
  76. <!-- TOOLTIP SCRIPT -->
  77.  
  78. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  79. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  80. <script>
  81. (function($){
  82. $(document).ready(function(){
  83. $("a[title]").style_my_tooltips({
  84. tip_follows_cursor:true,
  85. tip_delay_time:90,
  86. tip_fade_speed:600,
  87. attribute:"title"
  88. });
  89. });
  90. })(jQuery);
  91. </script>
  92.  
  93.  
  94.  
  95. <style type="text/css">
  96.  
  97.  
  98. /* -------- SELECTION COLOR ------- */
  99.  
  100. ::-moz-selection {
  101. background: #947979;
  102. color: #ffffff;
  103. }
  104.  
  105. ::selection {
  106. background: #947979;
  107. color: #ffffff;
  108. }
  109.  
  110. /* -------- SCROLLBAR ------- */
  111.  
  112. ::-webkit-scrollbar {
  113. width: 4px;
  114. }
  115.  
  116. /* Track */
  117. ::-webkit-scrollbar-track {
  118. background:transparent;
  119. }
  120.  
  121. /* Handle */
  122. ::-webkit-scrollbar-thumb {
  123. background:{color:Scrollbar};
  124. }
  125. ::-webkit-scrollbar-thumb:window-inactive {
  126. background: transparent;
  127. }
  128.  
  129. /* ------- TOOLTIP ------ */
  130.  
  131. #s-m-t-tooltip {
  132. max-width:300px;
  133. margin:22px 20px 0px 10px;
  134. background:url('https://i.imgur.com/uBUkSVF.png');
  135. background-repeat:repeat;
  136. background-attachment:fixed;
  137. border:1px solid #ffffff;
  138. border-radius:10px;
  139. padding:5px;
  140. font-family: 'Playfair Display', serif;
  141. font-size: 10px;
  142. letter-spacing: 1px;
  143. text-transform: uppercase;
  144. color:#ffffff;
  145. font-weight:bold;
  146. text-shadow: 1px 1px 1px #ddd;
  147. text-shadow: -1px -1px -1px #ddd;
  148. z-index:999999999999999999999999999999999999;
  149. }
  150.  
  151.  
  152. /* -------- BODY STYLING ------- */
  153.  
  154. body {
  155. background:{color:Background};
  156. font-family:'arial';
  157. font-size:9px;
  158. color:{color:Text};
  159. text-decoration:none;
  160. line-height:18px;
  161. }
  162.  
  163. /* -------- BOLD, ITALIC, LINK, H1, H2 STYLING ------- */
  164.  
  165. b,bold,strong {
  166. font-family: 'Playfair Display', serif;
  167. font-size: 10px;
  168. letter-spacing: 1px;
  169. text-transform: uppercase;
  170. color:{color:Bold};
  171. font-weight:bold;
  172. text-shadow: 1px 1px 1px #ddd;
  173. text-shadow: -1px -1px -1px #ddd;
  174. }
  175.  
  176. i,italic,em {
  177. color:{color:Italic};
  178. font-family: 'Playfair Display', serif;
  179. font-size: 10px;
  180. letter-spacing: 1px;
  181. text-transform: uppercase;
  182. font-weight:bold;
  183. text-shadow: 1px 1px 1px #ddd;
  184. text-shadow: -1px -1px -1px #ddd;
  185. }
  186.  
  187. a {
  188. color: #555;
  189. text-decoration: none;
  190. -moz-transition-duration:.6s;
  191. -webkit-transition-duration:.6s;
  192. -o-transition-duration:.6s;
  193. -webkit-filter: blur(0px);
  194.  
  195. }
  196.  
  197. a:hover{
  198. color:none;
  199. -moz-transition-duration:.6s;
  200. -webkit-transition-duration:.6s;
  201. -o-transition-duration:.6s;
  202. -webkit-filter: blur(1px);
  203.  
  204.  
  205. }
  206.  
  207. small,s,sup{
  208. font-size:9px;
  209. }
  210.  
  211. blockquote {
  212. border-left:1px solid {color:Blockquote};
  213. padding-left:10px;
  214. padding-right:25px;
  215. margin:5px 5px 5px 10px;
  216. line-height:auto;
  217.  
  218. }
  219.  
  220. iframe, img, embed, object, video {
  221. max-width: 100%;
  222. }
  223.  
  224. p{
  225. margin-bottom:10px;
  226. }
  227.  
  228. img {
  229. height: auto;
  230. width:auto;
  231. max-width:100%;
  232. }
  233.  
  234. h1{
  235. font-family: 'Playfair Display', serif;
  236. font-size: 10px;
  237. letter-spacing: 1px;
  238. text-transform: uppercase;
  239. color:{color:Header};
  240. font-weight:bold;
  241. text-shadow: 1px 1px 1px #ddd;
  242. text-shadow: -1px -1px -1px #ddd;
  243. }
  244.  
  245. h2{
  246. font-family: 'Playfair Display', serif;
  247. font-size: 10px;
  248. letter-spacing: 1px;
  249. text-transform: uppercase;
  250. color:{color:Header};
  251. font-weight:bold;
  252. text-shadow: 1px 1px 1px #ddd;
  253. text-shadow: -1px -1px -1px #ddd;
  254. }
  255.  
  256. ul{
  257. list-style-type:square;
  258. }
  259.  
  260. ol{
  261. list-style-type:;
  262. }
  263.  
  264. #bigcon{
  265. width:520px;
  266. margin-left:auto;
  267. margin-right:auto;
  268. }
  269.  
  270. /* -------- TABBED CONTENT ------- */
  271.  
  272. .tabcontent {
  273. position:static;
  274. margin-left:auto;
  275. margin-right:auto;
  276. width: 340px;
  277. padding-top:20px;
  278. text-align:justify;
  279. margin-bottom:200px;
  280. }
  281.  
  282. /* -------- POSTS CONTAINER ------- */
  283.  
  284. #postcontainer {
  285. position:static;
  286. margin-left:auto;
  287. margin-right:auto;
  288. width: 400px;
  289. overflow:hidden;
  290. margin-top:40px;
  291. margin-bottom:50px;
  292. }
  293.  
  294.  
  295. /* -------- TOP IMAGE - 200px wide ------- */
  296.  
  297. #sidepic img {
  298. position:fixed;
  299. width:200px;
  300. margin-left:-168px;
  301. margin-top:70px;
  302.  
  303.  
  304. }
  305.  
  306. /* -------- DESCRIPTION - keep the same length as icons for aesthetic!! ------- */
  307.  
  308. #description{
  309. position:fixed;
  310. width:100px;
  311. line-height:16px;
  312. text-align:justify;
  313. margin-left:-70px;
  314. margin-top:180px;
  315. }
  316.  
  317. /* -------- LINKS STYLING ( icons ) ------- */
  318.  
  319. #navbar{
  320. position:fixed;
  321. margin-top:180px;
  322. margin-left:-210px;
  323. display:inline-block;
  324. text-align:center;
  325. }
  326.  
  327. /* -------- HEADER STYLING ------- */
  328.  
  329. #header{
  330. background:url('https://i.imgur.com/uBUkSVF.png');
  331. background-repeat:repeat;
  332. background-attachment:fixed;
  333. border-radius:10px;
  334. text-align:center;
  335. padding:8px;
  336. font-family: 'Playfair Display', serif;
  337. font-size: 10px;
  338. letter-spacing: 1px;
  339. text-transform: uppercase;
  340. font-weight:bold;
  341. text-shadow: 1px 1px 1px #ddd;
  342. text-shadow: -1px -1px -1px #ddd;
  343. }
  344.  
  345. /* -------- TAB STYLING ( do not touch unless you're confident, it gets sticky ) ------- */
  346.  
  347. .tabs {
  348. width:100%;
  349. margin-left:0px;
  350. display:inline-block;
  351. }
  352.  
  353. /* -------- TAB LINKS ------- */
  354.  
  355. /* Clearfix */
  356. .tab-links:after {
  357. display:block;
  358. clear:both;
  359. content:'';
  360. }
  361.  
  362. .tab-links li {
  363. margin-right:0px;
  364. display:inline-block;
  365. list-style:none;
  366. text-transform:uppercase;
  367. }
  368.  
  369. .tab-links a {
  370. display:inline-block;
  371. padding:2px 0px 2px 4px;
  372. transition:all linear 0.15s;
  373. }
  374.  
  375. /* -------- TAB LINKS HOVER STYLING ------- */
  376.  
  377. .tab-links a:hover {
  378. text-decoration:none;
  379. }
  380.  
  381. li.active a, li.active a:hover {
  382. background:transparent;
  383. color:#000000;
  384. background:transparent;
  385. -webkit-transition: all .3s;
  386. -moz-transition: all .3s;
  387. -o-transition: all .3s;
  388. -ms-transition: all .3s;
  389. transition: all .3s;
  390. }
  391.  
  392. /* -------- TAB CONTENT ( do not touch ) ------- */
  393.  
  394. .tab-content {
  395. }
  396.  
  397. .tab {
  398. display:none;
  399. }
  400.  
  401. .tab.active {
  402. display:block;
  403. }
  404.  
  405. /* -------- POST STYLING ( article contains your individual post styling ) ------- */
  406.  
  407. article {
  408. float:left;
  409. background:transparent;
  410. padding: 20px;
  411. width: 340px;
  412. text-align:justify;
  413. margin-bottom:80px;
  414.  
  415. }
  416.  
  417. /* -------- POST INFO STYLING ------- */
  418.  
  419. .postinfo{
  420. background:url('https://i.imgur.com/uBUkSVF.png');
  421. background-repeat:repeat;
  422. background-attachment:fixed;
  423. border-radius:10px;
  424. width:320px;
  425. padding:10px;
  426. margin-top:10px;
  427. text-align:center;
  428. font-family: 'Playfair Display', serif;
  429. font-size: 10px;
  430. letter-spacing: 1px;
  431. text-transform: uppercase;
  432. color:#ffffff;
  433. font-weight:bold;
  434. text-shadow: 1px 1px 1px #ddd;
  435. text-shadow: -1px -1px -1px #ddd;
  436. }
  437.  
  438. .postinfo a{
  439. color:{color:Post Info Text};
  440. }
  441.  
  442. /* -------- TAGS ------- */
  443.  
  444. .tags {
  445. margin-top:5px;
  446. font-weight:normal;
  447. }
  448.  
  449. .tags a{
  450. color:{color:Tags};
  451. }
  452.  
  453. /* -------- POST NOTES ------- */
  454.  
  455. ol.notes {
  456. display:block;
  457. text-align:left;
  458. list-style-type:none;
  459. margin-left:-40px;
  460. }
  461.  
  462. ol.notes li.note{
  463. margin-bottom:5px;
  464. }
  465.  
  466. .pagenotes {
  467. text-align:left;
  468. margin-top:15px;
  469. }
  470.  
  471. .pagenotes img{
  472. padding-right:5px;
  473. padding-top:5px;
  474. margin-bottom:-5px;
  475. }
  476.  
  477.  
  478. /* -------- CHAT POST ------- */
  479.  
  480. ul.chat{
  481. list-style:none;
  482. margin-left:-40px;
  483. }
  484.  
  485. .chat span {
  486. float: left;
  487. }
  488.  
  489. /* -------- QUOTE POST ------- */
  490.  
  491. .quote{
  492. font-family:'Playfair Display', serif;
  493. font-size:12px;
  494. line-height:150%;
  495. }
  496.  
  497. .quotesource{
  498. text-align:right;
  499. margin-bottom:10px;
  500. }
  501.  
  502. /* -------- ASK POST ------- */
  503.  
  504. .question{
  505. margin-bottom:15px;
  506. padding:15px;
  507. border-bottom:1px solid #555;
  508. }
  509.  
  510. .answer {
  511. font-size:11px;
  512. }
  513.  
  514.  
  515.  
  516. /* -------- AUDIO POST ------- */
  517.  
  518. .songart{
  519. float:left;
  520. margin-right:10px;
  521. }
  522.  
  523. .songart img{
  524. width:80px;
  525. height:80px;
  526. }
  527.  
  528. .songtitle{
  529. margin-bottom:10px;
  530. margin-left:90px;
  531. }
  532.  
  533. .songauthor{
  534. margin-bottom:10px;
  535. font-size:8px;
  536. margin-left:90px;
  537. }
  538.  
  539. .tumblr_audio_player {
  540. height: 50px;
  541. }
  542.  
  543. /* -------- PAGINATION ------- */
  544.  
  545. #pagination{
  546. position:static;
  547. margin-top:30px;
  548. text-align:center;
  549. }
  550.  
  551. .pagibutton{
  552. font-family:'Playfair Display', serif;
  553. font-weight:bold;
  554. position:relative;
  555. display:inline-block;
  556. background:transparent;
  557. padding:15px;
  558. }
  559.  
  560. /* -------- JUMP CODE ( coding for the click and jump feature in verses / bio ) ------- */
  561.  
  562. .jump {
  563. display:inline-block;
  564. background-color:#b7b6b5;
  565. width:152px;
  566. text-align:center;
  567. padding:8px;
  568. font-family: 'Playfair Display', serif;
  569. font-size: 10px;
  570. letter-spacing: 1px;
  571. text-transform: uppercase;
  572. color:#000000;
  573. font-weight:bold;
  574. text-shadow: 1px 1px 1px #ddd;
  575. text-shadow: -1px -1px -1px #ddd;
  576.  
  577. }
  578.  
  579. #headerbar {
  580. left:50%;
  581. top:50%;
  582. margin-left:….PX; /*– FOR PLACING –*/
  583. margin-top:…PX; /*– FOR PLACING –*/
  584. width:…PX; /*– SETS WIDTH OF YOUR TEXT –*/
  585. overflow:scroll;
  586. text-align:justify;
  587. color:#555;
  588. font-size:10px;
  589. }
  590.  
  591. #tabbar {
  592. left:50%;
  593. top:50%;
  594. margin-left:….PX; /*– FOR PLACING –*/
  595. margin-top:…PX; /*– FOR PLACING –*/
  596.  
  597. }
  598.  
  599.  
  600. ul#tabs {text-align: center;}
  601. ul#tabs li { /*– your inactive / not viewed tabs –*/
  602.  
  603. background:url('https://i.imgur.com/uBUkSVF.png');
  604. background-repeat:repeat;
  605. background-attachment:fixed;
  606. border-radius:10px;
  607. display:inline-block;
  608. padding:10px;
  609. cursor:pointer;
  610. font-family: 'Playfair Display', serif;
  611. font-size: 10px;
  612. letter-spacing: 1px;
  613. text-transform: uppercase;
  614. color:#000000;
  615. font-weight:bold;
  616. text-shadow: 1px 1px 1px #ddd;
  617. text-shadow: -1px -1px -1px #ddd;
  618.  
  619. }
  620.  
  621. ul#tabs li.active { /*– your active tab –*/
  622. background-color:#222;
  623. color:#ffffff;
  624. padding:10px;
  625. border:double 3px #ffffff;
  626.  
  627. }
  628.  
  629. ul#tab, ul#tabs{list-style-type:none;margin:0px;padding:0px;}
  630. ul#tab li.active {display: block;}
  631. ul#tab li {display: none;}
  632.  
  633.  
  634. .navigationlink {
  635. display:inline-block;
  636. background-color:#9c9b9b;
  637. width:152px;
  638. text-align:center;
  639. padding:8px;
  640. font-family: 'Playfair Display', serif;
  641. font-size: 10px;
  642. letter-spacing: 1px;
  643. text-transform: uppercase;
  644. color:{color:Navigation Link};
  645. font-weight:bold;
  646. text-shadow: 1px 1px 1px #ddd;
  647. text-shadow: -1px -1px -1px #ddd;
  648.  
  649. }
  650.  
  651. .navigationlink2 {
  652. display:inline-block;
  653. background-color:#9c9b9b;
  654. width:322px;
  655. text-align:center;
  656. padding:8px;
  657. font-family: 'Playfair Display', serif;
  658. font-size: 10px;
  659. letter-spacing: 1px;
  660. text-transform: uppercase;
  661. color:{color:Navigation Link};
  662. font-weight:bold;
  663. text-shadow: 1px 1px 1px #ddd;
  664. text-shadow: -1px -1px -1px #ddd;
  665.  
  666. }
  667.  
  668.  
  669.  
  670. /* -------- CREDIT ( do NOT touch otherwise I will send fire-breathing worms after you ) ------- */
  671.  
  672. .credit {
  673. font-family:'Playfair Display', serif;
  674. font-size:15px;
  675. position:fixed;
  676. right:15px;
  677. bottom:15px;
  678. opacity:1;
  679.  
  680. }
  681.  
  682.  
  683.  
  684. /* --------------------------- Custom CSS -------------------------- */
  685. {CustomCSS}
  686. </style>
  687. </head>
  688. <body>
  689.  
  690.  
  691. <div id="bigcon">
  692.  
  693.  
  694. <!--TOPBAR-->
  695.  
  696.  
  697.  
  698. <div id="sidepic">
  699. <a href="/" title="refresh"> <img src="{image:sidepic}"></a>
  700. </div>
  701.  
  702.  
  703.  
  704. <div id="description">
  705.  
  706. <p><b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit. Curabitur vitae <i>molestie sapien</i>. Curabitur condimentum pretium est, in gravida mi volutpat vel. Nulla semper nisi arcu. <strike><b>Sed lobortis est eget</strike></b> nunc ultrices venenatis.
  707.  
  708. <p>a roleplay blog for <b>character name</b>, a character from <b>fandom name</b> <i><b>(</b></i> add additional detail here <i><b>)</b></i>
  709.  
  710. <p>independent / highly selective / private / OC friendly
  711.  
  712. <p><i>your name here + your details</i>
  713.  
  714. <p>tracking <i>track tag</i>
  715.  
  716. </div>
  717.  
  718.  
  719.  
  720.  
  721.  
  722. <div id="navbar">
  723. <div class="tabs">
  724. <ul class="tab-links">
  725. <li class="active">
  726. <a href="#tab1" title="index"><img src="{image:Link1}"></a></li>
  727. <br><br> <li><a href="#tab2" title="contact"><img src="{image:Link2}"></a></li>
  728. <br><br> <li><a href="#tab3" title="rules"><img src="{image:Link3}"></a></li>
  729. <br><br> <li><a href="#tab4" title="biography"><img src="{image:Link4}"></a></li>
  730. <br><br> <li><a href="#tab5" title="navigation"><img src="{image:Link5}"></a></li>
  731. </ul>
  732. </div>
  733. </div>
  734.  
  735.  
  736. <div class="credit">
  737. <a href="http://vielenes.tumblr.com/" title="theme made by jenesis!">J</a>
  738. </div>
  739.  
  740.  
  741. <!-- --------------------------- TABS -------------------------- -->
  742.  
  743.  
  744. <div class="tabs">
  745.  
  746.  
  747. <!-- --------------------------- TAB 1 -------------------------- -->
  748.  
  749. <div class="tab-content">
  750. <div id="tab1" class="tab active">
  751.  
  752. <div id="postcontainer">
  753.  
  754. {block:Posts}
  755. <article>
  756.  
  757. <!--TEXT POST-->
  758. {block:Text}
  759. {block:Title}
  760. <h1 class="title">
  761. <a href="{Permalink}">{Title}</a></h1>
  762. {/block:Title}
  763. {Body}
  764. {/block:Text}
  765.  
  766.  
  767. <!--PHOTO POST-->
  768. {block:Photo}
  769. {block:IndexPage}
  770. {LinkOpenTag}
  771. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  772. {LinkCloseTag}
  773. {/block:IndexPage}
  774. {block:PermalinkPage}
  775. {LinkOpenTag}
  776. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  777. {LinkCloseTag}{/block:PermalinkPage}
  778. {block:Caption}
  779. <div class="text">{Caption}</div>{/block:Caption}
  780.  
  781. {/block:Photo}
  782.  
  783.  
  784. <!--PHOTOSET POST-->
  785. {block:Photoset}
  786. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  787. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  788. {block:Caption}
  789. <div class="text">{Caption}</div>{/block:Caption}
  790.  
  791. {/block:Photoset}
  792.  
  793.  
  794.  
  795. <!--QUOTE POST-->
  796. {block:Quote}
  797. <div class="quote">❝ {Quote} ❞</div>
  798. {block:Source}
  799. <div class="quotesource">{Source}</div>
  800. {/block:Source}
  801. {/block:Quote}
  802.  
  803.  
  804. <!--LINK POST-->
  805. {block:Link}
  806. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  807. {block:Description}{Description}{/block:Description}
  808. {/block:Link}
  809.  
  810.  
  811. <!--CHAT POST-->
  812. {block:Chat}
  813. <ul class="chat">
  814. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  815. </ul>
  816. {/block:Chat}
  817.  
  818.  
  819. <!--AUDIO POST-->
  820. {block:Audio}
  821. {block:AlbumArt}
  822. <div class="songart">
  823. <img src="{AlbumArtURL}">
  824. </div>
  825. {/block:AlbumArt}
  826. <div class="songtitle">
  827. {block:TrackName}
  828. {TrackName}
  829. {/block:TrackName}
  830. </div>
  831. <div class="songauthor">
  832. By
  833. {block:Artist}
  834. {Artist}
  835. {/block:Artist}
  836. </div>
  837. {AudioPlayerWhite}
  838. {block:Caption}
  839. <div class="text">{Caption}</div>{/block:Caption}
  840.  
  841. {/block:Audio}
  842.  
  843.  
  844. <!--VIDEO POST-->
  845. {block:Video}
  846. <div class="video">
  847. <div class="video-player">{Video-500}</div>
  848. {block:Caption}
  849. <div class="text">{Caption}</div>{/block:Caption}
  850. {/block:Photo}
  851.  
  852. {/block:Video}
  853.  
  854.  
  855. <!--ANSWER POST-->
  856. {block:Answer}
  857.  
  858. <center><b>{Asker} asked:</b>
  859. <div class="question">{Question}</div></center>
  860. <br>
  861. <p><div class="answer">{Answer}</div>
  862. {/block:Answer}
  863.  
  864.  
  865.  
  866. <!--POST INFORMATION-->
  867. <div class="postinfo">
  868.  
  869. <!--PERMALINK-->
  870. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero} - {TimeAgo}">
  871. {block:Date}
  872. 🕒 {ShortMonth} {DayOfMonth}
  873. {/block:Date}
  874. </a>
  875.  
  876.  
  877. <!--NOTES-->
  878. {block:NoteCount}
  879. &nbsp; <a href="{Permalink}" title="{NoteCount} notes">❤ {NoteCount} notes </a>
  880. {/block:NoteCount}
  881.  
  882.  
  883. &nbsp;
  884.  
  885.  
  886. <a href="{ReblogURL}"target="_blank" title="reblog">↻ reblog</a>
  887.  
  888.  
  889.  
  890.  
  891. </div>
  892.  
  893. <!--TAGS-->
  894. {block:HasTags}
  895. <div class="tags">
  896. {block:Tags}
  897. <a href="{TagURL}">#{Tag},</a>
  898. {/block:Tags}
  899. </div>
  900. {/block:HasTags}
  901.  
  902. <!--POST NOTES-->
  903. {block:PostNotes}
  904. <div class="pagenotes">{PostNotes-16}</div>
  905. {/block:PostNotes}
  906.  
  907.  
  908. </article>
  909. {/block:Posts}
  910. <!--Close of article-->
  911.  
  912.  
  913. <!--PAGINATION-->
  914. {block:Pagination}
  915. <div class="pagination">
  916. {block:PreviousPage}
  917. <a href="{PreviousPage}">
  918. <div class="pagibutton">PREVIOUS</div></a>
  919. {/block:PreviousPage}
  920. {block:NextPage}
  921. <a href="{NextPage}">
  922. <div class="pagibutton">NEXT</div></a>
  923. {/block:NextPage}
  924. </div>
  925. {/block:Pagination}
  926.  
  927. </div>
  928.  
  929. </div>
  930.  
  931. <!-- -------------------------- TAB 2 -------------------------- -->
  932.  
  933. <div id="tab2" class="tab">
  934. <div class="tabcontent">
  935.  
  936. <div id="header">
  937. ask
  938. </div>
  939.  
  940. <center>
  941. <p><iframe frameborder="0" border="0" scrolling="no" width="290" height="300" allowtransparency="true" src="http://www.tumblr.com/ask_form/{yoururlhere}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  942. </center>
  943.  
  944. <div id="header">
  945. submit
  946. </div>
  947.  
  948. <center>
  949. <p><iframe frameborder="0" border="0" scrolling="no" width="290" height="400" allowtransparency="true" src="http://www.tumblr.com/submit_form/{yoururlhere}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  950. </center>
  951.  
  952. </div>
  953. </div>
  954.  
  955.  
  956. <!-- -------------------------- TAB 3 -------------------------- -->
  957.  
  958. <div id="tab3" class="tab">
  959. <div class="tabcontent">
  960.  
  961. <div id="header">
  962. rules
  963. </div>
  964.  
  965. add your rules here!
  966.  
  967. </div>
  968. </div>
  969.  
  970.  
  971. <!-- -------------------------- TAB 4 -------------------------- -->
  972.  
  973. <div id="tab4" class="tab">
  974. <div class="tabcontent">
  975.  
  976. <div id="header">
  977. biography
  978. </div>
  979.  
  980. <p><a href="#generalstats" class="jump">general stats</a>
  981. <a href="#appearance" class="jump">appearance</a>
  982.  
  983. <p><a href="#family" class="jump">family</a>
  984. <a href="#psychologicalevaluation" class="jump">psychological</a>
  985.  
  986. <p><a href="#skills" class="jump">skills</a>
  987. <a href="#overview" class="jump">overview</a>
  988.  
  989.  
  990. <a name="generalstats"><div id="header">general stats</div></a>
  991.  
  992. general stats here!
  993.  
  994. <p><a name="appearance"><div id="header">appearance</div></a>
  995.  
  996. appearance here!
  997.  
  998. <p><a name="family"><div id="header">family</div></a>
  999.  
  1000. family members here!
  1001.  
  1002. <p><a name="psychologicalevaluation"><div id="header">psychological evalulation</div></a>
  1003.  
  1004. psych stats here ( personality type, etc. )
  1005.  
  1006. <a name="skills"><div id="header">skills</div></a>
  1007.  
  1008. skills here!
  1009.  
  1010. <p><a name="overview"><div id="header">overview</div></a>
  1011.  
  1012. full bio here!
  1013.  
  1014. <br>
  1015. <br>
  1016. <br>
  1017. <br>
  1018. <br>
  1019.  
  1020.  
  1021. </div>
  1022. </div>
  1023.  
  1024.  
  1025. <!-- -------------------------- TAB 5 -------------------------- -->
  1026.  
  1027. <div id="tab5" class="tab">
  1028. <div class="tabcontent">
  1029.  
  1030. <div id="headerbar">
  1031. <ul id="tabs">
  1032. <li class="active">verses.</li>
  1033. &nbsp;
  1034. <li>mains</li>
  1035. &nbsp;
  1036. <li>links</li>
  1037. </ul>
  1038. </div>
  1039.  
  1040.  
  1041. <div id="tabbar">
  1042. <ul id="tab">
  1043.  
  1044. <li class="active">
  1045.  
  1046.  
  1047. <div id="header">
  1048. verses
  1049. </div>
  1050.  
  1051.  
  1052. <p><a href="#verse1" class="jump" style="background-color:#b7b6b5">verse 1</a>
  1053. <a href="#verse2" class="jump" style="background-color:#b7b6b5">verse 2</a>
  1054.  
  1055. <p><a href="#verse3" class="jump" style="background-color:#b7b6b5">verse 3</a>
  1056. <a href="#verse4" class="jump" style="background-color:#b7b6b5">verse 4</a>
  1057.  
  1058.  
  1059.  
  1060. <p><center><a name="verse1"><h2><a href="/tagged/">verse 1</a></h2></center></a>
  1061.  
  1062.  
  1063. <p>verse 1 info here
  1064.  
  1065.  
  1066.  
  1067. <p><center><a name="verse2"><h2><a href="/tagged/">verse 2</a></h2></center></a>
  1068.  
  1069.  
  1070. <p>verse 2 info here
  1071.  
  1072.  
  1073.  
  1074. <p><center><a name="verse3"><h2><a href="/tagged/">verse 3</a></h2></center></a>
  1075.  
  1076.  
  1077. <p>verse 3 info here
  1078.  
  1079.  
  1080. <p><center><a name="verse4"><h2><a href="/tagged/">verse 4</a></h2></center></a>
  1081.  
  1082.  
  1083. <p>verse 4 info here
  1084.  
  1085.  
  1086.  
  1087.  
  1088. </li>
  1089.  
  1090. <li>
  1091.  
  1092. <div id="header">
  1093. mains
  1094. </div>
  1095.  
  1096. <center>
  1097.  
  1098.  
  1099. add mains here!
  1100.  
  1101. </center>
  1102.  
  1103.  
  1104. </li>
  1105.  
  1106. <li>
  1107.  
  1108. <div id="header">
  1109. navigation
  1110. </div>
  1111.  
  1112.  
  1113. <p><a href="/tagged/" class="navigationlink" style="background-color:#b7b6b5">link 1</a>
  1114. <a href="/tagged/" class="navigationlink" style="background-color:#b7b6b5">link 2</a>
  1115.  
  1116.  
  1117.  
  1118. </li>
  1119.  
  1120.  
  1121. </ul>
  1122. </div>
  1123.  
  1124.  
  1125.  
  1126.  
  1127.  
  1128.  
  1129. </div>
  1130. </div>
  1131.  
  1132.  
  1133.  
  1134.  
  1135.  
  1136. <!-- END OF TABS -->
  1137.  
  1138. </div>
  1139. </div>
  1140. </div>
  1141. </div>
  1142. </div>
  1143.  
  1144.  
  1145. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1146.  
  1147. <script>
  1148. $(document).ready(function() {
  1149. $('.tabs .tab-links a').on('click', function(e) {
  1150. var currentAttrValue = $(this).attr('href');
  1151.  
  1152. // Show/Hide Tabs
  1153. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1154.  
  1155. // Change/remove current tab to active
  1156. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1157.  
  1158. e.preventDefault();
  1159. });
  1160. });
  1161. </script>
  1162.  
  1163. <script>
  1164. $(document).ready(function() {
  1165. $('#filterOptions li a').click(function() {
  1166. // fetch the class of the clicked item
  1167. var ourClass = $(this).attr('class');
  1168.  
  1169. // reset the active class on all the buttons
  1170. $('#filterOptions li').removeClass('active');
  1171. // update the active state on our clicked button
  1172. $(this).parent().addClass('active');
  1173.  
  1174. if(ourClass == 'all') {
  1175. // show all our items
  1176. $('#ourHolder').children('div.item').show();
  1177. }
  1178. else {
  1179. // hide all elements that don't share ourClass
  1180. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1181. // show all elements that do share ourClass
  1182. $('#ourHolder').children('div.' + ourClass).show();
  1183. }
  1184. return false;
  1185. });
  1186. });
  1187. </script>
  1188.  
  1189.  
  1190.  
  1191.  
  1192. </body>
  1193. </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!