API tools faq
paste
especiallygold

tldr

especiallygold
Oct 26th, 2019
2,497
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. © erika-writes
  3. -->
  4.  
  5. <head>
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <script type="text/javascript"
  11. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  12. <script>
  13. $(document).ready(function() {
  14. //
  15. $('a.poplight[href^=#]').click(function() {
  16. var popID = $(this).attr('rel'); //Get Popup Name
  17. var popURL = $(this).attr('href'); //Get Popup href to define size
  18. var query= popURL.split('?');
  19. var dim= query[1].split('&');
  20. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  21. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  22. var popMargTop = ($('#' + popID).height() + 80) / 2;
  23. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  24. //Apply Margin to Popup
  25. $('#' + popID).css({
  26. 'margin-top' : -popMargTop,
  27. 'margin-left' : -popMargLeft
  28. });
  29. $('body').append('<div id="fade"></div>');
  30. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  31. return false;
  32. });
  33. $('a.close, #fade').live('click', function() {
  34. $('#fade , .popup_block').fadeOut(function() {
  35. $('#fade, a.close').remove(); //fade them both out
  36. });
  37. return false;
  38. });
  39. });
  40. </script>
  41.  
  42. <style type="text/css">
  43.  
  44. body {
  45. font-family:lato;
  46. font-size:9px;
  47. letter-spacing:1px;
  48. line-height:15px;
  49. -webkit-font-smoothing: antialiased;
  50. -moz-osx-font-smoothing: grayscale;
  51. }
  52.  
  53. a {
  54. color:#000;
  55. }
  56.  
  57. #container {
  58. background-color:#fff;
  59. width:505px;
  60. height:512px;
  61. margin: 0 auto;
  62. padding:30px;
  63. padding-right:25px;
  64. margin-top:50px;
  65. border: .5px solid #eee;
  66. border-radius:5px;
  67. box-shadow: 8px 8px 1px 0px #eee;
  68. }
  69.  
  70. .wrapper {
  71. width:520px;
  72. height:550px;
  73. margin: 0 auto;
  74. overflow:scroll;
  75. margin-top:-18px;
  76. }
  77.  
  78. .wrapper::-webkit-scrollbar { width: 3px; height:0px; background-color: #eee;}
  79.  
  80. .wrapper::-webkit-scrollbar-track {padding:20px; border:1px solid #eee; background-color:#404040;}
  81.  
  82. .wrapper::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040;}
  83.  
  84. #muse {
  85. width:150px;
  86. overflow:hidden;
  87. margin-bottom:10px;
  88. margin:6px;
  89. margin-left:10px;
  90. float:left;
  91. }
  92.  
  93. #info {
  94. font-family:lato;
  95. font-size:10px;
  96. text-transform:lowercase;
  97. letter-spacing:1px;
  98. width:120px;
  99. height:35px;
  100. text-align:left;
  101. padding-left:5px;
  102. }
  103.  
  104. .img {
  105. margin-top:10px;
  106. margin-bottom:10px;
  107. width:130px;
  108. height:auto;
  109. border-radius:5px;
  110. }
  111.  
  112. #bio {
  113. font-family:lato;
  114. font-size:9px;
  115. line-height:auto;
  116. width:420px;
  117. height:300px;
  118. padding:10px;
  119. overflow-x:hidden;
  120. overflow-y:scroll;
  121. border-radius:2px;
  122. margin:0 auto;
  123. margin-top:3px;
  124. }
  125.  
  126. #biotitle {
  127. font-family:lato;
  128. font-size:10px;
  129. line-height:auto;
  130. letter-spacing:2px;
  131. padding-bottom:7px;
  132. text-align:center;
  133. font-weight:900;
  134. text-transform:uppercase;
  135. }
  136.  
  137. #bio::-webkit-scrollbar { width: 3px; background-color: #eee; }
  138.  
  139. #bio::-webkit-scrollbar-track {border:1px solid #eee; background-color: #404040; }
  140.  
  141. #bio::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040; }
  142.  
  143. #nav {
  144. position:fixed;
  145. left:25px;
  146. top:20px;
  147. font-family:lato;
  148. font-size:8.5px;
  149. font-weight:500;
  150. text-transform:lowercase;
  151. letter-spacing:2px;
  152. height:auto;
  153. border-left:1px solid #000;
  154. padding-left:15px;
  155. }
  156.  
  157. #nav a {
  158. text-decoration:none;
  159. }
  160.  
  161. #maintitle {
  162. font-family:lato;
  163. font-size:15px;
  164. font-weight:900;
  165. letter-spacing:2px;
  166. line-height:auto;
  167. text-align:left;
  168. text-transform:uppercase;
  169. font-style:italic;
  170. margin-bottom:10px;
  171. }
  172.  
  173. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  174. .popup_block{
  175. height:330px;
  176. display:none;
  177. background-color:#fff;
  178. border: .5px solid #eee;
  179. padding:10px;
  180. border-radius:5px;
  181. position:fixed;
  182. top:55%;
  183. left:740px;
  184. z-index: 99999;
  185. box-shadow: 8px 8px 1px 0px #eee;
  186. }
  187.  
  188. #fade {
  189. display:none;
  190. position:fixed;
  191. left:0px;
  192. top:0px;
  193. width:100%;
  194. height:100%;
  195. z-index:9999;
  196. opacity:.5;
  197. }
  198.  
  199. *html #fade {position: absolute;}
  200. *html .popup_block {position: absolute;}
  201. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  202.  
  203. </style>
  204. </head>
  205.  
  206. <body>
  207.  
  208. <div id="nav">
  209. <div id="maintitle">title</div>
  210. <a href="/">back to blog</a>
  211. <br><a href="https://tumblr.com/dashboard">go to dashboard</a>
  212. <br><a href="https://erika-writes.tumblr.com">credit</a>
  213. </div>
  214.  
  215. <div id="container">
  216. <div class="wrapper">
  217.  
  218. <!-- MUSE -->
  219.  
  220. <a href="#?w=450" rel="muse1" class="poplight">
  221.  
  222. <div id="muse">
  223.  
  224. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  225.  
  226. <div id="info">
  227. <b>name</b>
  228. <br>faceclaim</div>
  229.  
  230. </div>
  231.  
  232. <!-- MUSE -->
  233.  
  234. <a href="#?w=450" rel="muse1" class="poplight">
  235.  
  236. <div id="muse">
  237.  
  238. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  239.  
  240. <div id="info">
  241. <b>name</b>
  242. <br>faceclaim</div>
  243.  
  244. </div>
  245.  
  246. <!-- MUSE -->
  247.  
  248. <a href="#?w=450" rel="muse1" class="poplight">
  249.  
  250. <div id="muse">
  251.  
  252. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  253.  
  254. <div id="info">
  255. <b>name</b>
  256. <br>faceclaim</div>
  257.  
  258. </div>
  259.  
  260. <!-- MUSE -->
  261.  
  262. <a href="#?w=450" rel="muse1" class="poplight">
  263.  
  264. <div id="muse">
  265.  
  266. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  267.  
  268. <div id="info">
  269. <b>name</b>
  270. <br>faceclaim</div>
  271.  
  272. </div>
  273.  
  274. <!-- MUSE -->
  275.  
  276. <a href="#?w=450" rel="muse1" class="poplight">
  277.  
  278. <div id="muse">
  279.  
  280. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  281.  
  282. <div id="info">
  283. <b>name</b>
  284. <br>faceclaim</div>
  285.  
  286. </div>
  287.  
  288. <!-- MUSE -->
  289.  
  290. <a href="#?w=450" rel="muse1" class="poplight">
  291.  
  292. <div id="muse">
  293.  
  294. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  295.  
  296. <div id="info">
  297. <b>name</b>
  298. <br>faceclaim</div>
  299.  
  300. </div>
  301.  
  302. <!-- MUSE -->
  303.  
  304. <a href="#?w=450" rel="muse1" class="poplight">
  305.  
  306. <div id="muse">
  307.  
  308. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  309.  
  310. <div id="info">
  311. <b>name</b>
  312. <br>faceclaim</div>
  313.  
  314. </div>
  315.  
  316. <!-- MUSE -->
  317.  
  318. <a href="#?w=450" rel="muse1" class="poplight">
  319.  
  320. <div id="muse">
  321.  
  322. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  323.  
  324. <div id="info">
  325. <b>name</b>
  326. <br>faceclaim</div>
  327.  
  328. </div>
  329.  
  330. <!-- MUSE -->
  331.  
  332. <a href="#?w=450" rel="muse1" class="poplight">
  333.  
  334. <div id="muse">
  335.  
  336. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  337.  
  338. <div id="info">
  339. <b>name</b>
  340. <br>faceclaim</div>
  341.  
  342. </div>
  343.  
  344. <!-- MUSE -->
  345.  
  346. <a href="#?w=450" rel="muse1" class="poplight">
  347.  
  348. <div id="muse">
  349.  
  350. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  351.  
  352. <div id="info">
  353. <b>name</b>
  354. <br>faceclaim</div>
  355.  
  356. </div>
  357.  
  358. <!-- MUSE -->
  359.  
  360. <a href="#?w=450" rel="muse1" class="poplight">
  361.  
  362. <div id="muse">
  363.  
  364. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  365.  
  366. <div id="info">
  367. <b>name</b>
  368. <br>faceclaim</div>
  369.  
  370. </div>
  371.  
  372. <!-- MUSE -->
  373.  
  374. <a href="#?w=450" rel="muse1" class="poplight">
  375.  
  376. <div id="muse">
  377.  
  378. <img src="https://66.media.tumblr.com/53aab30c4cdd9f6bf4834e2dbd093ef7/tumblr_pszssrGgll1tc5gvpo3_250.png" class="img"></a>
  379.  
  380. <div id="info">
  381. <b>name</b>
  382. <br>faceclaim</div>
  383.  
  384. </div>
  385.  
  386. </div>
  387.  
  388. <!-- POP UP BOXES -->
  389.  
  390. <div id="muse1" class="popup_block">
  391.  
  392. <div id="bio">
  393. <div id="biotitle">
  394. TITLE? AGE? OTHER INFO? IDK?
  395. </div>
  396. the world is your oyster. (also, this scrolls.)
  397. </div>
  398.  
  399. </div> </div>
  400.  
  401. <div id="muse1" class="popup_block">
  402.  
  403. <div id="bio">
  404. <div id="biotitle">
  405. TITLE? AGE? OTHER INFO? IDK?
  406. </div>
  407. the world is your oyster. (also, this scrolls.)
  408. </div>
  409.  
  410. </div> </div>
  411.  
  412. <div id="muse1" class="popup_block">
  413.  
  414. <div id="bio">
  415. <div id="biotitle">
  416. TITLE? AGE? OTHER INFO? IDK?
  417. </div>
  418. the world is your oyster. (also, this scrolls.)
  419. </div>
  420.  
  421. </div> </div>
  422.  
  423. <div id="muse1" class="popup_block">
  424.  
  425. <div id="bio">
  426. <div id="biotitle">
  427. TITLE? AGE? OTHER INFO? IDK?
  428. </div>
  429. the world is your oyster. (also, this scrolls.)
  430. </div>
  431.  
  432. </div> </div>
  433.  
  434. <div id="muse1" class="popup_block">
  435.  
  436. <div id="bio">
  437. <div id="biotitle">
  438. TITLE? AGE? OTHER INFO? IDK?
  439. </div>
  440. the world is your oyster. (also, this scrolls.)
  441. </div>
  442.  
  443. </div> </div>
  444.  
  445. <div id="muse1" class="popup_block">
  446.  
  447. <div id="bio">
  448. <div id="biotitle">
  449. TITLE? AGE? OTHER INFO? IDK?
  450. </div>
  451. the world is your oyster. (also, this scrolls.)
  452. </div>
  453.  
  454. </div> </div>
  455.  
  456. <div id="muse1" class="popup_block">
  457.  
  458. <div id="bio">
  459. <div id="biotitle">
  460. TITLE? AGE? OTHER INFO? IDK?
  461. </div>
  462. the world is your oyster. (also, this scrolls.)
  463. </div>
  464.  
  465. </div> </div>
  466.  
  467. <div id="muse1" class="popup_block">
  468.  
  469. <div id="bio">
  470. <div id="biotitle">
  471. TITLE? AGE? OTHER INFO? IDK?
  472. </div>
  473. the world is your oyster. (also, this scrolls.)
  474. </div>
  475.  
  476. </div> </div>
  477.  
  478. <div id="muse1" class="popup_block">
  479.  
  480. <div id="bio">
  481. <div id="biotitle">
  482. TITLE? AGE? OTHER INFO? IDK?
  483. </div>
  484. the world is your oyster. (also, this scrolls.)
  485. </div>
  486.  
  487. </div> </div>
  488.  
  489. <div id="muse1" class="popup_block">
  490.  
  491. <div id="bio">
  492. <div id="biotitle">
  493. TITLE? AGE? OTHER INFO? IDK?
  494. </div>
  495. the world is your oyster. (also, this scrolls.)
  496. </div>
  497.  
  498. </div> </div>
  499.  
  500. <div id="muse1" class="popup_block">
  501.  
  502. <div id="bio">
  503. <div id="biotitle">
  504. TITLE? AGE? OTHER INFO? IDK?
  505. </div>
  506. the world is your oyster. (also, this scrolls.)
  507. </div>
  508.  
  509. </div> </div>
  510.  
  511. <div id="muse1" class="popup_block">
  512.  
  513. <div id="bio">
  514. <div id="biotitle">
  515. TITLE? AGE? OTHER INFO? IDK?
  516. </div>
  517. the world is your oyster. (also, this scrolls.)
  518. </div>
  519.  
  520. </div> </div>
  521.  
  522. <div id="muse1" class="popup_block">
  523.  
  524. <div id="bio">
  525. <div id="biotitle">
  526. TITLE? AGE? OTHER INFO? IDK?
  527. </div>
  528. the world is your oyster. (also, this scrolls.)
  529. </div>
  530.  
  531. </div> </div>
  532.  
  533. <!-- END -->
  534.  
  535. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!