API tools faq
paste
Advertisement
tiffxny21

multi muse update //

tiffxny21
Dec 27th, 2019
203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.54 KB | None | 0 0
raw download clone embed print report
  1. <!-- code by whitley -->
  2.  
  3. <html>
  4. <head>
  5.  
  6.  
  7.  
  8. <script type="text/javascript" src=
  9. "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
  10. </script><script type="text/javascript">
  11. //<![CDATA[
  12. $(document).ready(function() {
  13. //
  14. $('a.poplight[href^=#]').click(function() {
  15. var popID = $(this).attr('rel'); //Get Popup Name
  16. var popURL = $(this).attr('href'); //Get Popup href to define size
  17. var query= popURL.split('?');
  18. var dim= query[1].split('&');
  19. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  20. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  21. var popMargTop = ($('#' + popID).height() + 80) / 2;
  22. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  23. //Applyoy Margin to Popup
  24. $('#' + popID).css({
  25. 'margin-top' : -popMargTop,
  26. 'margin-left' : -popMargLeft
  27. });
  28. $('body').append('<div id="fade"><\/div>');
  29. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  30. return false;
  31. });
  32. $('a.close, #fade').live('click', function() {
  33. $('#fade , .popup_block, .ask_block').fadeOut(function() {
  34. $('#fade, a.close').remove(); //fade them both out
  35. });
  36. return false;
  37. });
  38. });
  39. //]]>
  40. </script>
  41.  
  42.  
  43.  
  44. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  45. <script type="text/javascript">
  46. $(document).ready(function(){
  47. $(".links_body").hide();
  48. $(".links_head").click(function(){
  49. $(this).next(".links_body").slideToggle('fast');
  50. }); }); </script>
  51. <style type="text/css">
  52. .links_list { margin:0px; padding:0px; width:100%;}
  53. .links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;}
  54. .links_body { padding:10px; text-align:left; display:none;}
  55. </style>
  56.  
  57. <link rel="stylesheet" href="https://use.typekit.net/ave5mjm.css">
  58.  
  59. <link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
  60. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  61. <link href="https://fonts.googleapis.com/css?family=Paytone+One&display=swap" rel="stylesheet">
  62. <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
  63. <link href="https://fonts.googleapis.com/css?family=Bitter&display=swap" rel="stylesheet">
  64. <link href="https://fonts.googleapis.com/css?family=Ruthie&display=swap" rel="stylesheet">
  65. <link href="https://fonts.googleapis.com/css?family=Mr+De+Haviland&display=swap" rel="stylesheet">
  66.  
  67.  
  68.  
  69. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  70. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  71. <script>
  72. (function($){
  73. $(document).ready(function(){
  74. $("a[title]").style_my_tooltips({
  75. tip_follows_cursor:true,
  76. tip_delay_time:50,
  77. tip_fade_speed:200,
  78. attribute:"title"
  79. });
  80. });
  81. })(jQuery);
  82. </script>
  83.  
  84.  
  85. <script src="https://kit.fontawesome.com/2b37e2f836.js"></script>
  86.  
  87. <link rel="shortcut icon" href="{Favicon}" />
  88. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  89. <title>{Title}</title>
  90. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  91.  
  92.  
  93. <meta name="color:background" content="#656565">
  94. <meta name="color:pre" content="#656565">
  95.  
  96.  
  97. <meta name="color:text" content="#dadada" />
  98. <meta name="color:link hover" content="#ffffff" />
  99. <meta name="color:link" content="#c66262" />
  100. <meta name="color:Bold" content="#da938d" />
  101. <meta name="color:Italic" content="#d4b175"/>
  102. <meta name="color:container" content="#525252" />
  103. <meta name="color:border" content="#282828" />
  104. <meta name="color:outline" content="#282828" />
  105. <meta name="color:shadow" content="#000000" />
  106. <meta name="color:chatone" content="#3e3e3e" />
  107. <meta name="color:chattwo" content="#313131" />
  108.  
  109.  
  110. <meta name="image:infoimage" content="https://storage.needpix.com/rsynced_images/rose-grayscale.jpg"/>
  111. <meta name="image:munpic" content="http://placehold.jp/200x250.png"/>
  112. <meta name="image:navpic" content="https://via.placeholder.com/402x201.png"/>
  113. <meta name="image:aboutpic" content="http://placehold.jp/200x250.png"/>
  114. <meta name="image:background" content=""/>
  115. <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
  116.  
  117.  
  118. </head>
  119.  
  120.  
  121. <style type="text/css">
  122.  
  123.  
  124. .tooltip{
  125. display: inline;
  126. position: relative;}
  127.  
  128.  
  129. iframe.tmblr-iframe {
  130. top:0!important;
  131. right:0!important;
  132. opacity:0;
  133. transform:scale(0.8);
  134. transform-origin:100% 0;
  135. -webkit-transform-origin:100% 0;
  136. -o-transform-origin:100% 0;
  137. -moz-transform-origin:100% 0;
  138. z-index:1000000000000000000888800000000000000000999999999999999999999999999900000000009999
  139. }
  140.  
  141. iframe.tmblr-iframe:hover {
  142. opacity:0.6!important;
  143. -moz-transition-duration:.9s;
  144. -webkit-transition-duration:.9s;
  145. -o-transition-duration:.9s;
  146. }
  147.  
  148. .hcontrols {
  149. position:fixed;
  150. top:0;
  151. right:0;
  152. z-index:999999999;}
  153.  
  154.  
  155. .iframe-controls-container
  156. {;
  157. }
  158.  
  159.  
  160.  
  161. #s-m-t-tooltip {
  162. padding:6px;
  163. width:auto;
  164. max-width:300px;
  165. text-shadow:
  166. 1px 1px 0px #000,
  167. 1px -1px 0px #000,
  168. -1px -1px 0px #000,
  169. -1px 1px 0px #000,
  170. 0px 1px 0px #000,
  171. 0px -1px 0px #000,
  172. 1px 0px 0px #000,
  173. -1px 0px 0px #000,
  174. 0px 0px 5px #000;
  175. border: 1px solid {color:border}; outline: 1px solid {color:outline}; outline-offset: 3px;padding-top:5px; display:block; padding-bottom:5px; width:auto; font-size:11px; font-family:verdana;margin-top:10px; text-transform:uppercase; border-radius:0px; background: {color:chatone} url('{image:infoimage}');background-attachment:fixed; text-align:center;
  176.  
  177. z-index:99999999999999999999999999999999999999999999999999999;
  178. transition:0.7s ease-in-out;
  179. -o-transition:0.7s ease-in-out;
  180. -ms-transition:0.7s ease-in-out;
  181. -moz-transition:0.7s ease-in-out;
  182. -webkit-transition:0.7s ease-in-out;
  183. }
  184.  
  185.  
  186.  
  187.  
  188. body {
  189. color:{color:text};
  190. background: {color:background} url('{image:background}') no-repeat fixed 0% 0%;
  191. font-family:verdana;
  192. font-size:11px;
  193. line-height:17px;
  194. text-align:justify;
  195. overflow-x:hidden;
  196. }
  197.  
  198. a:link, a:active, a:visited{color: {color:link};text-transform:uppercase; text-decoration:none}
  199.  
  200. a:hover {
  201. color:{color:link hover}; -moz-transition-duration:.9s;
  202. -webkit-transition-duration:.9s;
  203. -o-transition-duration:.9s;}
  204.  
  205. small{font-size:11px}
  206.  
  207. big{font-size:14px}
  208.  
  209. b, strong{
  210. color:{color:bold};
  211. text-transform:uppercase;
  212. }
  213.  
  214. a{
  215.  
  216. }
  217.  
  218. p b {
  219. font-size:13px;
  220. }
  221.  
  222.  
  223. p i {
  224. font-size:13px;
  225. }
  226.  
  227.  
  228. h1 {font-size:15px;}
  229.  
  230. i, italic, em {
  231. font-family: 'Ruthie', cursive;
  232. font-size: 15px;
  233. font-weight:900;
  234. text-transform: italic;
  235. line-height:90%;
  236. color:{color:italic};
  237. text-shadow:0px 0px 4px #b2b2b2;
  238. text-transform:none;
  239. letter-spacing:1px;
  240.  
  241. }
  242.  
  243. p{margin-top:6px; margin-bottom:6px}
  244.  
  245. blockquote {
  246. margin:5px 5px 5px 10px;
  247. padding:2px 5px;
  248. border-left:3px solid #555675;
  249. }
  250.  
  251. img a{border:none; width:100%;}
  252.  
  253. p {
  254. margin-bottom:15px;
  255. margin-top:5px;
  256. }
  257.  
  258. hr {
  259. width:100%;
  260. margin-top:3px;
  261. margin-bottom:3px;
  262. height:2px;
  263. border:none;
  264. background: {color:chatone} url({image:infoimage});
  265. background-attachment:fixed;
  266. background-repeat:repeat;
  267. }
  268.  
  269.  
  270. h1 {font-size:30px;
  271. font-family: 'Lexend Deca', sans-serif;
  272. color: {color:bold};
  273. text-align:center;
  274. text-transform:uppercase;
  275. line-height:90%;
  276. letter-spacing:0px;
  277. text-align:center;
  278. text-shadow:none;}
  279.  
  280. h2 {text-align:center; font-size:22px;
  281. color:{color:italic};
  282. font-weight:bold;
  283. line-height:90%;
  284. margin-bottom:-5px;
  285. text-align: center;
  286. text-transform:uppercase;
  287. text-shadow: 0px 1px 1px {color:shadow} ;
  288. font-family: 'Lexend Deca', sans-serif;
  289. line-height:30px;
  290.  
  291. }
  292.  
  293.  
  294.  
  295. .content img {
  296. max-width:100%;
  297. height:auto;
  298. }
  299.  
  300. h3 {text-align:center; font-size:18px;
  301. font-family: 'Bitter', serif;
  302. text-shadow: 0px 1px 1px {color:shadow};
  303. text-align:center;
  304. text-transform:lowercase;
  305. font-style:italic;
  306. line-height:130%;
  307. font-size:14px;
  308. letter-spacing:0px;
  309. padding-bottom:-10px;
  310. color: {color:italic};
  311. }
  312.  
  313. h4 {border: 1px solid {color:border}; outline: 1px solid {color:outline}; outline-offset: 3px;padding-top:5px; display:block; padding-bottom:5px; width:auto; font-size:9px; font-family:verdana;margin-top:10px; text-transform:uppercase; border-radius:0px; background: {color:chatone} url('{image:infoimage}');background-attachment:fixed; text-align:center; text-shadow:
  314. 1px 1px 0px #000,
  315. 1px -1px 0px #000,
  316. -1px -1px 0px #000,
  317. -1px 1px 0px #000,
  318. 0px 1px 0px #000,
  319. 0px -1px 0px #000,
  320. 1px 0px 0px #000,
  321. -1px 0px 0px #000,
  322. 0px 0px 5px #000;}
  323. h5 {text-align:center;}
  324. h6 {text-align:center;}
  325.  
  326.  
  327.  
  328.  
  329. #container {
  330. scrollbar-width: none;
  331. left: 752px;
  332. top:100px;
  333. margin-left:-164px;
  334. width: 463px;
  335. height:488px;
  336. position:fixed;
  337. background-color:{color:container};
  338. padding-left:3px;
  339. outline: 1px solid {color:outline};
  340. outline-offset:3px;
  341. border: 1px solid {color:border};}
  342.  
  343.  
  344. #entries {
  345. scrollbar-width: none;
  346. left: 752px;
  347. top:101px;
  348. margin-left:-165px;
  349. text-align: justify;
  350. background-color:transparent;
  351. width: 455px;
  352. height:488px;
  353. margin-bottom:0px;
  354. padding-bottom:15px;
  355. position:fixed;
  356. overflow:scroll;
  357. padding-left:3px;
  358. }
  359.  
  360.  
  361.  
  362. #posts p a:hover {font-size:11px; -moz-transition-duration:.9s;
  363. -webkit-transition-duration:.9s;
  364. -o-transition-duration:.9s;}
  365.  
  366.  
  367. ::-webkit-scrollbar {
  368. width: 0px;
  369. background-color: transparent;
  370. }
  371.  
  372. ::-webkit-scrollbar-track {
  373. background-color: transparent
  374. }
  375.  
  376. ::-webkit-scrollbar-thumb {
  377. background-color: transparent;
  378. }
  379.  
  380.  
  381.  
  382.  
  383.  
  384. #posts {
  385. margin: 10px 0 60px 0;
  386. width: 445px;
  387. text-align: justify;
  388. padding: 10px;}
  389.  
  390. #posts img {max-width:100%; height:auto;}
  391.  
  392. #sidebar{
  393. scrollbar-width: none;
  394. position:fixed;
  395. width:452px;
  396. background:{color:container};
  397. padding:7px 7px 0px 7px;
  398. overflow:scroll;
  399. left: 752px;
  400. height:84px;
  401. top:0px;
  402. margin-left:-164px; border: 1px solid {color:border}; outline: 1px solid {color:outline}; outline-offset:3px; {color:container}; margin-bottom:40px; font-size:8px;}
  403.  
  404. #purblock{
  405. scrollbar-width: none;
  406. position:fixed;
  407. width:452px;
  408. background:{color:container};
  409. padding:7px 7px 0px 7px;
  410. overflow:scroll;
  411. left: 752px;
  412. height:84px;
  413. top:0px;
  414. margin-left:-164px; border: 1px solid {color:border}; outline: 1px solid {color:outline}; outline-offset: 3px; {color:container}; margin-bottom:40px; font-size:8px;}
  415.  
  416.  
  417.  
  418. .blueblock {
  419. position:fixed;
  420. width:452px;
  421. background:{color:container};
  422. padding:7px 7px 0px 7px;
  423. overflow:scroll;
  424. left: 752px;
  425. height:84px;
  426. top:0px;
  427. margin-left:-164px;
  428. border: 1px solid {color:border};
  429. outline: 1px solid {color:outline};
  430. outline-offset:3px;
  431. {color:container};
  432. margin-bottom:40px;
  433. font-size:8px;
  434. z-index:1000000000000;
  435.  
  436. }
  437.  
  438.  
  439. #sidebartext{
  440. scrollbar-width: none;
  441. position:fixed;
  442. width:452px;
  443. background:transparent;
  444. padding:0px 7px 7px 7px;
  445. overflow:scroll;
  446. left: 752px;
  447. height:101px;
  448. top:0px;
  449. margin-left:-164px;
  450. margin-bottom:100px;
  451.  
  452. }
  453.  
  454.  
  455. .user_1 {
  456.  
  457. background-color:{color:chatone};
  458. border-left:{color:border};
  459. text-align:left; }
  460.  
  461. .user_2 {
  462.  
  463. background-color:{color:chattwo};
  464. border-right:{color:border};
  465. text-align:right;
  466. }
  467.  
  468.  
  469. .chat ol {
  470. line-height:110%;
  471. }
  472.  
  473.  
  474.  
  475.  
  476. #links a:hover {
  477.  
  478. color:{color:link hover};
  479.  
  480. }
  481.  
  482. #links a
  483. {position: fixed;
  484. color:{color:border};
  485. top:94px;
  486. }
  487.  
  488.  
  489. /*
  490. @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  491. @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  492. @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  493.  
  494. */
  495.  
  496.  
  497. #refresh {
  498. left: 752px;
  499. margin-left: -32px;
  500. margin-top: 486px;
  501. font-size: 30px;
  502. position: absolute;
  503. z-index: 1000000;
  504.  
  505. }
  506.  
  507. #refresh img {
  508. width:30px;
  509. height:auto;
  510. filter: blur(0);
  511.  
  512.  
  513. -moz-transition-duration:.9s;
  514. -webkit-transition-duration:.9s;
  515. -o-transition-duration:.9s;
  516. }
  517.  
  518. #nav {
  519. left: 752px;
  520. margin-top: 486px;
  521. margin-left: 106px;
  522. font-size: 30px;z-index: 1000000;
  523. position:absolute;
  524. }
  525.  
  526. #nav img {
  527. width:30px;
  528. height:auto;
  529. filter: blur(0);
  530.  
  531.  
  532. -moz-transition-duration:.9s;
  533. -webkit-transition-duration:.9s;
  534. -o-transition-duration:.9s;
  535. }
  536.  
  537.  
  538. #pagef {
  539. left: 752px;
  540. margin-left: 240px;
  541. margin-top: 486px;
  542. font-size: 30px;
  543. position: absolute;z-index: 1000000;
  544. }
  545.  
  546. #pagef img {
  547. width:30px;
  548. height:auto;
  549. filter: blur(0);
  550.  
  551.  
  552. -moz-transition-duration:.9s;
  553. -webkit-transition-duration:.9s;
  554. -o-transition-duration:.9s;
  555. }
  556.  
  557. #pagep {
  558. left: 752px;
  559. margin-left: -160px;
  560. margin-top: 486px;
  561. font-size: 30px;z-index: 1000000;
  562. position: absolute;
  563. }
  564.  
  565.  
  566. #pagep img {
  567. width:30px;
  568. height:auto;
  569. filter: blur(0);
  570.  
  571.  
  572.  
  573. -moz-transition-duration:.9s;
  574. -webkit-transition-duration:.9s;
  575. -o-transition-duration:.9s;
  576. }
  577.  
  578.  
  579. #pagep img:hover, #pagef img:hover, #nav img:hover, #refresh img:hover {
  580.  
  581. filter: blur(10px);
  582.  
  583.  
  584. -moz-transition-duration:.9s;
  585. -webkit-transition-duration:.9s;
  586. -o-transition-duration:.9s;
  587.  
  588. }
  589.  
  590.  
  591. #links i
  592. {color: {color:link};
  593. -moz-transition-duration:.9s;
  594. -webkit-transition-duration:.9s;
  595. -o-transition-duration:.9s;
  596.  
  597. }
  598.  
  599. #links i:hover
  600. {color: {color:link hover};
  601. -moz-transition-duration:.9s;
  602. -webkit-transition-duration:.9s;
  603. -o-transition-duration:.9s;
  604.  
  605. }
  606.  
  607.  
  608.  
  609.  
  610. .popup_block{
  611. display:none;
  612. background-image:transparent;
  613. background-repeat: no-repeat;
  614. float:left;
  615. font-family: 'Roboto', sans-serif;
  616. height: 10px;
  617. position:fixed;
  618. z-index: 99999;
  619. overflow-y: scroll;
  620. overflow-x: hidden;
  621. }
  622.  
  623.  
  624. *html #fade {position: absolute;}
  625. *html .popup_block {position: absolute;}
  626.  
  627. #fade {
  628. display:none;
  629. position:fixed;
  630. left:0px;
  631. top:100px;
  632. width:100%;
  633. height:488px;
  634. z-index:9999;
  635. background:{color:background};
  636. opacity:0;
  637. }
  638.  
  639.  
  640. .popcontent {
  641. background: {color:container};
  642. width: 432px;
  643. height:443px;
  644. padding:10px;
  645. top:101px;
  646. left: 752px;
  647. margin-left:-161px;
  648. font-weight:500;
  649. overflow: scroll;
  650. padding-left:12px;
  651. font-size:11px;
  652. position: fixed;
  653. padding-top:35px;
  654. text-align:justify;
  655.  
  656. z-index:1000000000000000000000000000000000000000000000;
  657.  
  658. }
  659.  
  660.  
  661.  
  662.  
  663. .tabslist {
  664.  
  665. scrollbar-width: none;
  666. background:transparent;
  667. padding:0px 9px;
  668. font-weight:500;
  669. font-size:11px;
  670. position: fixed;
  671. overflow-y:scroll;
  672. overflow-x:hidden;
  673. padding-top:20px;
  674.  
  675. text-align:center;
  676. margin-left:-165px;
  677. position:fixed; width:550px; overflow:scroll; left: 702px; height:89px;
  678. overflow-x:hidden;
  679. top:0px;
  680. margin-bottom:0px padding-bottom:0px;
  681.  
  682.  
  683. z-index:100000000000000000000000000000000000000000000; -moz-transition-duration:.9s;
  684. -webkit-transition-duration:.9s;
  685. -o-transition-duration:.9s;}
  686. }
  687. }
  688.  
  689.  
  690. .leftlink {
  691. float:left;
  692. width:75px;
  693. max-width:75px;
  694. text-align:center;
  695. }
  696.  
  697.  
  698.  
  699.  
  700. .rightlink {
  701. float:right;
  702.  
  703. width:75px;
  704. max-width:75px;
  705.  
  706. text-align:center;
  707. }
  708.  
  709.  
  710.  
  711.  
  712.  
  713. #credit{position:fixed; bottom:10px; left:10px; font-size:11px;font-family: 'Pacifico', cursive;;
  714. color:{color:text}; text-transform:uppercase;letter-spacing: 0px; font-style:normal; border: 1px solid transparent; outline: 1px solid transparent; outline-offset:3px; padding:3px;}
  715.  
  716. #info{border: 1px solid {color:border}; height:18px; outline: 1px solid {color:outline};outline-offset:3px;padding-top:5px; border-radius:0px; display:block; padding-bottom:5px; width:auto; font-size:11px; font-family:verdana;margin-top:20px; text-transform:uppercase;background: {color:chatone} url('{image:infoimage}');background-attachment:fixed; text-shadow:
  717. 1px 1px 0px #000,
  718. 1px -1px 0px #000,
  719. -1px -1px 0px #000,
  720. -1px 1px 0px #000,
  721. 0px 1px 0px #000,
  722. 0px -1px 0px #000,
  723. 1px 0px 0px #000,
  724. -1px 0px 0px #000,
  725. 0px 0px 5px #000;}
  726.  
  727. pre { padding-top:6px;
  728. padding:6px;
  729. white-space:pre-wrap;
  730. width:auto;
  731. text-align: center;
  732. word-wrap: break-word;
  733. color:{color:text};
  734. background-color:{color:pre};
  735. border-left:1px solid {color:border};
  736. border-right: 1px solid {color:border};
  737. font-family: 'Montserrat', sans-serif;
  738. text-transform:uppercase;
  739. line-height:100%;
  740. letter-spacing}
  741.  
  742.  
  743. figure {
  744. margin:0px;
  745. }
  746.  
  747.  
  748. .tags
  749. {
  750.  
  751. font-size:8px;
  752. }
  753.  
  754. #info1 {
  755. margin-left:45px;
  756. margin-top:0px;
  757. position:absolute;
  758. font-size:11px;
  759. text-decoration:none;
  760. }
  761.  
  762.  
  763. #info2 {
  764. margin-left:100px;
  765. margin-top:0px;
  766. position:absolute;
  767. font-size:11px;
  768. text-decoration:none;
  769. }
  770.  
  771.  
  772. #info3 {
  773. margin-left:155px;
  774. margin-top:0px;
  775. position:absolute;
  776. font-size:11px;
  777. text-decoration:none;
  778. }
  779.  
  780.  
  781. #info4 {
  782. margin-left:210px;
  783. margin-top:0px;
  784. position:absolute;
  785. font-size:11px;
  786. color:#ddd;
  787. text-decoration:none;
  788. }
  789.  
  790.  
  791. [type=radio]:checked ~ label {
  792. z-index: 2;
  793. color: {color:link hover};
  794.  
  795. border: 1px solid {color:border}; border-radius:0px; background: {color:chatone} url('{image:infoimage}');
  796. -moz-transition-duration:.9s;
  797. -webkit-transition-duration:.9s;
  798. -o-transition-duration:.9s;
  799. }
  800.  
  801. .tab [type=radio] {
  802. display: none;
  803. }
  804.  
  805. .content {
  806. scrollbar-width: none;
  807. background: {color:container};
  808. width: 404px;
  809. overflow-x:hidden;
  810. padding:10px 10px 0px 10px;
  811. left: 752px;
  812. top:101px;
  813. margin-left:-164px;
  814. overflow-y:scroll;
  815. font-weight:500;
  816. padding-left:12px;
  817. font-size:11px;
  818. position: fixed;
  819. padding-top:30px;
  820. padding-bottom:15px;;
  821. text-align:justify;
  822.  
  823. width: 445px;
  824. height:468px;
  825. padding:10px;
  826. left: 752px;
  827. margin-left:-161px;
  828. -moz-transition-duration:.9s;
  829. -webkit-transition-duration:.9s;
  830. -o-transition-duration:.9s;
  831.  
  832. }
  833.  
  834. [type=radio]:checked ~ label ~ .content {
  835. z-index: 1;
  836. }
  837.  
  838.  
  839. .tab {
  840. width:60px;
  841. margin: -20px 2px;
  842. margin-bottom:10px;
  843. display: inline-block;
  844.  
  845. }
  846.  
  847.  
  848. .tab label {
  849. color: {color:bold};
  850. letter-spacing: 2px;
  851. font-size: 8px;
  852. line-height: 14px;
  853. font-weight: bold;
  854. background-color: {color:container};
  855. width:60px;
  856. text-transform: uppercase;
  857. text-align: center;
  858. cursor: pointer;
  859. box-sizing:border-box;
  860. display: block;
  861. margin-bottom: 5px;
  862. padding:5px 10px;
  863. border: 1px solid {color:container};
  864. border-radius:0px;
  865.  
  866. -moz-transition-duration:.9s;
  867. -webkit-transition-duration:.9s;
  868. -o-transition-duration:.9s;}
  869.  
  870.  
  871. }
  872.  
  873. .tab label:hover {
  874. background: {color:bold};
  875. color:{color:link hover};
  876. font-size: 10px;
  877.  
  878. border: 1px solid {color:border}; border-radius:0px; background: {color:chatone} url('{image:infoimage}'); background-attachment:fixed; -moz-transition-duration:.9s;
  879. -webkit-transition-duration:.9s;
  880. -o-transition-duration:.9s;
  881. }
  882.  
  883.  
  884. .tab a {
  885. color;{color:link};
  886. text-align: center;
  887. width:150px;
  888. -moz-transition-duration:.9s;
  889. -webkit-transition-duration:.9s;
  890. -o-transition-duration:.9s;
  891.  
  892. }
  893.  
  894.  
  895.  
  896. .tab a:hover {
  897.  
  898. color;{color:link};
  899. -moz-transition-duration:.9s;
  900. -webkit-transition-duration:.9s;
  901. -o-transition-duration:.2s;
  902.  
  903. }
  904.  
  905.  
  906. ::selection {
  907. background: {color:container};
  908. color: {color:link};/* WebKit/Blink Browsers */
  909. }
  910. ::-moz-selection {
  911. background: {color:container};
  912. color: {color:link};/* WebKit/Blink Browsers */}
  913.  
  914.  
  915.  
  916. .audio{background-color:black; display:block}
  917.  
  918.  
  919. .user_1 .label {color:{color:link}; font-weight:bold}
  920. .user_2 .label {color:{color:link}; font-weight:bold}
  921. .user_3 .label {color:{color:link}; font-weight:bold}
  922.  
  923. ul.chat {
  924. padding:20px 0px
  925. }
  926.  
  927. ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:5px;}
  928.  
  929. .notes img{width:10px; position:relative; top:1px}
  930. ol.notes, .notes li{width:490px; list-style:none; margin:0px 0 -1px 5px; padding:0px}
  931.  
  932.  
  933. .longpic {
  934.  
  935. font-size:10px;
  936. min-height:250px;
  937. margin-top:15px;
  938. margin-bottom:15px;
  939. overflow:hidden;
  940. }
  941.  
  942. .longpic img {
  943. padding: 0px;
  944. width: 200px;
  945. height: 250px;
  946. border-radius:10%;
  947. text-align:justify;
  948. margin-bottom: 40px;
  949.  
  950. }
  951.  
  952.  
  953.  
  954. .shortpic {
  955.  
  956. font-size:11px;
  957. min-height:100px;
  958. margin-top:15px;
  959. margin-bottom:15px;
  960.  
  961. }
  962.  
  963. .shortpic p{
  964. margin-top:-3px;
  965. line-height:130%;
  966. }
  967.  
  968. .shortpic img {
  969. padding: 0px;
  970. width: 100px;
  971. height: 100px;
  972. border-radius:10%;
  973. text-align:justify;
  974. margin-bottom:13px;
  975. }
  976.  
  977.  
  978.  
  979.  
  980.  
  981. .navpic
  982. {
  983. width:402px;
  984. height:auto;
  985. margin-bottom:15px;
  986. border-radius:20px;
  987. }
  988.  
  989.  
  990. .right
  991. {
  992.  
  993. float:right;
  994. margin-left: 11px;
  995. margin-right: 0px;
  996. }
  997.  
  998. .left
  999. {
  1000. margin-left: 0px;
  1001. margin-right: 11px;
  1002.  
  1003. float:left;
  1004. }
  1005.  
  1006.  
  1007. .right img
  1008. {
  1009.  
  1010. float:right;
  1011. }
  1012.  
  1013.  
  1014. .left img
  1015. {
  1016. float: left;
  1017.  
  1018. }
  1019.  
  1020. #pagination {
  1021.  
  1022.  
  1023.  
  1024.  
  1025. }
  1026.  
  1027. .linkbutton{
  1028. text-align:center;
  1029. text-transform:uppercase;
  1030. font-family:'Roboto', sans-serif;
  1031. font-size:9px;
  1032. margin-bottom:15px;
  1033. }
  1034.  
  1035. .linkbutton a {
  1036. width:112px;
  1037. margin-left:4px;
  1038. margin-right:4px;
  1039. margin-top:4px;
  1040. margin-bottom:8px;
  1041. display:inline-block;
  1042. background-color:{color:pre};
  1043.  
  1044. color:{color:text};
  1045. text-shadow:0px 0px 5px {color:bold};
  1046. padding: 4px;
  1047. line-height:20px;
  1048. margin-top:2px;
  1049. letter-spacing:1px;
  1050. transition-duration: 0.6s;
  1051. border:1px solid {color:border};
  1052. -webkit-transition: .9s ease-in-out;
  1053. -moz-transition: .9s ease-in-out;
  1054. -o-transition: .9s ease-in-out;
  1055. }
  1056.  
  1057. .linkbutton a:hover {
  1058. background:{color:chatone} url('{image:infoimage}');
  1059. background-attachment:fixed; }
  1060.  
  1061.  
  1062.  
  1063. /*--ASKS--*/
  1064.  
  1065. /* ASK DESIGN */
  1066.  
  1067. #asker {
  1068. font-family: 'Montserrat', sans-serif;
  1069. text-transform:uppercase;
  1070. font-style:normal;
  1071. text-shadow: 0px 0px 1px #111;
  1072. margin-left:65px;
  1073. margin-top:-55px;
  1074. font-size:13px;
  1075. }
  1076.  
  1077. #asker a {
  1078. font-family: 'Mr De Haviland', cursive;
  1079. text-transform:none;
  1080. font-style:normal;
  1081. text-shadow: 0px 0px 1px #111;
  1082. font-size:30px;
  1083. }
  1084.  
  1085. #askerline {
  1086. font-family: 'Montserrat', sans-serif;
  1087. color:#555675;
  1088. font-size:9px;
  1089. text-transform:uppercase;
  1090. margin-left:65px;
  1091. text-shadow: 0px 0px 1px #111;
  1092. }
  1093.  
  1094. #question {
  1095. background-image: url('');
  1096. background-repeat:repeat;
  1097. margin-top:12px;
  1098. width:425px;
  1099. background-color:#202020;
  1100. border-left: solid 2px #555675;
  1101. border-right: solid 2px #555675;
  1102. padding:7px;
  1103. text-transform:uppercase;
  1104. text-align:center;
  1105. letter-spacing:1px;
  1106. font-size:7px;
  1107. font-weight:900;
  1108. font-family:trebuchet ms;
  1109. color:#fff;
  1110. text-shadow:0 0 1px #000;
  1111. }
  1112.  
  1113. #answer {
  1114. margin-top:20px;
  1115. }
  1116.  
  1117.  
  1118. iframe#ask_form {
  1119. min-height:270px;
  1120.  
  1121.  
  1122. }
  1123.  
  1124.  
  1125. #video {
  1126. margin-bottom:15px;
  1127. }
  1128.  
  1129. .audio_player {
  1130. width: 33px;
  1131. height: 25px;
  1132. overflow: hidden;
  1133. position: relative;
  1134. border-radius:25px;
  1135. z-index: 10000000;
  1136.  
  1137. }
  1138.  
  1139.  
  1140. .audiopic{
  1141. width:100px;
  1142. height:110px;
  1143. border-radius:10px;
  1144. max-width:110px;
  1145. background-color: {color:border};
  1146. border-radius:10px;
  1147. margin-bottom:20px;
  1148. }
  1149.  
  1150. .audiopic img{
  1151. border:3px solid transparent;
  1152. border-radius:10px;
  1153. }
  1154.  
  1155.  
  1156. .musicinfo{
  1157. position:relative;
  1158. top: 0px;
  1159. left:110px;
  1160. width:295px;
  1161. }
  1162.  
  1163. .extraspace{
  1164. padding:10px;
  1165. margin:10px;
  1166.  
  1167. }
  1168.  
  1169.  
  1170. .notes li
  1171. {
  1172. width:400px;}
  1173.  
  1174.  
  1175.  
  1176. ol.notes
  1177. {
  1178. width:400px;}
  1179.  
  1180.  
  1181.  
  1182. input[type='checkbox'] {
  1183. display: none;
  1184. }
  1185.  
  1186.  
  1187. /* Style the buttons that are used to open and close the accordion panel */
  1188. .accordion {
  1189. cursor: pointer;
  1190. width: 100%;
  1191. border: none;
  1192. outline: none;
  1193. transition: 0.9s;
  1194. margin-bottom:20px;
  1195. margin-top:-10px;
  1196. font-family: 'Lexend Deca', sans-serif;
  1197. }
  1198.  
  1199.  
  1200.  
  1201. .accordion:after {
  1202. content: '+'; /* Unicode character for "plus" sign (+) */
  1203. float: right;
  1204.  
  1205. color:{color:italic};
  1206. font-weight:bold;
  1207. line-height:100%;
  1208. text-transform:uppercase;
  1209. text-shadow: 0px 1px 1px {color:shadow} ;
  1210.  
  1211. line-height:30px;
  1212. font-size:22px;
  1213.  
  1214. margin-right: 5px;
  1215. padding-right:5px;
  1216. margin-top:-30px;
  1217. }
  1218.  
  1219. .active:after {
  1220. content: "-"; /* Unicode character for "minus" sign (-) */
  1221.  
  1222. }
  1223.  
  1224. button {
  1225. background:transparent;
  1226. padding:0px;
  1227. margin:0px;
  1228. }
  1229.  
  1230. button h2{
  1231. background-color:{color:pre};
  1232. color:{color:italic};
  1233. padding:5px 10px;
  1234. text-align:left;
  1235. border:1px {color:border} solid;
  1236. background:{color:chatone} url('{image:infoimage}'); background-attachment:fixed;
  1237. }
  1238.  
  1239. button h2:hover {
  1240.  
  1241. color:{color:link};
  1242. transition: 0.9s;
  1243. background:{color:pre};
  1244. }
  1245.  
  1246. button:hover {
  1247.  
  1248. }
  1249.  
  1250.  
  1251. /* Style the accordion panel. Note: hidden by default */
  1252. .panel {
  1253. max-height: 0;
  1254. overflow: hidden;
  1255. transition: max-height 0.9s ease-out;
  1256. }
  1257.  
  1258.  
  1259. /* GRID */
  1260.  
  1261. a.selected
  1262. {
  1263. color:{color:italic};
  1264. font-size:12px;
  1265. }
  1266.  
  1267. h2 a.selected
  1268. {
  1269. color:{color:italic};
  1270. font-size:16px;
  1271. }
  1272.  
  1273. #grid {
  1274. position:fixed;
  1275. display:block;
  1276. width:280px;
  1277. transition:0.9s;
  1278. top:-10px;
  1279. right: -132px;
  1280. overflow:scroll;
  1281. height:456px;
  1282.  
  1283. }
  1284.  
  1285.  
  1286.  
  1287.  
  1288. .isotope {
  1289.  
  1290. width:402px;
  1291. min-width:30%;
  1292. position:fixed;
  1293.  
  1294. }
  1295. .grid-item {
  1296. width:50%;
  1297. margin:0px;
  1298. padding:10px;
  1299. box-sizing:border-box;height:240px;
  1300. margin:0px auto;
  1301. }
  1302.  
  1303. .grid-item img{
  1304. max-width:100%;
  1305. height:auto;
  1306. border-radius:5px;
  1307. }
  1308. .grid-item h4 {
  1309. background-attachment:local;
  1310. }
  1311.  
  1312.  
  1313. .tooltip{
  1314. display: inline;
  1315. position: relative;}
  1316.  
  1317. #sort {
  1318. position:fixed;
  1319. z-index:10000000000000000000000000000099999999999999999999999999999999999999;
  1320. margin-top:41px;
  1321. }
  1322.  
  1323. #filters {
  1324. width:120px;
  1325. height:389px;
  1326. margin-top: 6px;
  1327. }
  1328.  
  1329. #filters ul{
  1330. list-style:none;
  1331. padding:0px;
  1332. width:120px;
  1333. text-align:center;
  1334. }
  1335.  
  1336.  
  1337. #filters a{
  1338. padding:10px;
  1339. }
  1340. #filters li{
  1341.  
  1342. padding-bottom:10px;
  1343. float:left;
  1344. margin:0px auto;
  1345. width:120px;
  1346. }
  1347. #filters p{
  1348. clear:both;
  1349. margin-bottom:1px;
  1350. padding-bottom:10px;
  1351. }
  1352.  
  1353. .story
  1354. {transition:0.9s; };
  1355.  
  1356. #filters b {
  1357. }
  1358.  
  1359.  
  1360. #parentgrid
  1361.  
  1362. {
  1363. position: fixed;
  1364. width: 416px;
  1365. left: 600px;
  1366. overflow: scroll;
  1367. top: 160px;
  1368. height: 446px;
  1369. }
  1370.  
  1371. .grid-item label
  1372. {
  1373. color: initial;
  1374. padding: initial;
  1375. margin-bottom: initial;
  1376. text-transform: uppercase;
  1377. text-align: center;
  1378. cursor: pointer;
  1379. box-sizing: border-box;
  1380. display: block;
  1381. width:111.984px;
  1382. background-color:transparent;
  1383. margin-bottom: 5px;
  1384. border: none;
  1385. border-radius: 0px;
  1386. -moz-transition-duration: .9s;
  1387. -webkit-transition-duration: .9s;
  1388. -o-transition-duration: .9s;
  1389. }
  1390. /* GRID */
  1391. </style>
  1392.  
  1393. <body>
  1394.  
  1395. <div id="navpage" class="popup_block">
  1396. <div class="popcontent">
  1397. <div id="purblock"></div>
  1398. <div class="tabslist">
  1399. <h1 style="margin-top:-6px;">* BLOGNAME !</h1>
  1400. <div class="tab">
  1401. <input type="radio" id="tab-1" name="tab-group-1" checked>
  1402. <label for="tab-1"><a><i class="fa fa-map-o" style="color:{color:accent};"></i></a></label>
  1403. <div class="content">
  1404. <h4>NAVIGATION</h4>
  1405. <img class="navpic" src="{image:navpic}">
  1406. <div class="linkbutton">
  1407. <a href="link1">Link 1</a>
  1408. <a href="link2">Link 2</a>
  1409. <a href="link3">Link 3</a>
  1410. <a href="link4">Link 4</a>
  1411. <a href="link5">Link 5</a>
  1412. <a href="link6">Link 6</a>
  1413. <a href="link7">Link 7</a>
  1414. <a href="link8">Link 8</a>
  1415. <a href="link9">Link 9</a>
  1416. <p>
  1417. </div>
  1418. <div class="extraspace">
  1419. </p>
  1420. <p>
  1421. </p>
  1422. <p>
  1423. </div>
  1424. <div class="extraspace">
  1425. </p>
  1426. <p>
  1427. </p>
  1428. <p>
  1429. </div>
  1430. <div class="extraspace">
  1431. </p>
  1432. <p>
  1433. </p>
  1434. <p>
  1435. </div>
  1436.  
  1437. </div>
  1438. </div>
  1439. <div class="tab">
  1440. <input type="radio" id="tab-2" name="tab-group-1">
  1441. <label for="tab-2"><a><i class="fa fa-envelope-o" style="color:{color:accent};"></i></a></label>
  1442. <div class="content">
  1443. <h4> MESSAGES </h4>
  1444. <center>
  1445. <p>
  1446. <iframe frameborder="0" height="240" id="ask_form" scrolling="yes" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="90%"></iframe>
  1447. </center>
  1448. <p>
  1449. <p>
  1450. <p>
  1451.  
  1452.  
  1453. <div class="extraspace">
  1454. </p>
  1455. <p>
  1456. </p>
  1457. <p>
  1458. </div>
  1459. <div class="extraspace">
  1460. </p>
  1461. <p>
  1462. </p>
  1463. <p>
  1464. </div>
  1465. <div class="extraspace">
  1466. </p>
  1467. <p>
  1468. </p>
  1469. <p>
  1470. </div>
  1471.  
  1472.  
  1473.  
  1474. </div>
  1475. </div>
  1476.  
  1477.  
  1478. <div class="tab">
  1479. <input type="radio" id="tab-3" name="tab-group-1" >
  1480. <label for="tab-3"><a><i class="fa fa-exclamation-circle" style="color:{color:accent};"></i></a></label>
  1481. <div class="content">
  1482. <h4>RULES</h4>
  1483.  
  1484. <h3>Disclaimer:</h3>
  1485.  
  1486. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1487.  
  1488.  
  1489. <h4>Category</h4>
  1490.  
  1491.  
  1492.  
  1493. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1494.  
  1495.  
  1496. <h4>category</h4>
  1497.  
  1498.  
  1499.  
  1500. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1501.  
  1502.  
  1503. <div class="extraspace">
  1504. </p>
  1505. <p>
  1506. </p>
  1507. <p>
  1508. </div>
  1509. <div class="extraspace">
  1510. </p>
  1511. <p>
  1512. </p>
  1513. <p>
  1514. </div>
  1515. <div class="extraspace">
  1516. </p>
  1517. <p>
  1518. </p>
  1519. <p>
  1520. </div>
  1521.  
  1522. </div>
  1523. </div>
  1524.  
  1525.  
  1526.  
  1527. <div class="tab">
  1528. <input type="radio" id="tab-4" name="tab-group-1" >
  1529. <label for="tab-4"><a><i class="fa fa-user" style="color:{color:accent};"></i></a></label>
  1530. <div class="content">
  1531. <h4>ABOUT</h4>
  1532.  
  1533. <h3>Disclaimer:</h3>
  1534.  
  1535. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1536.  
  1537.  
  1538. <h4>Category</h4>
  1539.  
  1540.  
  1541.  
  1542. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1543.  
  1544.  
  1545. <h4>category</h4>
  1546.  
  1547.  
  1548.  
  1549. <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  1550.  
  1551.  
  1552. <div class="extraspace">
  1553. </p>
  1554. <p>
  1555. </p>
  1556. <p>
  1557. </div>
  1558. <div class="extraspace">
  1559. </p>
  1560. <p>
  1561. </p>
  1562. <p>
  1563. </div>
  1564. <div class="extraspace">
  1565. </p>
  1566. <p>
  1567. </p>
  1568. <p>
  1569. </div>
  1570.  
  1571. </div>
  1572. </div>
  1573.  
  1574.  
  1575.  
  1576. <div class="tab">
  1577. <input type="radio" id="tab-5" name="tab-group-1" >
  1578. <label for="tab-5"><a><i class="fa fa-book" style="color:{color:accent};"></i></a></label>
  1579. <div class="content">
  1580. <h4>VERSES</h4>
  1581.  
  1582.  
  1583. <button class="accordion">
  1584. <h2>VERSE NAME</h2></button> <div class="panel">
  1585. <div class="shortpic"><img class="left" src="https://themcaa.org/wp-content/uploads/2015/12/blogpost-placeholder-100x100.png"><p>
  1586. <b>NAME:</b> <br>
  1587. <b>AGE:</b> <br>
  1588. <b>RESIDENCE:</b> <br>
  1589. <b>STATUS:</b> <br>
  1590.  
  1591. </div>
  1592.  
  1593.  
  1594. Verse Description.</div>
  1595.  
  1596. <button class="accordion">
  1597. <h2>VERSE NAME</h2></button> <div class="panel">
  1598. <div class="shortpic"><img class="right" src="https://themcaa.org/wp-content/uploads/2015/12/blogpost-placeholder-100x100.png"><p>
  1599. <b>NAME:</b> <br>
  1600. <b>AGE:</b> <br>
  1601. <b>RESIDENCE:</b> <br>
  1602. <b>STATUS:</b> <br>
  1603.  
  1604. </div>
  1605.  
  1606.  
  1607. Verse Description.</div>
  1608.  
  1609. <button class="accordion">
  1610. <h2>VERSE NAME</h2></button> <div class="panel">
  1611. <div class="shortpic"><img class="left" src="https://themcaa.org/wp-content/uploads/2015/12/blogpost-placeholder-100x100.png"><p>
  1612. <b>NAME:</b> <br>
  1613. <b>AGE:</b> <br>
  1614. <b>RESIDENCE:</b> <br>
  1615. <b>STATUS:</b> <br>
  1616.  
  1617. </div>
  1618.  
  1619.  
  1620. Verse Description.</div>
  1621.  
  1622. <button class="accordion">
  1623. <h2>VERSE NAME</h2></button> <div class="panel">
  1624. <div class="shortpic"><img class="right" src="https://themcaa.org/wp-content/uploads/2015/12/blogpost-placeholder-100x100.png"><p>
  1625. <b>NAME:</b> <br>
  1626. <b>AGE:</b> <br>
  1627. <b>RESIDENCE:</b> <br>
  1628. <b>STATUS:</b> <br>
  1629.  
  1630. </div>
  1631.  
  1632.  
  1633. Verse Description.</div>
  1634.  
  1635.  
  1636.  
  1637. <script>
  1638. var acc = document.getElementsByClassName("accordion");
  1639. var i;
  1640.  
  1641. for (i = 0; i < acc.length; i++) {
  1642. acc[i].addEventListener("click", function() {
  1643. this.classList.toggle("active");
  1644. var panel = this.nextElementSibling;
  1645. if (panel.style.maxHeight) {
  1646. panel.style.maxHeight = null;
  1647. } else {
  1648. panel.style.maxHeight = panel.scrollHeight + "px";
  1649. }
  1650. });
  1651. }
  1652. </script>
  1653.  
  1654. <div class="extraspace">
  1655. </p>
  1656. <p>
  1657. </p>
  1658. <p>
  1659. </div>
  1660. <div class="extraspace">
  1661. </p>
  1662. <p>
  1663. </p>
  1664. <p>
  1665. </div>
  1666. <div class="extraspace">
  1667. </p>
  1668. <p>
  1669. </p>
  1670. <p>
  1671. </div>
  1672.  
  1673. </div>
  1674. </div>
  1675.  
  1676.  
  1677.  
  1678.  
  1679. <div class="tab">
  1680. <input type="radio" id="tab-6" name="tab-group-1" >
  1681. <label for="tab-6" ><a><i class="fa fa-users" style="color:{color:accent};"></i></a></label>
  1682. <div class="content">
  1683.  
  1684. <h1 style="position:fixed;width:400px;margin-top:-3px;padding-top: 9px">CONNECTIONS</h1>
  1685.  
  1686. <div id="filters" class="option-set clearfix" data-option-key="filter"><div id="sort">
  1687. <p><h4 style="margin-top:-10px;margin-bottom:8px;;
  1688. ">SELECT A CATEGORY</h4>
  1689. <center>
  1690.  
  1691. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  1692.  
  1693.  
  1694. <li>
  1695. <h2 style="font-size:15px; margin:5px;"><a href="#filter" data-option-filter=".story">SHOW ALL</a></h2>
  1696. </li><br>
  1697.  
  1698. <p><b>PRIORITY</b><br>
  1699.  
  1700. <li>
  1701. <a href="#filter" data-option-filter=".exc">EXCLUSIVE</a><br>
  1702. </li>
  1703.  
  1704. <p><b>MAIN</b><br>
  1705.  
  1706. <li>
  1707. <a href="#filter" data-option-filter=".rel">RELATIONSHIP</a><br>
  1708. <a href="#filter" data-option-filter=".fri">FRIENDSHIP</a><br>
  1709. <a href="#filter" data-option-filter=".ene">ENEMY</a><br>
  1710. </li>
  1711.  
  1712.  
  1713. <p><b>FANDOM</b><br>
  1714.  
  1715.  
  1716. <li>
  1717. <a href="#filter" data-option-filter=".ff">FINAL FANTASY</a><br>
  1718. <a href="#filter" data-option-filter=".re">RESIDENT EVIL</a><br>
  1719. </li>
  1720.  
  1721. </ul>
  1722. </div>
  1723.  
  1724.  
  1725. </center>
  1726. <section id="parentgrid">
  1727. <div id="grid" class="clearfix">
  1728.  
  1729.  
  1730.  
  1731. <!--- DO NOT REMOBE THE STORY CLASS --->
  1732.  
  1733. <div class="grid-item story exc ff"><img src="https://i.imgur.com/7pHtf9i.png"></img>
  1734. <h4 style="font-size:7px;">
  1735. <a href="https://ahdynn.tumblr.com/" rel="museonename" class="poplight"><b>ahdynn</a></b><br>
  1736. ARDYN IZUNIA<br></h4>
  1737. <span style="font-size:7px;color:{color:italic};text-align:right;"><a href="/tagged/ahdynn">🌙dialogue</a> <a href="/tagged/┊❦-❛-ʏᴏᴜ-ᴡɪʟʟ-ғᴏʀᴇᴠᴇʀ-ʙᴇ-ᴍʏ-ᴀʟᴡᴀʏs-–-%5B-ᴀʀᴅʏɴ-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1738. </div>
  1739.  
  1740.  
  1741.  
  1742. <div class="grid-item story exc ff"><img src="https://i.imgur.com/q0Cnv0S.png"></img> <h4 style="font-size:7px;">
  1743. <a href="https://fragmenthearted.tumblr.com/" rel="musetwoname" class="poplight"><b>fragmenthearted</a></b><br>
  1744. Somnus Lucis Caelum<br></h4>
  1745. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/fragmenthearted">🌙dialogue</a> <a href="/tagged/┊❦-❛-ɪ%27ʟʟ-ʙᴇ-ʏᴏᴜʀ-ᴍᴏᴏɴ-ɪғ-ʏᴏᴜ%27ʟʟ-ʙᴇ-ᴍʏ-sᴛᴀʀs-–-%5B-sᴏᴍɴᴜs-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1746. </div>
  1747.  
  1748.  
  1749.  
  1750.  
  1751. <div class="grid-item story rel ff"><img src="https://i.imgur.com/N0hCWsj.png"></img> <h4 style="font-size:7px;">
  1752. <a href="https://praeteritus-memories.tumblr.com/" rel="musetwoname" class="poplight"><b>praeteritusmemories</a></b><br>
  1753. IGNIS SCIENTIA<br></h4>
  1754. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/praeteritus-memories%2A">🌙dialogue</a> <a href="/tagged/┊❦-❛-ᴏɴʟʏ-ʏᴏᴜ-ᴄᴀɴ-ɢɪᴠᴇ-ᴍᴇ-ᴛʜᴀᴛ-ғᴇᴇʟɪɴɢ-–-%5B-ɪɢɴɪs-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1755. </div>
  1756.  
  1757.  
  1758.  
  1759.  
  1760. <div class="grid-item story rel ff"><img src="https://i.imgur.com/jdJxQde.png"></img>
  1761. <h4 style="font-size:7px;">
  1762. <a href="https://dragoonxdive.tumblr.com/" rel="museonename" class="poplight"><b>dragoonxdive</a></b><br>
  1763. Aranea Highwind<br></h4>
  1764. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/dragoondive">🌙dialogue</a> <a href="/tagged/┊❦-❛-ʏᴏᴜ%27ʀᴇ-ᴛʜᴇ-ʀɪsᴋ-ɪ%27ʟʟ-ᴀʟᴡᴀʏs-ᴛᴀᴋᴇ-–-%5B-ᴀʀᴀɴᴇᴀ-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1765. </div>
  1766.  
  1767.  
  1768.  
  1769.  
  1770. <div class="grid-item rel ff"><img src="https://i.imgur.com/fPJOu9p.png"></img>
  1771. <h4 style="font-size:7px;">
  1772. <a href="https://praeteritus-memories.tumblr.com/" rel="museonename" class="poplight"><b>praeteritusmemories</a></b><br>
  1773. Noctis Lucis Caelum<br></h4>
  1774. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/praeteritus+memories">🌙dialogue</a> <a href="/">🌙tag</a></span><br>
  1775. </div>
  1776.  
  1777.  
  1778.  
  1779.  
  1780. <div class="grid-item story fri ff"><img src="https://i.imgur.com/gfz1NpX.png"></img> <h4 style="font-size:7px;">
  1781. <a href="https://triggerxhappy.tumblr.com/" rel="musetwoname" class="poplight"><b>triggerxhappy</a></b><br>
  1782. Prompto Argentum<br></h4>
  1783. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/triggerxhappy">🌙dialogue</a> <a href="/tagged/┊✨-❛-ᴛʀᴜᴇ-ғʀɪᴇɴᴅsʜɪᴘ-ɪs-sᴇʀᴇɴᴇ-–-%5B-ᴘʀᴏᴍᴘᴛᴏ-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1784. </div>
  1785.  
  1786.  
  1787.  
  1788.  
  1789. <div class="grid-item story fri ff"><img src="https://i.imgur.com/d3JAt9F.png"></img>
  1790. <h4 style="font-size:7px;">
  1791. <a href="https://totalxclarity.tumblr.com/" rel="museonename" class="poplight"><b>totalxclarity</a></b><br>
  1792. IGNIS SCIENTIA<br></h4>
  1793. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/totalxclarity">🌙dialogue</a> <a href="/tagged/┊✨-❛-ᴀ-ғʀɪᴇɴᴅ-ᴛʜᴀᴛ’s-ᴀ-ʜɪᴅᴅᴇɴ-ᴛʀᴇᴀsᴜʀᴇ-–-%5B-ɪɢɴɪs-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1794. </div>
  1795.  
  1796.  
  1797.  
  1798.  
  1799. <div class="grid-item story fri re "><img src="https://i.imgur.com/nUILLsW.png"></img> <h4 style="font-size:7px;">
  1800. <a href="https://rpdrookie.tumblr.com/" rel="musetwoname" class="poplight"><b>rpdrookie</a></b><br>
  1801. Leon S. Kennedy<br></h4>
  1802. <span style="font-size:8px;color:{color:italic};text-align:right;"><a href="/tagged/rpdrookie">🌙dialogue</a> <a href="/tagged/┊✨-❛-ᴜɴᴛɪʟ-ᴛʜᴇ-ᴇɴᴅ-ʏᴏᴜ%27ʀᴇ-ᴍʏ-ғʀɪᴇɴᴅ-–-%5B-ʟᴇᴏɴ-%26-ʟᴜɴᴀғʀᴇʏᴀ-%5D.">🌙tag</a></span><br>
  1803. </div>
  1804.  
  1805.  
  1806.  
  1807. </div>
  1808. </section>
  1809.  
  1810. </div>
  1811. </div>
  1812. </div>
  1813.  
  1814.  
  1815.  
  1816.  
  1817. <div class="tab">
  1818. <input type="radio" id="tab-7" name="tab-group-1">
  1819. <label for="tab-7"><a><i class="fa fa-star" style="color:{color:accent};"></i></a></label>
  1820. <div class="content">
  1821. <h4>MUN</h4>
  1822.  
  1823.  
  1824.  
  1825. <div class="longpic"><img class="right" src="{image:munpic}">
  1826.  
  1827. <b>Name: </b>Mun Name Here<br>
  1828. <b>Better Known As: </b>Nicknames Here<br>
  1829. <b>Gender: </b>Gender Identity Here<br>
  1830. <b>Age: </b>Age Here<br>
  1831. <b>Timezone: </b>Timezone Here<br>
  1832. <b>Occupation: </b>Occupation Here<br>
  1833. <b>Activity: </b>Activity Level Here<br>
  1834. <b>Contact: </b>Preferred Contact Info Here<br>
  1835. <b>Discord: </b>Discord Tag Here<br>
  1836. </div>
  1837. <hr>
  1838. <h1>put a quote here!</h1>
  1839. <hr>
  1840. <div class="extraspace">
  1841. </p>
  1842. <p>
  1843. </p>
  1844. <p>
  1845. </div>
  1846. <div class="extraspace">
  1847. </p>
  1848. <p>
  1849. </p>
  1850. <p>
  1851. </div>
  1852. <div class="extraspace">
  1853. </p>
  1854. <p>
  1855. </p>
  1856. <p>
  1857. </div>
  1858.  
  1859. </div>
  1860. </div>
  1861.  
  1862.  
  1863.  
  1864.  
  1865. </div>
  1866.  
  1867. </div>
  1868.  
  1869. </div>
  1870.  
  1871.  
  1872.  
  1873.  
  1874. <div id="sidebar">
  1875.  
  1876. <div id="sidebartext">
  1877.  
  1878. <center><img src="https://i.imgur.com/zQuFDS7.png"> </center>
  1879.  
  1880. <center>⬐ scroll ⬎</center>
  1881.  
  1882. <h4><a href="https://www.tumblr.com/tagged/benedictusxlunaris">#𝘣𝘦𝘯𝘦𝘥𝘪𝘤𝘵𝘶𝘴𝘹𝘭𝘶𝘯𝘢𝘳𝘪𝘴</a></h4>
  1883. <center><small>
  1884.  
  1885. ʜɪɢʜʟʏ sᴇʟᴇᴄᴛɪᴠᴇ & ᴘʀɪᴠᴀᴛᴇ. ɴsғᴡ || 𝟷𝟾+.<br>
  1886. ᴄᴀɴᴏɴ & ᴄᴀɴᴏɴ ᴅɪᴠᴇʀɢᴇɴᴛ. ᴍᴜʟᴛɪᴠᴇʀsᴇ.
  1887. <br><br>
  1888. ᴘʟᴇᴀsᴇ ʀᴇᴀᴅ ʀᴜʟᴇs!
  1889.  
  1890. </small></center>
  1891.  
  1892. </p>
  1893.  
  1894. </div>
  1895. </div>
  1896.  
  1897.  
  1898.  
  1899. </center>
  1900. <div id="links">
  1901. <a id="refresh" href="/" title="refresh">✦</a>
  1902. <a id="nav" href="#?w=450" rel="navpage" class="poplight" title="navigate">✦</a>
  1903. {block:NextPage}<a id="pagef" href="{NextPage}" rel="navpage" class="poplight" title="advance">⇨</a>{/block:NextPage}
  1904. {block:PreviousPage}<a id="pagep" href="{PreviousPage}" rel="navpage" class="poplight" title="retreat">⇦</a>{/block:PreviousPage}</div>
  1905.  
  1906.  
  1907.  
  1908.  
  1909. <div id="credit"><a href="http://imbicilite.tumblr.com/"><i class="fa fa-moon-o" style="color:{color:accent}"></i></a></div>
  1910. <div id=container>
  1911. <div id="entries">
  1912. {block:posts}
  1913.  
  1914. <div id="posts">
  1915. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1916.  
  1917.  
  1918. {block:Quote}<h2>“{Quote}” — {Source}</h2><br>{/block:Quote}
  1919.  
  1920. {block:Link}<a href="{URL}"><h1>{Name}</h1></a>
  1921. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  1922.  
  1923. {block:Photo}<center><img src="{PhotoURL-400}"/></center>
  1924. {block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1925.  
  1926. {block:Photoset}<center>{Photoset-400}</center>
  1927. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1928.  
  1929. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  1930.  
  1931. {block:Video}<div id="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1932.  
  1933. <!---ASK && ANSWER--->
  1934.  
  1935. {block:Answer}
  1936. <img src="https://66.media.tumblr.com/9dcecee391b03a378945ac1d0944d59b/tumblr_ppfa84PE9A1w7o9ojo3_r1_540.png" style="margin-top:20px; margin-left:10px; max-width:50px; " draggable="false">
  1937. <div id="asker"> {asker} </div>
  1938. <div id="askerline"> sent a formal request. </div>
  1939. <div id="question">{question}</div>
  1940. <div id="answer"> <p>{answer} </div>
  1941. {/block:Answer}
  1942.  
  1943.  
  1944. {block:Audio} <div class="audiopic">{block:AlbumArt}
  1945. <img class="right" src="{AlbumArtURL}"></img>{/block:AlbumArt}{AudioPlayerBlack} <div class="musicinfo">{block:TrackName}
  1946. <i>{TrackName}</i>
  1947. {/block:TrackName}{block:Artist}
  1948. -<b> {Artist}</b>
  1949. {/block:Artist}<br> {block:PlayCount}Played <b>{PlayCount}</b> Times{/block:PlayCount} <br></div></div>
  1950. {block:Caption}{Caption}{/block:Caption} {/block:Audio}
  1951.  
  1952. <center><div id="info"><div id="info1"> <a href="{Permalink}" title="{TimeAgo} - {NoteCountwithlabel}"><span class="fa fa-link"></span> </a> </div>
  1953. <div id="info2"> <a href="{ReblogURL}" title="reblog"> <span class="fa fa-retweet"></span> </a> </div>
  1954. <div id="info3"> {block:RebloggedFrom}<a title="↺ {ReblogParentName}" href="{ReblogParentURL}" > <span class="fa fa-history"></span> </a>{/block:RebloggedFrom} </div>
  1955. <div id="info4"> {block:ContentSource}
  1956. <a title="src. {SourceTitle}" href="{SourceURL}" target="_blank" title="{SourceTitle}"> <span class="fa fa-rss"></span> </a>
  1957. {/block:ContentSource}</div></center><p>
  1958.  
  1959. <center><div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}{/block:HasTags}
  1960. <br /></div></div>
  1961.  
  1962. {/block:Posts}
  1963.  
  1964. {block:PostNotes}{PostNotes}{/block:PostNotes}<br />
  1965. </div>
  1966. </div></div>
  1967.  
  1968.  
  1969. <!------- filter scripts -------->
  1970.  
  1971. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  1972.  
  1973. <script>
  1974. var $container = $('#grid');
  1975.  
  1976.  
  1977. $( document ).ready(function() {
  1978. var PageLoadFilter = '.story';
  1979. $container.isotope({ filter: PageLoadFilter});
  1980. });
  1981.  
  1982. </script>
  1983.  
  1984. <script type="text/javascript">
  1985.  
  1986.  
  1987. $(function(){
  1988.  
  1989.  
  1990.  
  1991. var $container = $('#grid');
  1992.  
  1993. $container.isotope({
  1994. itemSelector : '.story', percentPosition: true // put true if you use percentage widths, otherwise put false
  1995.  
  1996. });
  1997.  
  1998.  
  1999. var $optionSets = $('#sort .option-set'),
  2000. $optionLinks = $optionSets.find('a');
  2001.  
  2002. $optionLinks.click(function(){
  2003. var $this = $(this);
  2004. // don't proceed if already selected
  2005. if ( $this.hasClass('selected') ) {
  2006. return false;
  2007. }
  2008. var $optionSet = $this.parents('.option-set');
  2009. $optionSet.find('.selected').removeClass('selected');
  2010. $this.addClass('selected');
  2011.  
  2012. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  2013. var options = {},
  2014. key = $optionSet.attr('data-option-key'),
  2015. value = $this.attr('data-option-filter');
  2016. // parse 'false' as false boolean
  2017. value = value === 'false' ? false : value;
  2018. options[ key ] = value;
  2019. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  2020. // changes in layout modes need extra logic
  2021. changeLayoutMode( $this, options )
  2022. } else {
  2023. // otherwise, apply new options
  2024. $container.isotope( options );
  2025. }
  2026.  
  2027. return false;
  2028. });
  2029.  
  2030.  
  2031. });
  2032. </script>
  2033.  
  2034. <!-----end filter scripts------>
  2035. </body>
  2036.  
  2037. </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!