API tools faq
paste
Advertisement
jungjnsoul

♡ JUNGJNSOUL'S THEME PACK - 4.

jungjnsoul
Apr 13th, 2019
2,361
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.49 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. <script type="text/javascript"
  21. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22. <script>
  23. $(document).ready(function() {
  24. //
  25. $('a.poplight[href^=#]').click(function() {
  26. var popID = $(this).attr('rel'); //Get Popup Name
  27. var popURL = $(this).attr('href'); //Get Popup href to define size
  28. var query= popURL.split('?');
  29. var dim= query[1].split('&');
  30. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  31. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  32. var popMargTop = ($('#' + popID).height() + 80) / 2;
  33. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  34. //Apply Margin to Popup
  35. $('#' + popID).css({
  36. 'margin-top' : -popMargTop,
  37. 'margin-left' : -popMargLeft
  38. });
  39. $('body').append('<div id="fade"></div>');
  40. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  41. return false;
  42. });
  43. $('a.close, #fade').live('click', function() {
  44. $('#fade , .popup_block').fadeOut(function() {
  45. $('#fade, a.close').remove(); //fade them both out
  46. });
  47. return false;
  48. });
  49. });
  50. </script>
  51.  
  52. {block:Description}
  53. <meta name="description" content="{MetaDescription}" />
  54. {/block:Description}
  55. <meta charset="utf-8">
  56. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  57. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60.  
  61. <meta name="color:Background" content="#ffffff" />
  62. <meta name="color:links" content="#000000" />
  63. <meta name="color:links hover" content="#a0a0a0" />
  64. <meta name="color:text" content="#000000" />
  65. <meta name="color:posts" content="#ffffff" />
  66.  
  67. <meta name="color:noti top" content=""/>
  68. <meta name="color:noti background" content=""/>
  69. <meta name="color:noti text" content=""/>
  70. <meta name="color:noti title" content=""/>
  71. <meta name="color:accent 1" content=""/>
  72. <meta name="color:accent 2" content=""/>
  73. <meta name="color:container" content=""/>
  74.  
  75. <meta name="image:background" content=""/>
  76. <meta name="image:header" content=""/>
  77. <meta name="image:sidebar" content=""/>
  78. <meta name="image:admin1" content=""/>
  79. <meta name="image:inbox" content=""/>
  80. <meta name="image:nav1" content=""/>
  81.  
  82. <meta name="if:admins" content=""/>
  83.  
  84. <meta name="text:your url" content=""/>
  85.  
  86. <meta name="if:hide captions" content="0"/>
  87.  
  88.  
  89. <meta name="text:sidebar title" content=""/>
  90. <meta name="text:header title" content=""/>
  91. <meta name="text:header text" content=""/>
  92. <meta name="text:inbox title" content=""/>
  93. <meta name="text:inbox text" content=""/>
  94. <meta name="text:navi title" content=""/>
  95.  
  96. <meta name="text:sidebar link" content=""/>
  97. <meta name="text:link 1 title" content=""/>
  98. <meta name="text:link 1" content=""/>
  99. <meta name="text:link 2 title" content=""/>
  100. <meta name="text:link 2" content=""/>
  101. <meta name="text:link 3 title" content=""/>
  102. <meta name="text:link 3" content=""/>
  103. <meta name="text:link 4 title" content=""/>
  104. <meta name="text:link 4" content=""/>
  105. <meta name="text:link 5 title" content=""/>
  106. <meta name="text:link 5" content=""/>
  107. <meta name="text:link 6 title" content=""/>
  108. <meta name="text:link 6" content=""/>
  109. <meta name="text:link 7 title" content=""/>
  110. <meta name="text:link 7" content=""/>
  111. <meta name="text:link 8 title" content=""/>
  112. <meta name="text:link 8" content=""/>
  113. <meta name="text:link 9 title" content=""/>
  114. <meta name="text:link 9" content=""/>
  115.  
  116.  
  117.  
  118.  
  119. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  120.  
  121. <link href="https://fonts.googleapis.com/css?family=Quicksand|Ubuntu+Mono" rel="stylesheet">
  122. <link rel="stylesheet" href="https://use.typekit.net/hym7tfr.css">
  123.  
  124.  
  125. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  126.  
  127. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  128.  
  129. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  130.  
  131. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  132.  
  133. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  134.  
  135. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  136. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  137. <script>
  138. (function($){
  139. $(document).ready(function(){
  140. $("a[title]").style_my_tooltips({
  141. tip_follows_cursor:true,
  142. tip_delay_time:90,
  143. tip_fade_speed:600,
  144. attribute:"title"
  145. });
  146. });
  147. })(jQuery);
  148. </script>
  149.  
  150.  
  151. <style type="text/css">
  152.  
  153. /* ---------------------------- GENERAL ----------------------------- */
  154.  
  155.  
  156. /* -------- SELECTION TOOL ------- */
  157.  
  158. ::-moz-selection {
  159. background: {color:text};
  160. color: {color:background};
  161. }
  162.  
  163. ::selection {
  164. background: {color:text};
  165. color: {color:background};
  166. }
  167.  
  168. /* -------- SCROLLBAR ------- */
  169.  
  170. ::-webkit-scrollbar {
  171. width: 3px; opacity:.9;
  172. }
  173.  
  174. /* Track */
  175. ::-webkit-scrollbar-track {
  176. background:{color:background};
  177. opacity:.9;
  178. }
  179.  
  180. /* Handle */
  181. ::-webkit-scrollbar-thumb {
  182. background:{color:text};
  183. }
  184. ::-webkit-scrollbar-thumb:window-inactive {
  185. background: transparent;
  186. }
  187.  
  188. /* ------- TOOLTIPS ------ */
  189.  
  190. #s-m-t-tooltip {
  191. max-width:300px;
  192. margin:10px 0px 0px 10px;
  193. background-color:{color:bakground};
  194. font-family:helvetica;
  195. font-size:12px;
  196. color:{color:text};
  197. z-index:999999999999999999999999999999999999;
  198. }
  199.  
  200. /* -------- BASICS ------- */
  201.  
  202. body {
  203. background:{color:Background};
  204. background-image:url('{image:background}');
  205. color: {color:text};
  206. font-family: quicksand;
  207. font-size: 11px;
  208. margin: 0;
  209. padding: 0;
  210. word-wrap: break-word;
  211. line-height:150%;
  212. }
  213.  
  214. a {
  215. color: {color:links};
  216. text-decoration: none;
  217. -webkit-transition: all .3s;
  218. -moz-transition: all .3s;
  219. -o-transition: all .3s;
  220. -ms-transition: all .3s;
  221. transition: all .3s;
  222. }
  223.  
  224. a:hover{
  225. color:{color:links hover};
  226. -webkit-transition: all .3s;
  227. -moz-transition: all .3s;
  228. -o-transition: all .3s;
  229. -ms-transition: all .3s;
  230. transition: all .3s;
  231. }
  232.  
  233.  
  234. blockquote {
  235. padding:0px 6px 0px 12px;
  236. margin:4px 0px 2px 2px;
  237. border-left:1px solid {color:text};
  238. color:{color:text};
  239. }
  240.  
  241. iframe, img, embed, object, video {
  242. max-width: 100%;
  243. }
  244.  
  245. p{
  246. margin-bottom:10px;
  247. }
  248.  
  249. img {
  250. height: auto;
  251. width:auto;
  252. max-width:100%;
  253. }
  254.  
  255.  
  256. ul{
  257. list-style-type:square;
  258. }
  259.  
  260. ol{
  261. list-style-type:;
  262. }
  263.  
  264. h1 { font-family:liebedoni-solid; text-transform:lowercase; font-size:18px; letter-spacing:1px; }
  265.  
  266. h2 { font-family:liebedoni-solid; }
  267.  
  268. small, sup, sub { font-size:10px; }
  269.  
  270. #bigcon{
  271. width:800px; height:450px;
  272. background-color:{color:container};
  273. position:fixed; margin:auto;
  274. top:170px; bottom:0px; left:0px; right:0px;
  275. border-radius:0px 0px 7px 7px;
  276. }
  277.  
  278. #headerimg {
  279. background-color:#8a867b;
  280. background-image:url('{image:header}');
  281. width:800px; height:160px;
  282. position:fixed; margin:auto;
  283. top:-440px; bottom:0px; left:0px; right:0px;
  284. z-index:2;
  285. }
  286.  
  287. .tabcontent {
  288. position:static;
  289. margin-left:-25px;
  290. width: 520px;
  291. margin-top:-15px;
  292. margin-bottom:200px;
  293. text-align:center;
  294. }
  295.  
  296. .topper {
  297. z-index:1;
  298. position:fixed; margin:auto;
  299. top:0px; bottom:620px; left:0px; right:0px;
  300. background-color:{color:noti top};
  301. height:15px; width:790px; padding:5px;
  302. border-radius:7px 7px 0px 0px;
  303. }
  304.  
  305. #dot1 {
  306. width:8px; height:8px;
  307. border-radius:100%;
  308. margin-top:4px;
  309. margin-left:3px;
  310.  
  311. background-color:{color:accent 1};
  312. }
  313.  
  314. #dot2 {
  315. width:8px; height:8px;
  316. border-radius:100%;
  317. margin-left:18px;
  318. margin-top:-8px;
  319.  
  320. background-color:#4d4d4d;
  321. }
  322.  
  323. #dot3 {
  324. width:8px; height:8px;
  325. border-radius:100%;
  326. margin-left:33px;
  327. margin-top:-8px;
  328.  
  329. background-color:{color:accent 2};
  330. }
  331.  
  332. #weetext {
  333. text-align:center;
  334. margin-top:-11px;
  335. }
  336.  
  337. #postcontainer {
  338. position:fixed; margin:auto;
  339. top:170px; bottom:0px; right:0px; left:260px;
  340. width: 470px; height:400px;
  341. background-color:transparent;
  342. overflow-y:auto;
  343. text-align:center;
  344. }
  345.  
  346.  
  347. /* ----------------------------- HEADER STUFF ---------------------------*/
  348.  
  349. .sidebarback {
  350. background-color:#aea79c;
  351. width:240px; height:420px;
  352. border-radius:7px 7px 5px 5px;
  353. margin-top:15px; margin-left:15px;
  354. }
  355.  
  356. .sidebartopper {
  357. z-index:1;
  358. background-color:{color:noti top};
  359. height:10px; width:230px; padding:5px;
  360. border-radius:7px 7px 0px 0px;
  361. position:absolute;
  362. top:15px; bottom:0px; left:15px; right:0px;
  363. }
  364.  
  365. .sidebar {
  366. background-image:url('{image:sidebar}');
  367. width:240px; height:240px;
  368. margin-top:-400px; margin-left:15px;
  369. z-index:10000;
  370. }
  371.  
  372. #sidebar{
  373. position:absolute;
  374. top:285px; bottom:0px; left:15px; right:0px;
  375. text-align:center; z-index:2;
  376.  
  377. height:130px; width:220px;
  378. padding:10px;
  379. background-color:{color:noti top};
  380. border-radius:0px 0px 5px 5px;
  381. }
  382.  
  383. .blogtitle{
  384. margin-bottom:12px; margin-top:5px;
  385. font-family:liebedoni-solid;
  386. text-transform:lowercase;
  387. font-size:18px; letter-spacing:1px;
  388. }
  389.  
  390. .description{
  391. width:210px; height:100px;
  392. overflow:auto; margin-left:5px;
  393. }
  394.  
  395. #navbar{
  396. display:inline-block;
  397. text-align:center;
  398. margin-top:-5px;
  399. }
  400.  
  401. .nav {
  402. width:240px; height:40px;
  403. background-color:{color:accent 1};
  404. text-align:center;
  405.  
  406. position:absolute;
  407. top:245px; bottom:0px; left:15px; right:0px;
  408. }
  409.  
  410. /* ------------------------------ TABS ------------------------------ */
  411.  
  412. .tabs {
  413. width:100%;
  414. margin-left:0px;
  415. display:inline-block;
  416. }
  417.  
  418. /*----- Tab Links -----*/
  419.  
  420. /* Clearfix */
  421. .tab-links:after {
  422. display:block;
  423. clear:both;
  424. content:'';
  425. }
  426.  
  427. .tab-links li {
  428. margin-right:5px;
  429. display:inline-block;
  430. list-style:none;
  431. text-transform:uppercase;
  432. }
  433.  
  434. .tab-links a {
  435. padding:7px;
  436. display:inline-block;
  437. color:{color:links};
  438. transition:all linear 0.15s;
  439. border-bottom:1px solid transparent;
  440. }
  441.  
  442. .tab-links a:hover {
  443. border-bottom:1px solid {color:text};
  444. text-decoration:none;
  445. }
  446.  
  447. li.active a, li.active a:hover {
  448. background:transparent;
  449. color:{color:accent 2};
  450. background:{color:posts};
  451. opacity:.7;
  452. border-radius:5px; height:13px;
  453. -webkit-transition: all .3s;
  454. -moz-transition: all .3s;
  455. -o-transition: all .3s;
  456. -ms-transition: all .3s;
  457. transition: all .3s;
  458. }
  459.  
  460. /*----- Content of Tabs -----*/
  461. .tab-content {
  462. position:fixed; margin:auto;
  463. top:170px; bottom:0px; right:0px; left:260px;
  464. width: 470px; height:400px;
  465. background-color:transparent;
  466. text-align:center;
  467. }
  468.  
  469. .tab {
  470. display:none;
  471. }
  472.  
  473. .tab.active {
  474. display:block;
  475. }
  476.  
  477. /* --------------------------- POSTS (articles) --------------------- */
  478.  
  479. article {
  480. float:left;
  481. background:{color:posts};
  482. padding:25px 25px 25px 25px;
  483. width: 400px;
  484. text-align:left;
  485. margin-bottom:50px;
  486. border-radius:5px;
  487. }
  488.  
  489. /* ---------------------------- POST INFO -----------------------------*/
  490.  
  491. .permalinks {
  492. background-color:{color:posts};
  493. padding:2px 6px 5px 5px;
  494. height:12px;
  495. border-radius:2px;
  496. }
  497.  
  498. .permalinks a {
  499. text-decoration:none;
  500. color:{color:noti text}; font-size:9px;
  501. font-family:'Ubuntu Mono';
  502. }
  503.  
  504. .permalinks a:hover {
  505. color:{color:container};
  506. }
  507.  
  508. .date {
  509. float:left;
  510. }
  511.  
  512. .reblogs {
  513. float:right;
  514. }
  515.  
  516. .postinfo{
  517. margin-top:10px;
  518. font-weight:bold;
  519. }
  520.  
  521. .tags {
  522. margin-top:5px;
  523. text-decoration:none;
  524. color:{color:text}; font-size:10px;
  525. font-family:'Ubuntu Mono';
  526. }
  527.  
  528. /* ---------------------------- POST NOTES ------------------------- */
  529.  
  530. ol.notes {
  531. display:block;
  532. text-align:left;
  533. list-style-type:none;
  534. margin-left:-40px;
  535. }
  536.  
  537. ol.notes li.note{
  538. margin-bottom:5px;
  539. }
  540.  
  541. .pagenotes {
  542. text-align:left;
  543. margin-top:15px;
  544. }
  545.  
  546. .pagenotes img{
  547. padding-right:5px;
  548. padding-top:5px;
  549. margin-bottom:-5px;
  550. }
  551.  
  552.  
  553. /* -------------------------- POST TYPES -------------------------- */
  554.  
  555. /* CHAT */
  556.  
  557. ul.chat{
  558. list-style:none;
  559. margin-left:-40px;
  560. }
  561.  
  562. .chat span {
  563. float: left;
  564. }
  565.  
  566. /* QUOTES */
  567.  
  568. .quote{
  569. font-size:20px;
  570. line-height:150%;
  571. }
  572.  
  573. .quotesource{
  574. text-align:right;
  575. margin-bottom:10px;
  576. }
  577.  
  578. /* QUESTIONS */
  579.  
  580.  
  581. .q {
  582. width:auto; height:auto;
  583. background-color:{color:container};
  584. border-radius:5px 5px 0px 0px;
  585. margin-bottom:10px;
  586. padding:10px;
  587. text-align:center;
  588. }
  589. .as {
  590. font-weight:bold;
  591. text-align:center;
  592. font-family:poppins;
  593. }
  594.  
  595. .a {
  596. margin-top:10px;
  597. }
  598.  
  599. /* AUDIO */
  600.  
  601. .songart{
  602. float:left;
  603. margin-right:10px;
  604. }
  605.  
  606. .songart img{
  607. width:80px;
  608. height:80px;
  609. }
  610.  
  611. .songtitle{
  612. margin-bottom:10px;
  613. margin-left:90px;
  614. }
  615.  
  616. .songauthor{
  617. margin-bottom:10px;
  618. font-size:8px;
  619. margin-left:90px;
  620. }
  621.  
  622. .tumblr_audio_player {
  623. height: 50px;
  624. }
  625.  
  626. /* ------------------------- PAGINATION ------------------------- */
  627.  
  628. #pagination{
  629. position:static;
  630. margin-top:30px;
  631. text-align:center;
  632. }
  633.  
  634. .pagibutton{
  635. position:relative;
  636. display:inline-block;
  637. background:transparent;
  638. padding:10px;
  639. border-radius:15px;
  640. color:{color:text};
  641. font-size:20px;
  642. margin-top:-10px;
  643. }
  644.  
  645.  
  646. /* -- ADMIN POP-UP INFORMATION! -- */
  647.  
  648. /* --- hi! this is the box u see in
  649. the sidebar. edit however u want. --- */
  650.  
  651. .admins {
  652. width:120px; height:25px; padding:5px;
  653. background-color:{color:posts};
  654. position:absolute;
  655. top:180px; bottom:0px; left:70px; right:0px;
  656. border-radius:7px; opacity:.8;
  657. }
  658.  
  659. .adminst {
  660. margin-top:-2px; font-size:9px;
  661. text-align:center; line-height:150%;
  662. }
  663.  
  664.  
  665. /* --- hi! this is the actual pop-up box,
  666. box topper, etc. be careful when
  667. editing it. --- */
  668. .popup_block{
  669. display:none;
  670. background:{color:container};
  671. padding:20px 20px 0px 20px;
  672. border-radius:5px;
  673. float:left;
  674. position:fixed;
  675. top:50%;left:50%;
  676. z-index: 99999;
  677. -webkit-box-shadow: 0px 0px 20px #000
  678. -moz-box-shadow: 0px 0px 20px #000;
  679. box-shadow: 0px 0px 20px #000;
  680. width:300px; height:auto;
  681. }
  682.  
  683. .box1top {
  684. width:330px; height:10px;
  685. padding:5px; background-color:{color:noti top};
  686. position:absolute;
  687. top:-10px; bottom:0px; left:0px; right:0px;
  688. border-radius:5px 5px 0px 0px;
  689. }
  690.  
  691. *html #fade {position: absolute;}
  692. *html .popup_block {position: absolute;}
  693. #fade {
  694. display:none;
  695. position:fixed;
  696. left:0px;
  697. top:0px;
  698. width:100%;
  699. height:100%;
  700. z-index:9999;
  701. background:#000;
  702. opacity:0.5;
  703. }
  704.  
  705.  
  706. /* --- hi! this is the actual admin
  707. information blurbs, be really
  708. careful when if u edit bc they're
  709. a bit fickle.
  710.  
  711. QUICK CHEAT SHEET:
  712. ADMINB - LEFT ADMIN BOX
  713. ADMINQ - LEFT ADMIN TEXT BOX
  714. ADMINC - LEFT ADMIN IMAGE
  715. ADMIND - RIGHT ADMIN BOX
  716. ADMINR - RIGHT ADMIN TEXT BOX
  717. ADMINE - RIGHT ADMIN IMAGE --- */
  718.  
  719. #adminb {
  720. width:300px;
  721. height:100px; /* i restricted the height of each section just so it would match up with the icons, it will scroll automatically if your text is longer - but you don’t have to include this bit if you don’t want to */
  722. background-color: transparent;
  723. padding-bottom:5px;
  724. margin-bottom:10px;
  725. margin-left:10px;
  726. margin-top:10px;
  727. overflow:none; }
  728.  
  729. .adminq {
  730.  
  731. font-size:10px;
  732. padding:0px 0px 0px 15px;
  733. width:190px; height:80px;
  734. overflow:auto;
  735. }
  736.  
  737. .adminq h1 {
  738. font-size:11px;
  739. text-transform:uppercase;
  740. }
  741.  
  742. #adminc img {
  743. float:left; /* you can change this to right if you prefer your image on the other side */
  744. margin-left:4px;
  745. margin-top:4px;
  746. border:5px solid {color:accent 1}; /* icon border color */
  747. border-radius:100%;
  748. width:55px;
  749. height:55px;
  750. padding:5px;
  751. -webkit-transition:all 0.3s ease-out;
  752. -moz-transition:all 0.3s ease-out;
  753. transition:all 0.3s ease-out; }
  754.  
  755. /* the section below is completely optional, but it’s just an additional style option for an effect when you hover over an image */
  756.  
  757. #adminc:hover img {
  758. border:5px solid {color:posts}; /* icon border hover color */
  759. -webkit-transition:all 0.5s ease-out;
  760. -moz-transition:all 0.5s ease-out;
  761. transition:all 0.5s ease-out; }
  762.  
  763. #admind {
  764. width:300px;
  765. height:100px; /* i restricted the height of each section just so it would match up with the icons, it will scroll automatically if your text is longer - but you don’t have to include this bit if you don’t want to */
  766. background-color: transparent;
  767. padding-bottom:5px;
  768. margin-bottom:10px;
  769. margin-left:10px;
  770. margin-top:-8px;
  771. overflow:none; }
  772.  
  773. .adminr {
  774.  
  775. font-size:10px;
  776. padding:0px 0px 15px 0px;
  777. width:190px; height:80px;
  778. overflow:auto;
  779. }
  780.  
  781. .adminr h1 {
  782. font-size:11px;
  783. text-transform:uppercase;
  784. }
  785.  
  786. #admine img {
  787. float:right; /* you can change this to right if you prefer your image on the other side */
  788. margin-right:16px;
  789. margin-top:4px;
  790. border:5px solid {color:accent 1}; /* icon border color */
  791. border-radius:100%;
  792. width:55px;
  793. height:55px;
  794. padding:5px;
  795. -webkit-transition:all 0.3s ease-out;
  796. -moz-transition:all 0.3s ease-out;
  797. transition:all 0.3s ease-out; }
  798.  
  799. /* the section below is completely optional, but it’s just an additional style option for an effect when you hover over an image */
  800.  
  801. #admine:hover img {
  802. border:5px solid {color:posts}; /* icon border hover color */
  803. -webkit-transition:all 0.5s ease-out;
  804. -moz-transition:all 0.5s ease-out;
  805. transition:all 0.5s ease-out; }
  806.  
  807.  
  808. /* NOTIFICATION / SMALL 'WINDOW' DETAILS
  809. editing "notificationtop", "notificationtext",
  810. and "notificationdot" will mess with multiple
  811. aspects of the theme, not just the header
  812. notification box. keep that in mind b4
  813. you decide to get into it !! */
  814.  
  815. .notificationbox {
  816. background-color:{color:noti background};
  817. opacity:.9;
  818. width:250px; height:70px;
  819. position:fixed; margin:auto;
  820. top:0px; bottom:420px; left:450px; right:0px;
  821. border-radius:0px 0px 7px 7px;
  822. }
  823.  
  824. .notificationtop {
  825. background-color:{color:noti top};
  826. width:240px; height:10px;
  827. padding:5px; z-index:2;
  828. position:fixed; margin:auto;
  829. top:0px; bottom:510px; left:450px; right:0px;
  830. border-radius:7px 7px 0px 0px;
  831. }
  832.  
  833. .notificationtext {
  834. color:{color:noti title}; font-size:9px;
  835. font-family:'quicksand';
  836. text-align:center;
  837. margin-top:-11px;
  838. text-transform:uppercase;
  839. letter-spacing:1px;
  840. font-weight:bold;
  841. }
  842.  
  843. .notificationdot {
  844. border-radius:100%;
  845. height:7px; width:7px;
  846. background-color:{color:accent 1};
  847. margin-top:2px; margin-left:2px;
  848. }
  849.  
  850. .th-bell-o {
  851. color:{color:noti text}; font-size:30px;
  852. margin-left:20px; margin-top:17px;
  853. opacity:.9;
  854. }
  855.  
  856. .notificationhr {
  857. height:47px; width:1px;
  858. background-color:{color:noti text};
  859. margin-top:-40px; margin-left:67px;
  860. opacity:.2;
  861. }
  862.  
  863. #notificationtext {
  864. color:{color:noti text}; font-size:9px;
  865. font-family:'quicksand';
  866. width:155px; height:50px;
  867. overflow:auto;
  868.  
  869. margin-top:-50px; margin-left:82px;
  870. line-height:150%; text-align:left;
  871. }
  872.  
  873.  
  874. /* TAB TWO - INBOX TAB */
  875.  
  876. .inboxpic {
  877. background-color:#c6c6c6;
  878. width:450px; height:200px;
  879. border-radius:3px;
  880. float:right; margin-right:35px;
  881. }
  882.  
  883. .inboxpic img {
  884. width:450px; height:200px;
  885. border-radius:3px;
  886. }
  887.  
  888. .inboxnoti {
  889. width:260px; height:110px;
  890. background-color:{color:container};
  891. border-radius:0px 0px 7px 7px;
  892. opacity:.9; margin-left:35px;
  893. margin:auto; position:absolute;
  894. top:220px; bottom:0px; left:0px; right:0px;
  895. }
  896.  
  897. .inboxtop {
  898. background-color:{color:noti top};
  899. width:250px; height:10px;
  900. padding:5px; z-index:2;
  901. border-radius:7px 7px 0px 0px;
  902. margin:auto; position:absolute;
  903. top:100px; bottom:0px; left:0px; right:0px;
  904. }
  905.  
  906. .th-chat-bubbles {
  907. color:{color:noti text}; font-size:60px;
  908. margin-left:25px; margin-top:25px;
  909. opacity:.9; float:left;
  910. }
  911.  
  912. .inboxhr {
  913. height:70px; width:1px;
  914. background-color:{color:noti text};
  915. margin-left:102px; margin-top:22px;
  916. opacity:.2;
  917. }
  918.  
  919. .inboxbod {
  920. width:130px; height:85px;
  921. overflow:auto;
  922. line-height:150%; text-align:left;
  923. color:{color:noti text};
  924. font-size:9px; font-family:quicksand;
  925. float:right; margin-top:-80px; margin-right:10px;
  926. }
  927.  
  928. .inboxbod h1 {
  929. color:{color:noti text};
  930. font-size:9px; font-family:Ubuntu Mono;
  931. }
  932.  
  933.  
  934. /* NAV TAB */
  935.  
  936. .npic {
  937. width:350px; height:350px;
  938. background-color:#101010;
  939. z-index:1; overflow:hidden;
  940. border-radius:0px 0px 5px 5px;
  941. margin-top:30px; margin-left:53px;
  942. background-image:url('{image:nav1}');
  943. }
  944.  
  945. .npictop {
  946. background-color:{color:noti top};
  947. width:340px; height:10px;
  948. padding:5px; z-index:2;
  949. border-radius:7px 7px 0px 0px;
  950. margin:auto; position:absolute;
  951. top:35px; bottom:395px; left:-15px; right:0px;
  952. }
  953.  
  954. .nmain {
  955. position:absolute;
  956. top:100px; bottom:0px; left:115px; right:0px;
  957. text-align:center;
  958. width:230px; height:100px;
  959. z-index:11111;
  960. }
  961.  
  962. .nmain a {
  963. background:{color:posts}; color:{color:text};
  964. opacity:.8;
  965. border-radius:5px;
  966. width:25px; height:25px;
  967. line-height:14px;
  968. padding:17px 16px 16px 16px;
  969. text-align:center; display:inline-block;
  970. font-size:20px;
  971. margin:7px; text-transform:uppercase;
  972. }
  973.  
  974. .nmain a:hover {
  975. opacity:1; color:{color:accent 1};
  976. }
  977.  
  978.  
  979. /* pwease don't touch ty */
  980. #cred {
  981. width:15px; height:15px;
  982. position:bottom;
  983. background-color:#222;
  984. padding:5px;
  985. border-radius:5px;
  986.  
  987. position:fixed;
  988. bottom:0px; right:0px;
  989. }
  990.  
  991. .credit {
  992. margin-top:3px; margin-left:3px;
  993. }
  994.  
  995. .credit a {
  996. color:#fff; text-decoration:none;
  997. }
  998.  
  999.  
  1000.  
  1001. /* --------------------------- Custom CSS -------------------------- */
  1002. {CustomCSS}
  1003. </style>
  1004. </head>
  1005. <body>
  1006. <div class="topper">
  1007. <div id="dot1"></div><div id="dot2"></div><div id="dot3"></div>
  1008. </div>
  1009. <div id="headerimg">
  1010. <div class="notificationtop">
  1011. <div class="notificationdot"></div>
  1012. <div class="notificationtext">
  1013. {text:header title}
  1014. </div>
  1015. </div>
  1016. <div class="notificationbox">
  1017. <span class="th th-bell-o"></span>
  1018. <div class="notificationhr"></div>
  1019. <div id="notificationtext">
  1020. {text:header text}
  1021. </div>
  1022.  
  1023.  
  1024.  
  1025. </div>
  1026. </div>
  1027. <div id="bigcon">
  1028.  
  1029.  
  1030. <!--TOPBAR-->
  1031.  
  1032. <div class="sidebarback"></div>
  1033.  
  1034. <div class="sidebartopper"><div class="notificationdot"></div>
  1035. <div class="notificationtext">{text:sidebar title}</div>
  1036. </div>
  1037.  
  1038. {block:ifadmins}
  1039. <div class="admins"><div class="adminst"><a href="#?w=300" rel="box1" class="poplight">click here</a> to<BR>meet the admins!</div></div>
  1040. {/block:ifadmins}
  1041.  
  1042. <div class="sidebar"></div>
  1043.  
  1044. <div class="nav">
  1045. <div id="navbar">
  1046. <div class="tabs">
  1047. <ul class="tab-links">
  1048. <li class="active" style="margin-left:-30px">
  1049. <a href="#tab1"><span class="th th-reload"></span></a></li>
  1050. <li><a href="#tab2"><span class="th th-envelope-o"></span></a></li>
  1051. <li><a href="{text:sidebar link}"><span class="th th-settings-o"></span></a></li>
  1052. <li><a href="#tab4"><span class="th th-earth-o"></span></a></li>
  1053. </ul>
  1054. </div>
  1055. </div>
  1056. </div>
  1057.  
  1058. <div id="sidebar">
  1059.  
  1060. <div class="blogtitle">
  1061. <a href="/">{Title}</a>
  1062. </div>
  1063.  
  1064. <div class="description">{description}</div>
  1065.  
  1066.  
  1067.  
  1068. </div>
  1069.  
  1070.  
  1071. <!-- --------------------------- TABS -------------------------- -->
  1072.  
  1073.  
  1074. <div class="tabs">
  1075.  
  1076.  
  1077. <!-- --------------------------- TAB 1 -------------------------- -->
  1078.  
  1079. <div class="tab-content">
  1080. <div id="tab1" class="tab active">
  1081.  
  1082. <div id="postcontainer">
  1083.  
  1084. {block:Posts}
  1085. <article>
  1086.  
  1087. <!--TEXT POST-->
  1088. {block:Text}
  1089. {block:Title}
  1090. <h1 class="title">
  1091. <a href="{Permalink}">{Title}</a></h1>
  1092. {/block:Title}
  1093. {Body}
  1094. {/block:Text}
  1095.  
  1096.  
  1097. <!--PHOTO POST-->
  1098. {block:Photo}
  1099. {block:IndexPage}
  1100. {LinkOpenTag}
  1101. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1102. {LinkCloseTag}
  1103. {/block:IndexPage}
  1104. {block:PermalinkPage}
  1105. {LinkOpenTag}
  1106. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1107. {LinkCloseTag}{/block:PermalinkPage}
  1108. {/block:Photo}
  1109.  
  1110.  
  1111. <!--PHOTOSET POST-->
  1112. {block:Photoset}
  1113. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  1114. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  1115. {/block:Photoset}
  1116.  
  1117.  
  1118. <!--QUOTE POST-->
  1119. {block:Quote}
  1120. <div class="quote">{Quote}</div>
  1121. {block:Source}
  1122. <div class="quotesource">{Source}</div>
  1123. {/block:Source}
  1124. {/block:Quote}
  1125.  
  1126.  
  1127. <!--LINK POST-->
  1128. {block:Link}
  1129. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  1130. {block:Description}{Description}{/block:Description}
  1131. {/block:Link}
  1132.  
  1133.  
  1134. <!--CHAT POST-->
  1135. {block:Chat}
  1136. <ul class="chat">
  1137. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  1138. </ul>
  1139. {/block:Chat}
  1140.  
  1141.  
  1142. <!--AUDIO POST-->
  1143. {block:Audio}
  1144. {block:AlbumArt}
  1145. <div class="songart">
  1146. <img src="{AlbumArtURL}">
  1147. </div>
  1148. {/block:AlbumArt}
  1149. <div class="songtitle">
  1150. {block:TrackName}
  1151. {TrackName}
  1152. {/block:TrackName}
  1153. </div>
  1154. <div class="songauthor">
  1155. By
  1156. {block:Artist}
  1157. {Artist}
  1158. {/block:Artist}
  1159. </div>
  1160. {AudioPlayerWhite}
  1161. {/block:Audio}
  1162.  
  1163.  
  1164. <!--VIDEO POST-->
  1165. {block:Video}
  1166. <div class="video">
  1167. <div class="video-player">{Video-500}</div>
  1168. {/block:Video}
  1169.  
  1170.  
  1171. <!--ANSWER POST-->
  1172. {block:Answer}
  1173. <div class="q">
  1174. <div class="as">{Asker} said: </div>
  1175. {Question}</div>
  1176. <div class="a">{Answer}</div>
  1177. {/block:Answer}
  1178.  
  1179. <!--CAPTIONS-->
  1180. {block:Ifhidecaptions}
  1181. {block:permalink}
  1182. {block:Caption}
  1183. {Caption}
  1184. {/block:Caption}
  1185. {/block:permalink}
  1186. {/block:Ifhidecaptions}
  1187. {block:Ifnothidecaptions}
  1188. {block:Caption}
  1189. {Caption}
  1190. {/block:Caption}
  1191. {/block:Ifnothidecaptions}
  1192.  
  1193. <!--POST INFORMATION-->
  1194. <div class="postinfo">
  1195.  
  1196. <div class="permalinks">
  1197. <div class="date"><a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a></div>
  1198. <div class="reblogs">{block:RebloggedFrom}
  1199. <a href="{ReblogParentURL}">via;</a>
  1200. <a href="{ReblogRootURL}">source;</a>
  1201. {/block:RebloggedFrom} <a href="{ReblogURL}">reblog</a></div>
  1202. </div>
  1203.  
  1204.  
  1205. <!--TAGS-->
  1206. {block:HasTags}
  1207. <div class="tags">
  1208. {block:Tags}
  1209. <a href="{TagURL}">#{Tag},</a>
  1210. {/block:Tags}
  1211. </div>
  1212. {/block:HasTags}
  1213.  
  1214. </div>
  1215.  
  1216.  
  1217.  
  1218.  
  1219. </article>
  1220. {/block:Posts}
  1221. <!--Close of article-->
  1222.  
  1223.  
  1224. <!--PAGINATION-->
  1225. {block:Pagination}
  1226. <div class="pagination">
  1227. {block:PreviousPage}
  1228. <a href="{PreviousPage}">
  1229. <div class="pagibutton">backward</div></a>
  1230. {/block:PreviousPage}
  1231. {block:NextPage}
  1232. <a href="{NextPage}">
  1233. <div class="pagibutton">forward</div></a>
  1234. {/block:NextPage}
  1235. </div>
  1236. {/block:Pagination}
  1237.  
  1238. </div>
  1239.  
  1240. </div>
  1241.  
  1242. <!-- -------------------------- INBOX TAB -------------------------- -->
  1243.  
  1244. <div id="tab2" class="tab">
  1245. <div class="tabcontent">
  1246.  
  1247. <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>
  1248.  
  1249. <div class="inboxpic"><img src="{image:inbox}"/>
  1250. <div class="inboxtop"><div class="notificationdot"></div>
  1251. <div class="notificationtext">{text:inbox title}</div>
  1252. </div>
  1253. <div class="inboxnoti">
  1254.  
  1255. <span class="th th-chat-bubbles"></span>
  1256. <div class="inboxhr"></div>
  1257.  
  1258. <div class="inboxbod">
  1259. {text:inbox text}
  1260. </div>
  1261.  
  1262. </div>
  1263. </div>
  1264.  
  1265.  
  1266. </div>
  1267. </div>
  1268.  
  1269.  
  1270. <!-- -------------------------- TAB 3 -------------------------- -->
  1271.  
  1272. <div id="tab3" class="tab">
  1273. <div class="tabcontent">
  1274.  
  1275.  
  1276. </div>
  1277. </div>
  1278.  
  1279.  
  1280. <!-- -------------------------- TAB 4 -------------------------- -->
  1281.  
  1282. <div id="tab4" class="tab">
  1283.  
  1284. <div class="nmain">
  1285. <a href="{text:link 1}" title="{text:link 1 title}"><span class="th th-quote-up-o"></span></a>
  1286. <a href="{text:link 2}" title="{text:link 2 title}"><span class="th th-users-o"></span></a>
  1287. <a href="{text:link 3}" title="{text:link 3 title}"><span class="th th-push-pin-o"></span></a>
  1288. <a href="{text:link 4}" title="{text:link 4 title}"><span class="th th-folder-3-o"></span></a>
  1289. <a href="{text:link 5}" title="{text:link 5 title}"><span class="th th-settings-o"></span></a>
  1290. <a href="{text:link 6}" title="{text:link 6 title}"><span class="th th-telescope-o"></span></a>
  1291. <a href="{text:link 7}" title="{text:link 7 title}"><span class="th th-bookmark-1-o"></span></a>
  1292. <a href="{text:link 8}" title="{text:link 8 title}"><span class="th th-agenda-o"></span></a>
  1293. <a href="{text:link 9}" title="{text:link 9 title}"><span class="th th-app-o"></span></a>
  1294. </div>
  1295.  
  1296. <div class="npictop"><div class="notificationdot"></div>
  1297. <div class="notificationtext">{text:navi title}</div>
  1298. </div>
  1299. <div class="npic">
  1300. </div>
  1301. </div>
  1302.  
  1303. </div>
  1304. </div>
  1305.  
  1306.  
  1307.  
  1308.  
  1309.  
  1310. <!-- END OF TABS -->
  1311.  
  1312. </div>
  1313.  
  1314. </div>
  1315. </div>
  1316. </div>
  1317.  
  1318. <div id="cred"><div class="credit"><a title="theme credit" href="http://jungjnsoul.tumblr.com/"><span class="th th-code"></span></a></div></div>
  1319.  
  1320.  
  1321. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1322.  
  1323. <script>
  1324. $(document).ready(function() {
  1325. $('.tabs .tab-links a').on('click', function(e) {
  1326. var currentAttrValue = $(this).attr('href');
  1327.  
  1328. // Show/Hide Tabs
  1329. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1330.  
  1331. // Change/remove current tab to active
  1332. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1333.  
  1334. e.preventDefault();
  1335. });
  1336. });
  1337. </script>
  1338.  
  1339.  
  1340. <script>
  1341. $(document).ready(function() {
  1342. $('#filterOptions li a').click(function() {
  1343. // fetch the class of the clicked item
  1344. var ourClass = $(this).attr('class');
  1345.  
  1346. // reset the active class on all the buttons
  1347. $('#filterOptions li').removeClass('active');
  1348. // update the active state on our clicked button
  1349. $(this).parent().addClass('active');
  1350.  
  1351. if(ourClass == 'all') {
  1352. // show all our items
  1353. $('#ourHolder').children('div.item').show();
  1354. }
  1355. else {
  1356. // hide all elements that don't share ourClass
  1357. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1358. // show all elements that do share ourClass
  1359. $('#ourHolder').children('div.' + ourClass).show();
  1360. }
  1361. return false;
  1362. });
  1363. });
  1364. </script>
  1365.  
  1366.  
  1367.  
  1368.  
  1369. </body>
  1370.  
  1371. <!-- ADMIN POPUP -->
  1372.  
  1373. <div id="box1" class="popup_block">
  1374. <div class="box1top"><div class="notificationdot"></div>
  1375. <div class="notificationtext">MEET THE ADMINS <i>!</i></div>
  1376. </div>
  1377.  
  1378. <!-- admin left -->
  1379. <div id="adminb">
  1380. <div id="adminc">
  1381. <img src="https://static.tumblr.com/wm8fzgp/pwppprnte/admin.gif" /></div>
  1382. <div class="adminq">
  1383. <h1>admin's name / alias</h1>admin info here. i made these boxes scrollable, as u can tell. but i kinda like them short. do whatever u want tho!</div></div>
  1384. <!-- end -->
  1385.  
  1386. <!-- admin right -->
  1387. <div id="admind">
  1388. <div id="admine">
  1389. <img src="https://static.tumblr.com/wm8fzgp/o1Dpprmh2/55.png" /></div>
  1390. <div class="adminr">
  1391. <h1>pop-up details</h1>hi! read me! this whole pop-up will automatically adjust to however many admin things u put on here.</div></div>
  1392. <!-- end -->
  1393.  
  1394. <!-- admin left -->
  1395. <div id="adminb">
  1396. <div id="adminc">
  1397. <img src="https://static.tumblr.com/wm8fzgp/gcEpprnth/admin2.gif" /></div>
  1398. <div class="adminq">
  1399. <h1>how to edit these</h1>use ctrl+f to find "admin popup," that'll bring you to everything you need! to add more boxes, copy paste everything from "admin left" to "end" OR "admin right" to "end".</div></div>
  1400. <!-- end -->
  1401.  
  1402. </div>
  1403. </div></div>
  1404.  
  1405. </div></div></div></div></div></div></div></div></div></div>
  1406.  
  1407. </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!