API tools faq
paste
Advertisement
jungjnsoul

♡ JUNGJNSOUL'S THEME 002

jungjnsoul
Mar 19th, 2019
1,448
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. All-In-One Theme Base Code by Paige @neonbikethemes.tumblr.com
  8.  
  9. RULES OF THE BASE CODE:
  10.  
  11. - Don't steal and repost as your own
  12. - Leave a little line in the code somewhere that says the base code is by neonbike themes. You can delete the rules.
  13. - please like/reblog the post
  14. - if you have questions don't hesitate to ask!
  15.  
  16. Thanks!
  17.  
  18. -->
  19.  
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23. <meta charset="utf-8">
  24. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  25. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.  
  29. <meta name="color:accent" content="#5f716e"/>
  30. <meta name="color:top" content="#a2836e" />
  31.  
  32. <meta name="color:Background" content="#ffffff" />
  33. <meta name="color:container bg" content=""/>
  34. <meta name="color:links" content="#000000" />
  35. <meta name="color:links hover" content="#a0a0a0" />
  36. <meta name="color:text" content="#000000" />
  37. <meta name="color:posts" content="#ffffff" />
  38. <meta name="color:sidebar" content=""/>
  39. <meta name="color:title" content=""/>
  40.  
  41. <meta name="image:background" content=""/>
  42. <meta name="image:sidebar" content=""/>
  43. <meta name="image:small nav" content=""/>
  44. <meta name="image:big nav" content=""/>
  45. <meta name="image:ask" content=""/>
  46.  
  47. <meta name="text:topbar" content="" />
  48. <meta name="text:blog title" content=""/>
  49. <meta name="text:description" content=""/>
  50. <meta name="text:ask quote" content=""/>
  51. <meta name="text:nav quote" content=""/>
  52. <meta name="text:blog stats" content=""/>
  53. <meta name="text:muse page" content=""/>
  54. <meta name="text:your url" content=""/>
  55.  
  56. <meta name="text:link 1 title" content=""/>
  57. <meta name="text:link 1" content=""/>
  58. <meta name="text:link 2 title" content=""/>
  59. <meta name="text:link 2" content=""/>
  60. <meta name="text:link 3 title" content=""/>
  61. <meta name="text:link 3" content=""/>
  62. <meta name="text:link 4 title" content=""/>
  63. <meta name="text:link 4" content=""/>
  64. <meta name="text:link 5 title" content=""/>
  65. <meta name="text:link 5" content=""/>
  66. <meta name="text:link 6 title" content=""/>
  67. <meta name="text:link 6" content=""/>
  68. <meta name="text:link 7 title" content=""/>
  69. <meta name="text:link 7" content=""/>
  70. <meta name="text:link 8 title" content=""/>
  71. <meta name="text:link 8" content=""/>
  72. <meta name="text:link 9 title" content=""/>
  73. <meta name="text:link 9" content=""/>
  74.  
  75. <meta name="if:hide captions" content="0"/>
  76.  
  77.  
  78. <!-- CUSTOM FONTS -->
  79.  
  80. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  81. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  82. <link rel="stylesheet" href="https://i.icomoon.io/public/temp/6b29efc3c7/UntitledProject/style.css">
  83.  
  84.  
  85. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  86.  
  87. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  88.  
  89. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  90.  
  91. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  92.  
  93. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  94.  
  95. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  96. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  97. <script>
  98. (function($){
  99. $(document).ready(function(){
  100. $("a[title]").style_my_tooltips({
  101. tip_follows_cursor:true,
  102. tip_delay_time:90,
  103. tip_fade_speed:600,
  104. attribute:"title"
  105. });
  106. });
  107. })(jQuery);
  108. </script>
  109.  
  110. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  111. $(document).ready(function(){
  112. $('.click,.fade').click(function() {
  113. $('#pop').fadeToggle();
  114. });
  115. });
  116. </script>
  117.  
  118.  
  119. <style type="text/css">
  120.  
  121. /* IMESSAGE CHAT POST */
  122. .answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:#e5e5ea;color:#000;left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid #e5e5ea;border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:#e8f3f9;color:#000}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid #e8f3f9;border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  123. .asked p {
  124. text-align: left;
  125. margin: 0 0px 10px 0px;
  126. padding: 0;
  127. color: #666666;
  128. font-family: 'Inconsolata', Inconsolata;
  129. font-size: 12px;
  130. line-height: 0px;
  131. }
  132. .footerright .viasrc {
  133. float: left;
  134. }
  135. .asked a {
  136. margin:0;padding:0;
  137. }
  138. .user_4{background-color:#55caff;color:#fff}.user_4::after{border-color:#55caff}.user_6{background-color:#60f246;color:#fff}.user_6::after{border-color:#60f246}.user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  139. .convo {
  140. overflow: hidden;
  141. list-style-type: none;
  142. padding: 0;
  143. margin: 0;
  144. }
  145.  
  146. /* ---------------------------- GENERAL ----------------------------- */
  147.  
  148. /* -------- SELECTION TOOL ------- */
  149.  
  150. ::-moz-selection {
  151. background: {color:text};
  152. color: {color:background};
  153. }
  154.  
  155. ::selection {
  156. background: {color:text};
  157. color: {color:background};
  158. }
  159.  
  160. /* -------- SCROLLBAR ------- */
  161.  
  162. ::-webkit-scrollbar {
  163. width:6px;
  164. }
  165.  
  166. /* Track */
  167. ::-webkit-scrollbar-track {
  168. background:transparent;
  169. border-radius:15px;
  170. }
  171.  
  172. /* Handle */
  173. ::-webkit-scrollbar-thumb {
  174. background:{color:text};
  175. border-radius:15px;
  176. }
  177.  
  178. ::-webkit-scrollbar-thumb:window-inactive {
  179. background: transparent;
  180. }
  181.  
  182. /* ------- TOOLTIPS ------ */
  183.  
  184. #s-m-t-tooltip {
  185. max-width:300px;
  186. margin:10px 0px 0px 10px;
  187. background-color:{color:bakground};
  188. font-family:helvetica;
  189. font-size:12px;
  190. color:{color:text};
  191. z-index:999999999999999999999999999999999999;
  192. }
  193.  
  194.  
  195. /* FONT IMPORTS */
  196. @font-face { font-family: sv; src: url('https://dl.dropboxusercontent.com/s/rcbleva0319cmkl/Sun%20Valley%20-%20Demo.ttf?dl=0') ;}
  197. @font-face { font-family: "soulmater"; src: url('https://dl.dropboxusercontent.com/s/u895rg1dgs1skal/Soulmater.otf'); ;}
  198. @font-face { font-family: "poppins"; src: url('https://dl.dropboxusercontent.com/s/5tf8iw9skd99dgl/Poppins-Regular.ttf'); ;}
  199. @font-face { font-family: "corals"; src: url('https://dl.dropboxusercontent.com/s/8ppkpi4qrpd0zfq/TT%20Corals%20Thin-DEMO.otf') ;}
  200. @font-face { font-family: "poetsen"; src: url('https://dl.dropboxusercontent.com/s/shson9kow86wkgk/PoetsenOne-Regular.ttf') ;}
  201.  
  202. @font-face { font-family: nic; src: url('https://www.dropbox.com/s/b0o8pfkwz6f3ymg/icomoon.ttf?dl=0') ;}
  203.  
  204. /* -------- BASICS ------- */
  205.  
  206. body {
  207. background:{color:Background};
  208. background-image:url('{image:background}');
  209. color:{color:text};
  210. font-family: 'Quicksand', sans-serif;
  211. font-size: 11px;
  212. margin: 0;
  213. padding: 0;
  214. word-wrap: break-word;
  215. line-height:150%;
  216. }
  217.  
  218. b, strong { color:{color:accent}; }
  219.  
  220. a {
  221. color: {color:links};
  222. text-decoration: none;
  223. -webkit-transition: all .3s;
  224. -moz-transition: all .3s;
  225. -o-transition: all .3s;
  226. -ms-transition: all .3s;
  227. transition: all .3s;
  228. }
  229.  
  230. a:hover{
  231. color:{color:links hover};
  232. -webkit-transition: all .3s;
  233. -moz-transition: all .3s;
  234. -o-transition: all .3s;
  235. -ms-transition: all .3s;
  236. transition: all .3s;
  237. }
  238.  
  239. blockquote {
  240. padding:0px 6px 0px 12px;
  241. margin:4px 0px 2px 2px;
  242. border-left:1px solid {color:text};
  243. color:{color:text};
  244. }
  245.  
  246. iframe, img, embed, object, video {
  247. max-width: 100%;
  248. }
  249.  
  250. p{
  251. margin-bottom:10px;
  252. }
  253.  
  254. img {
  255. height: auto;
  256. width:auto;
  257. max-width:100%;
  258. }
  259.  
  260. h1 {
  261. text-transform:uppercase;
  262. font-size:16px;
  263. font-family:poppins;
  264. text-align:center;
  265. letter-spacing:2px;
  266. color:{color:title};
  267. }
  268.  
  269. h2 {
  270. text-transform:uppercase;
  271. font-size:14px;
  272. font-family:quicksand;
  273. text-align:center;
  274. letter-spacing:3px;
  275. color:{color:accent};
  276. }
  277.  
  278. ul{
  279. list-style-type:square; color:{color:text};
  280. }
  281.  
  282. small, sup, sub { font-size:10px; color:{color:text}; }
  283.  
  284.  
  285. #topper{
  286. width:850px; height:40px;
  287. background-color:{color:top};
  288. border-radius:10px 10px 0px 0px;
  289. margin:auto; position:absolute;
  290. left:0px; right:0px; top:-590px; bottom:0px;
  291. }
  292.  
  293. #counter{
  294. position:static;
  295. margin-top:9px; margin-left:15px;
  296. font-family:quicksand; font-size:8px;
  297. }
  298.  
  299. #counter a {
  300. font-family:poppins;
  301. }
  302.  
  303. #bigcon{
  304. width:850px; height:560px;
  305. margin:auto;
  306. left:0px; right:0px; top:0px; bottom:0px;
  307. background:{color:container bg};
  308. position:absolute;
  309. border-radius:0px 0px 10px 10px;
  310. }
  311.  
  312. .tabcontent {
  313. position:static;
  314. margin-left:auto;
  315. margin-right:35px;
  316. margin-top:45px;
  317. width: 480px;
  318. height:470px;
  319. overflow-y:auto;
  320. overflow-x:hidden;
  321. text-align:center;
  322. margin-bottom:150px;
  323. }
  324.  
  325. #postcontainer {
  326. position:static;
  327. margin-left:auto;
  328. margin-right:25px;
  329. margin-top:45px;
  330. width: 480px;
  331. height:470px;
  332. overflow-y:auto;
  333. overflow-x:hidden;
  334. text-align:center;
  335. margin-bottom:150px;
  336. opacity:.9;
  337. }
  338.  
  339.  
  340.  
  341.  
  342. /* ----------------------------- HEADER STUFF ---------------------------*/
  343.  
  344. #sidebar{
  345. position:absolute; margin:auto;
  346. text-align:center; padding:10px;
  347. }
  348.  
  349. .blogtitle{
  350. margin-bottom:15px; margin-top:5px;
  351. font-size:18px; text-transform:uppercase;
  352. letter-spacing:2px;
  353. font-weight:bold;
  354. color:{color:title};
  355. font-family:poppins;
  356. }
  357.  
  358. .blogtitle a {
  359. color:{color:title};
  360. font-family:poppins;
  361. }
  362.  
  363. .description{
  364. margin-bottom:7px;
  365. color:{color:title};
  366. width:200px;
  367. }
  368.  
  369. #navbar{
  370. display:inline-block;
  371. text-align:center;
  372. }
  373.  
  374. .sidebox {
  375. position:absolute; margin:auto;
  376. left:0px; right:545px; top:-0px; bottom:0px;
  377. width:220px; height:310px;
  378. background-color:{color:sidebar}; opacity:.8;
  379. border-radius:10px;
  380. padding:15px;
  381.  
  382. }
  383.  
  384. .sidecon {
  385. position:absolute; margin:auto;
  386. left:0px; right:550px; top:-0px; bottom:0px;
  387. width:300px; height:560px;
  388. border-radius:0px 0px 0px 10px;
  389. background-color:{color:sidebar};
  390. background-image:url('{image:sidebar}');
  391. }
  392.  
  393. /* ------------------------------ TABS ------------------------------ */
  394.  
  395. .tabs {
  396. width:100%;
  397. margin-left:0px;
  398. display:inline-block;
  399. }
  400.  
  401. /*----- Tab Links -----*/
  402.  
  403. /* Clearfix */
  404. .tab-links:after {
  405. display:block;
  406. clear:both;
  407. content:'';
  408. }
  409.  
  410. .tab-links li {
  411. margin-right:5px;
  412. display:inline-block;
  413. list-style:none;
  414. text-transform:uppercase;
  415. }
  416.  
  417. .tab-links a {
  418. padding:7px;
  419. display:inline-block;
  420. color:{color:top};
  421. transition:all linear 0.15s;
  422. border-bottom:1px solid transparent;
  423. }
  424.  
  425. .tab-links a:hover {
  426. border-bottom:1px solid {color:text};
  427. text-decoration:none;
  428. }
  429.  
  430. li.active a, li.active a:hover {
  431. background:#eaeaea;
  432. color:#000;
  433. border-bottom:1px solid {color:text};
  434. border-radius:5px;
  435. height:11px;
  436. opacity:.4;
  437. background:{color:links};
  438. z-index:111111111111;
  439. -webkit-transition: all .3s;
  440. -moz-transition: all .3s;
  441. -o-transition: all .3s;
  442. -ms-transition: all .3s;
  443. transition: all .3s;
  444. }
  445.  
  446. /*----- Content of Tabs -----*/
  447. .tab-content {
  448. }
  449.  
  450. .tab {
  451. display:none;
  452. }
  453.  
  454. .tab.active {
  455. display:block;
  456. }
  457.  
  458.  
  459.  
  460.  
  461.  
  462. .tabs2 {
  463. width:100%;
  464. margin-left:0px;
  465. display:inline-block;
  466. }
  467.  
  468. /*----- Tab Links -----*/
  469.  
  470. /* Clearfix */
  471. .tab-links2:after {
  472. display:block;
  473. clear:both;
  474. content:'';
  475. }
  476.  
  477. .tab-links2 li {
  478. margin-right:5px;
  479. display:inline-block;
  480. list-style:none;
  481. text-transform:uppercase;
  482. }
  483.  
  484. .tab-links2 a {
  485. padding:7px;
  486. display:inline-block;
  487. color:{color:title};
  488. transition:all linear 0.15s;
  489. border-bottom:1px solid transparent;
  490. }
  491.  
  492. .tab-links2 a:hover {
  493. border-bottom:1px solid {color:text};
  494. text-decoration:none;
  495. }
  496.  
  497. li.active2 a, li.active2 a:hover {
  498. background:{color:posts};
  499. color:{color:title};
  500. border-bottom:1px solid {color:text};
  501. border-radius:5px;
  502. height:11px;
  503. opacity:.4;
  504. background:{color:links};
  505. z-index:111111111111;
  506. -webkit-transition: all .3s;
  507. -moz-transition: all .3s;
  508. -o-transition: all .3s;
  509. -ms-transition: all .3s;
  510. transition: all .3s;
  511. }
  512.  
  513. /*----- Content of Tabs -----*/
  514. .tab-content2 {
  515. }
  516.  
  517. .tab2 {
  518. display:none;
  519. }
  520.  
  521. .tab.active2 {
  522. display:block;
  523. }
  524.  
  525.  
  526.  
  527. /* --------------------------- POSTS (articles) --------------------- */
  528.  
  529. article {
  530. float:left;
  531. background:{color:posts};
  532. padding: 10px;
  533. width: 400px;
  534. text-align:left;
  535. margin-bottom:50px;
  536. padding:25px 25px 25px 25px;
  537. border-radius:5px;
  538. opacity:.9;
  539. }
  540.  
  541. /* ---------------------------- POST INFO -----------------------------*/
  542.  
  543. .postinfo{
  544. margin-top:10px;
  545. font-weight:bold;
  546. }
  547.  
  548. .postinfo a {
  549. color:{color:accent};
  550. }
  551.  
  552. .tags {
  553. margin-top:5px;
  554. font-weight:normal;
  555. color:{color:links};
  556. font-size:9px;
  557. }
  558.  
  559. .tags a {
  560. color:{color:links};
  561. }
  562.  
  563. /* ---------------------------- POST NOTES ------------------------- */
  564.  
  565. ol.notes {
  566. display:block;
  567. text-align:left;
  568. list-style-type:none;
  569. margin-left:-40px;
  570. }
  571.  
  572. ol.notes li.note{
  573. margin-bottom:5px;
  574. }
  575.  
  576. .pagenotes {
  577. text-align:left;
  578. margin-top:15px;
  579. }
  580.  
  581. .pagenotes img{
  582. padding-right:5px;
  583. padding-top:5px;
  584. margin-bottom:-5px;
  585. }
  586.  
  587.  
  588. /* -------------------------- POST TYPES -------------------------- */
  589.  
  590. /* QUOTES */
  591.  
  592. .quote{
  593. font-size:20px;
  594. line-height:150%;
  595. }
  596.  
  597. .quotesource{
  598. text-align:right;
  599. margin-bottom:10px;
  600. }
  601.  
  602. /* QUESTIONS */
  603.  
  604. .q {
  605. width:auto; height:auto;
  606. background-color:{color:top};
  607. border-radius:5px 5px 0px 0px;
  608. margin-bottom:10px;
  609. padding:10px;
  610. text-align:center;
  611. }
  612. .as {
  613. font-weight:bold;
  614. text-align:center;
  615. font-family:poppins;
  616. }
  617.  
  618. .a {
  619. margin-top:10px;
  620. }
  621.  
  622. /* AUDIO */
  623.  
  624. .songart{
  625. float:left;
  626. margin-right:10px;
  627. }
  628.  
  629. .songart img{
  630. width:80px;
  631. height:80px;
  632. }
  633.  
  634. .songtitle{
  635. margin-bottom:10px;
  636. margin-left:90px;
  637. }
  638.  
  639. .songauthor{
  640. margin-bottom:10px;
  641. font-size:8px;
  642. margin-left:90px;
  643. }
  644.  
  645. .tumblr_audio_player {
  646. height: 50px;
  647. }
  648.  
  649. /* ------------------------- PAGINATION ------------------------- */
  650.  
  651. #pagination{
  652. position:static;
  653. margin-top:30px;
  654. text-align:center;
  655. }
  656.  
  657. .pagibutton{
  658. position:relative;
  659. display:inline-block;
  660. background:transparent;
  661. padding:10px;
  662. border-radius:15px;
  663. color:{color:title};
  664. font-size:20px;
  665. margin-top:-10px;
  666. }
  667.  
  668.  
  669. /* TAB2 */
  670.  
  671.  
  672. #aimg {
  673. position:static;
  674. width:200px; height:230px;
  675. background-color:#101010;
  676. border-radius:5px;
  677. margin-top:30px; margin-left:15px;
  678. background-image:url('{image:ask}');
  679. }
  680.  
  681. .atit {
  682. font-family:quicksand; font-size:28px;
  683. line-height:150%;
  684. text-align:right; text-transform:uppercase;
  685. position:absolute; margin:auto;
  686. top:310px; bottom:0px; right:0px; left:310px;
  687. width:440px;
  688. text-shadow:1px 1px 1px #000;
  689. }
  690.  
  691. .atit b {
  692. letter-spacing:2px;
  693. font-family:poppins; color:{color:accent};
  694. }
  695.  
  696.  
  697. /* TAB3 */
  698.  
  699. .npic {
  700. position:static;
  701. width:120px; height:470px;
  702. background-color:#101010;
  703. border-radius:5px;
  704. margin-top:0px; margin-left:350px;
  705. background-image:url('{image:big nav}');
  706. z-index:1;
  707. }
  708.  
  709. .npic2 {
  710. position:absolute;
  711. width:150px; height:260px;
  712. background-color:#101010;
  713. border-radius:5px;
  714. top:155px; bottom:0px; left:570px; right:0px;
  715. background-image:url('{image:small nav}');
  716. z-index:111;
  717. }
  718.  
  719. .nstats {
  720. position:absolute;
  721. width:410px; height:50px;
  722. background-color:{color:sidebar};
  723. border-radius:5px;
  724. top:427px; bottom:0px; left:350px; right:0px;
  725. z-index:11;
  726. padding:15px;
  727. padding-top:15px;
  728. text-align:justify; font-size:9px;
  729. opacity:.9;
  730. }
  731.  
  732. .nstats a {
  733. text-decoration:underline;
  734. }
  735.  
  736. .nmain {
  737. position:absolute;
  738. top:205px; bottom:0px; left:330px; right:0px;
  739. text-align:center;
  740. width:230px; height:100px;
  741. z-index:11111;
  742. }
  743.  
  744. .nmain a {
  745. background:{color:accent}; color:{color:title};
  746. opacity:.9;
  747. border-radius:5px;
  748. width:20px; height:20px;
  749. line-height:14px;
  750. padding:16px;
  751. text-align:center; display:inline-block;
  752. font-size:20px;
  753. margin:7px; text-transform:uppercase;
  754. }
  755.  
  756. .nmain a:hover {
  757. opacity:1;
  758. }
  759.  
  760. .ntit {
  761. font-family:quicksand; font-size:30px;
  762. line-height:150%;
  763. text-align:justify; text-transform:uppercase;
  764. position:absolute; margin:auto;
  765. top:50px; bottom:0px; right:0px; left:290px;
  766. width:440px;
  767. text-shadow:1px 1px 1px #000;
  768. z-index:223;
  769. }
  770.  
  771. .ntit b {
  772. letter-spacing:2px;
  773. font-family:poppins; color:{color:top};
  774. }
  775.  
  776. .ntit i {
  777. letter-spacing:3px;
  778. }
  779.  
  780.  
  781. .credit {
  782. position:fixed;
  783. text-align:center;
  784. opacity:.4;
  785. }
  786.  
  787. /* TAB 4 */
  788.  
  789. .muse {
  790. position:absolute;
  791. margin-left:auto; margin-right:25px; margin-top:40px;
  792. width: 480px; height:auto;
  793. overflow-y:auto; overflow-x:hidden;
  794. text-align:center; font-size:9px;
  795. }
  796.  
  797. .muse a {
  798. text-decoration:underline;
  799. }
  800.  
  801. .muse img {
  802. width:70px; height:70px;
  803. background:#fff; opacity:.9;
  804. border-radius:5px; display:inline-block;
  805. font-size:20px;
  806. margin:7px; text-transform:uppercase;
  807. -webkit-filter: grayscale(100%);
  808. }
  809.  
  810. .muse img:hover {
  811. -webkit-filter: grayscale(0%);
  812. }
  813.  
  814.  
  815.  
  816.  
  817. /* --------------------------- Custom CSS -------------------------- */
  818. {CustomCSS}
  819. </style>
  820. </head>
  821. <body>
  822.  
  823. <div id="topper">
  824. <div id="counter">
  825. {text:topbar}
  826. </div>
  827. </div>
  828. <div id="bigcon">
  829.  
  830.  
  831. <!--sidebar-->
  832.  
  833. <div class="sidecon"></div>
  834. <div class="sidebox">
  835. <div id="sidebar">
  836. <div class="blogtitle">
  837. <a href="/">{text:blog title}</a>
  838. </div>
  839.  
  840. <div class="description">
  841. {text:description}
  842. </div>
  843.  
  844. <div id="navbar">
  845. <div class="tabs">
  846. <ul class="tab-links">
  847. <li class="active" style="margin-left:-30px">
  848. <a href="#tab1"><span class="lnr lnr-sync"></span></a></li>
  849. <li><a href="#tab2"><span class="lnr lnr-bubble"></span></a></li>
  850. <li><a href="#tab3"><span class="lnr lnr-cog"></span></a></li>
  851. <li><a href="#tab4"><span class="lnr lnr-user"></span></a></li>
  852. </ul>
  853. </div>
  854.  
  855. </div>
  856.  
  857. <!--PAGINATION-->
  858. {block:Pagination}
  859. <div class="pagination">
  860. {block:PreviousPage}
  861. <a href="{PreviousPage}">
  862. <div class="pagibutton"><span class="lnr lnr-arrow-left"></span></div></a>
  863. {/block:PreviousPage}
  864. {block:NextPage}
  865. <a href="{NextPage}">
  866. <div class="pagibutton"><span class="lnr lnr-arrow-right"></span></div></a>
  867. {/block:NextPage}
  868. </div>
  869. {/block:Pagination}
  870.  
  871. </div></div>
  872.  
  873.  
  874. <!-- --------------------------- TABS -------------------------- -->
  875.  
  876.  
  877. <div class="tabs">
  878.  
  879.  
  880. <!-- --------------------------- TAB 1 -------------------------- -->
  881.  
  882. <div class="tab-content">
  883. <div id="tab1" class="tab active">
  884.  
  885. <div id="postcontainer">
  886.  
  887. {block:Posts}
  888. <article>
  889.  
  890. <!--TEXT POST-->
  891. {block:Text}
  892. {block:Title}
  893. <h1 class="title">
  894. <a href="{Permalink}">{Title}</a></h1>
  895. {/block:Title}
  896. {Body}
  897. {/block:Text}
  898.  
  899.  
  900. <!--PHOTO POST-->
  901. {block:Photo}
  902. {block:IndexPage}
  903. {LinkOpenTag}
  904. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  905. {LinkCloseTag}
  906. {/block:IndexPage}
  907. {block:PermalinkPage}
  908. {LinkOpenTag}
  909. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  910. {LinkCloseTag}{/block:PermalinkPage}
  911. {/block:Photo}
  912.  
  913.  
  914. <!--PHOTOSET POST-->
  915. {block:Photoset}
  916. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  917. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  918. {/block:Photoset}
  919.  
  920.  
  921. <!--QUOTE POST-->
  922. {block:Quote}
  923. <div class="quote">{Quote}</div>
  924. {block:Source}
  925. <div class="quotesource">{Source}</div>
  926. {/block:Source}
  927. {/block:Quote}
  928.  
  929.  
  930. <!--LINK POST-->
  931. {block:Link}
  932. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  933. {block:Description}{Description}{/block:Description}
  934. {/block:Link}
  935.  
  936.  
  937. <!--CHAT POST-->
  938. {block:Chat}
  939. {block:Title}
  940. <h1>{Title}</h1>{/block:Title}<br>
  941. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  942. {Line}</li>{/block:Lines}</ul>
  943. {/block:Chat}
  944.  
  945.  
  946. <!--AUDIO POST-->
  947. {block:Audio}
  948. {block:AlbumArt}
  949. <div class="songart">
  950. <img src="{AlbumArtURL}">
  951. </div>
  952. {/block:AlbumArt}
  953. <div class="songtitle">
  954. {block:TrackName}
  955. {TrackName}
  956. {/block:TrackName}
  957. </div>
  958. <div class="songauthor">
  959. By
  960. {block:Artist}
  961. {Artist}
  962. {/block:Artist}
  963. </div>
  964. {AudioPlayerWhite}
  965. {/block:Audio}
  966.  
  967.  
  968. <!--VIDEO POST-->
  969. {block:Video}
  970. <div class="video">
  971. <div class="video-player">{Video-500}</div>
  972. {/block:Video}
  973.  
  974.  
  975. <!--ANSWER POST-->
  976. {block:Answer}
  977. <div class="q">
  978. <div class="as">{Asker} said: </div>
  979. {Question}</div>
  980. <div class="a">{Answer}</div>
  981. {/block:Answer}
  982.  
  983. <!--CAPTIONS-->
  984. {block:Ifhidecaptions}
  985. {block:permalink}
  986. {block:Caption}
  987. {Caption}
  988. {/block:Caption}
  989. {/block:permalink}
  990. {/block:Ifhidecaptions}
  991. {block:Ifnothidecaptions}
  992. {block:Caption}
  993. {Caption}
  994. {/block:Caption}
  995. {/block:Ifnothidecaptions}
  996.  
  997. <!--POST INFORMATION-->
  998. <div class="postinfo">
  999.  
  1000. <!--PERMALINK-->
  1001. <a href="{Permalink}">
  1002. {block:Date}
  1003. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {12Hour}:{Minutes} {AmPm}
  1004. {/block:Date}
  1005. </a>
  1006.  
  1007. <!--NOTES-->
  1008. {block:NoteCount}
  1009. <a href="{Permalink}"> + {NoteCount} </a>
  1010. {/block:NoteCount}
  1011.  
  1012. <!--VIA AND SOURCE-->
  1013. {block:RebloggedFrom}
  1014. ( <a href="{ReblogParentURL}">Via</a>
  1015. {/block:RebloggedFrom}
  1016. {block:ContentSource}
  1017. & <a href="{SourceURL}">Source</a>
  1018. {/block:ContentSource}
  1019. {block:RebloggedFrom} ){/block:RebloggedFrom}
  1020.  
  1021. <!--TAGS-->
  1022. {block:HasTags}
  1023. <div class="tags">
  1024. {block:Tags}
  1025. <a href="{TagURL}">#{Tag},</a>
  1026. {/block:Tags}
  1027. </div>
  1028. {/block:HasTags}
  1029.  
  1030. </div>
  1031.  
  1032. <!--POST NOTES-->
  1033. {block:PostNotes}
  1034. <div class="pagenotes">{PostNotes-16}</div>
  1035. {/block:PostNotes}
  1036.  
  1037.  
  1038. </article>
  1039. {/block:Posts}
  1040. <!--Close of article-->
  1041.  
  1042.  
  1043. </div>
  1044.  
  1045. </div>
  1046. <!-- -------------------------- TAB 2 -------------------------- -->
  1047.  
  1048. <div id="tab2" class="tab">
  1049. <div class="tabcontent">
  1050.  
  1051.  
  1052.  
  1053. <p><iframe frameborder="0" scrolling="no" width="450px" height="190" src="https://www.tumblr.com/ask_form/{text:your url}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  1054.  
  1055. <div class="atit">
  1056. {text:ask quote}
  1057. </div>
  1058.  
  1059. <div id="aimg"></div>
  1060.  
  1061. </div>
  1062. </div>
  1063.  
  1064.  
  1065. <!-- -------------------------- TAB 3 -------------------------- -->
  1066.  
  1067. <div id="tab3" class="tab">
  1068. <div class="tabcontent">
  1069.  
  1070. <div class="ntit">{text:nav quote}</div>
  1071.  
  1072. <div class="nmain">
  1073. <a href="{text:link 1}" title="{text:link 1 title}"><span class="lnr lnr-cog"></span></a>
  1074. <a href="{text:link 2}" title="{text:link 2 title}"><span class="lnr lnr-heart"></span></a>
  1075. <a href="{text:link 3}" title="{text:link 3 title}"><span class="lnr lnr-users"></span></a>
  1076. <a href="{text:link 4}" title="{text:link 4 title}"><span class="lnr lnr-earth"></span></a>
  1077. <a href="{text:link 5}" title="{text:link 5 title}"><span class="lnr lnr-gift"></span></a>
  1078. <a href="{text:link 6}" title="{text:link 6 title}"><span class="lnr lnr-mic"></span></a>
  1079. <a href="{text:link 7}" title="{text:link 7 title}"><span class="lnr lnr-tag"></span></a>
  1080. <a href="{text:link 8}" title="{text:link 8 title}"><span class="lnr lnr-star"></span></a>
  1081. <a href="{text:link 9}" title="{text:link 9 title}"><span class="lnr lnr-pushpin"></span></a>
  1082. </div>
  1083. <div class="credit"><a href="http://jungjnsoul.tumblr.com/">©</a></div>
  1084. <div class="npic"></div><div class="npic2"></div>
  1085.  
  1086. <div class="nstats">
  1087. <b>BLOG STATISTICS.</b> &nbsp;&nbsp; {text:blog stats}
  1088. </div>
  1089.  
  1090.  
  1091. </div>
  1092.  
  1093.  
  1094. </div>
  1095.  
  1096.  
  1097. <!-- -------------------------- TAB 4 -------------------------- -->
  1098.  
  1099. <div id="tab4" class="tab">
  1100. <div class="tabcontent">
  1101.  
  1102. <div class="muse">
  1103.  
  1104. <!--- EDIT MUSES HERE! --->
  1105.  
  1106. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1107. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1108. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1109. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1110. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1111.  
  1112. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1113. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1114. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1115. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1116. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1117.  
  1118. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1119. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1120. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1121. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1122. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1123.  
  1124. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1125. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1126. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1127. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1128. <a href="#" title="muse name"><img src="https://i.ibb.co/dfmZ7tr/Untitled-3.png"></a>
  1129.  
  1130.  
  1131. <p>{text:muse page}
  1132. </div>
  1133.  
  1134. </div>
  1135. </div>
  1136.  
  1137.  
  1138.  
  1139.  
  1140. <!-- END OF TABS -->
  1141.  
  1142. </div>
  1143. </div>
  1144. </div>
  1145. </div>
  1146.  
  1147.  
  1148. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1149.  
  1150. <script>
  1151. $(document).ready(function() {
  1152. $('.tabs .tab-links a').on('click', function(e) {
  1153. var currentAttrValue = $(this).attr('href');
  1154.  
  1155. // Show/Hide Tabs
  1156. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1157.  
  1158. // Change/remove current tab to active
  1159. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1160.  
  1161. e.preventDefault();
  1162. });
  1163. });
  1164. </script>
  1165.  
  1166. <script>
  1167. $(document).ready(function() {
  1168. $('#filterOptions li a').click(function() {
  1169. // fetch the class of the clicked item
  1170. var ourClass = $(this).attr('class');
  1171.  
  1172. // reset the active class on all the buttons
  1173. $('#filterOptions li').removeClass('active');
  1174. // update the active state on our clicked button
  1175. $(this).parent().addClass('active');
  1176.  
  1177. if(ourClass == 'all') {
  1178. // show all our items
  1179. $('#ourHolder').children('div.item').show();
  1180. }
  1181. else {
  1182. // hide all elements that don't share ourClass
  1183. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1184. // show all elements that do share ourClass
  1185. $('#ourHolder').children('div.' + ourClass).show();
  1186. }
  1187. return false;
  1188. });
  1189. });
  1190. </script>
  1191.  
  1192.  
  1193.  
  1194. </body>
  1195. </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!