API tools faq
paste
jellyparty

Nostalgia 98 v1.0.2 tumblr theme

jellyparty
Nov 14th, 2022 (edited)
6,791
2
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.77 KB | None | 2 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3. <!--
  4.  
  5. // Nostalgia 98 v1.0.2
  6. // by France La'Lune & Emoticon Equinox
  7.  
  8.  
  9. // Thanks for using my work
  10. // Please don't remove the credit
  11. // Please don't redistribute
  12. // Feel free to share my work to support me!
  13. // Please have fun and enjoy using this!
  14.  
  15.  
  16. // Questions, comments, concerns?
  17. // Visit shenanigans.neocities.org/district/contact
  18. // Or go to the blog linked in the credit
  19.  
  20. // Info for adding a custom song:
  21. // 1. Download mp3 of the song of your choice
  22. // 2. Go to catbox.moe and upload your mp3
  23. // 3. Copy the url it gives you and insert
  24.  
  25. // Photo script by sadthemes on Tumblr
  26. // 98.css script found here github.com/jdan/98.css
  27.  
  28. -->
  29.  
  30.  
  31.  
  32. <!-- -- image -- -->
  33. <meta name="image:favicon" content="">
  34. <meta name="image:cursor" content="">
  35.  
  36. <meta name="image:background" content="">
  37.  
  38. <meta name="image:icon" content="">
  39. <meta name="image:links icon" content="">
  40.  
  41. <meta name="image:link 1" content="">
  42. <meta name="image:link 2" content="">
  43. <meta name="image:link 3" content="">
  44. <meta name="image:link 4" content="">
  45. <meta name="image:link 5" content="">
  46.  
  47. <meta name="image:music" content="">
  48.  
  49.  
  50.  
  51. <!-- -- text -- -->
  52. <meta name="text:text size" content="16">
  53. <meta name="text:name" content="">
  54. <meta name="text:description" content="">
  55.  
  56. <meta name="text:link 1" content="One">
  57. <meta name="text:link 2" content="Two">
  58. <meta name="text:link 3" content="Three">
  59. <meta name="text:link 1 url" content="/">
  60. <meta name="text:link 2 url" content="/">
  61. <meta name="text:link 3 url" content="/">
  62.  
  63. <meta name="text:song title" content="">
  64. <meta name="text:song artist" content="">
  65. <meta name="text:song url" content="https://files.catbox.moe/w57jfk.mp3">
  66.  
  67.  
  68.  
  69. <!-- -- color -- -->
  70. <meta name="color:background" content="">
  71. <meta name="color:text" content="">
  72. <meta name="color:text select" content="">
  73. <meta name="color:text select bg" content="">
  74.  
  75. <meta name="color:link" content="">
  76. <meta name="color:link hover" content="">
  77.  
  78. <meta name="color:link glow" content="">
  79. <meta name="color:link glow hover" content="">
  80.  
  81. <meta name="color:title gradient" content="">
  82. <meta name="color:title gradient 2" content="">
  83.  
  84.  
  85.  
  86. <!-- -- opt -- -->
  87. <meta name="if:custom cursor" content="">
  88. <meta name="if:full background" content="">
  89. <meta name="if:link glow" content="">
  90. <meta name="if:bold links" content="">
  91. <meta name="if:heart icon" content="">
  92. <meta name="if:circle icon" content="">
  93.  
  94.  
  95. <!-- -- scripts -- -->
  96.  
  97. <link rel="shortcut icon" href="{image:favicon}">
  98. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  99. {block:Description}
  100. <meta name="description" content="{MetaDescription}" />
  101. {/block:Description}
  102. <title>{Title}</title>
  103.  
  104.  
  105. <link rel="stylesheet" href="https://unpkg.com/98.css">
  106. <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  107. <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  108. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  109.  
  110.  
  111.  
  112. <style type="text/css">
  113.  
  114.  
  115. /* ------------------------------------------------ */
  116.  
  117. body{
  118. background-image:Url('{image:background}');
  119. background-color:{color:background};
  120. {block:ifcustomcursor}
  121. cursor:url("{image:cursor}"), default;
  122. {/block:ifcustomcursor}
  123. background-attachment:fixed;
  124. {block:iffullbackground}
  125. background-size: cover;
  126. {/block:iffullbackground}
  127. color:{color:text};
  128. word-wrap:break-word;}
  129.  
  130. a{
  131. {block:ifboldlinks}
  132. font-weight:bold;
  133. {/block:ifboldlinks}
  134. text-decoration:none;
  135. text-shadow: 0 0 10px {color:link glow}; 0 0 10px;
  136. color:{color:link};}
  137.  
  138. a:hover{
  139. text-decoration:underline;
  140. text-shadow: 0 0 10px {color:link glow hover}; 0 0 10px;
  141. color:{color:link hover};}
  142.  
  143. ::selection{
  144. color:{color:text select};
  145. background-color:{color:text select bg};}
  146.  
  147. .npf_row{
  148. margin: 0 !important;}
  149.  
  150. blockquote{
  151. border-left:2px dashed {color:text};
  152. padding-left:10px;
  153. margin: 15px;}
  154.  
  155. p{
  156. margin:0 0 5px 0;
  157. padding:0;}
  158.  
  159.  
  160. /* ------------------------------------------------ */
  161.  
  162. #content, .navi{
  163. margin-left:705px;
  164. width:450px;}
  165.  
  166. .post, .navi{
  167. overflow:hidden;}
  168.  
  169. .post img {
  170. max-width:100%;
  171. height:auto;}
  172.  
  173.  
  174. /* ------------------------------------------------ */
  175.  
  176. #sidebar{
  177. position:fixed;
  178. margin-top:20px;
  179. margin-left:115px;}
  180.  
  181. #description{
  182. padding:5px;}
  183.  
  184. #song{
  185. margin-top:255px;
  186. position:fixed;
  187. margin-left:285px;}
  188.  
  189. .sidebar img{
  190. {block:ifhearticon}
  191. -webkit-mask-image:url(https://64.media.tumblr.com/530d6f82ba12efe719853b50499b1d5d/b58a88777157fa9c-6e/s500x750/69a0aa24e15c4c98f2b7ce62f6c00544e0b3a1c3.png);
  192. -webkit-mask-repeat:no-repeat;
  193. -webkit-mask-size:cover;
  194. {/block:ifhearticon}
  195. {block:ifcircleicon}
  196. border-radius:100%;
  197. {/block:ifcircleicon};}
  198.  
  199.  
  200. /* ------------------------------------------------ */
  201.  
  202.  
  203. #link-container{
  204. width:85px;
  205. text-align:center;
  206. font-family:Pixelated MS Sans Serif;
  207. font-size:13px;
  208. left:0px;
  209. top:0px;
  210. position:fixed;
  211. padding:5px;}
  212.  
  213. .link-1{
  214. margin:0 0 15px 0;}
  215.  
  216. .link-2{
  217. margin:0 0 15px 0;}
  218.  
  219. .link-3{
  220. margin:0 0 15px 0;}
  221.  
  222. .link-4{
  223. margin:0 0 15px 0;}
  224.  
  225.  
  226. /* ------------------------------------------------ */
  227.  
  228.  
  229. #pop{
  230. position:fixed;
  231. margin-left:125px;
  232. margin-top:225px;}
  233.  
  234.  
  235. /* ------------------------------------------------ */
  236.  
  237.  
  238. .title{
  239. font-weight:bold;
  240. font-size:25px;}
  241.  
  242.  
  243. /* ------------------------------------------------ */
  244.  
  245.  
  246. .window-body{
  247. font-size:{text:text size}px;}
  248.  
  249. .tree-view{
  250. font-size:{text:text size}px;
  251. text-align:center;
  252. overflow-x:hidden;
  253. overflow-y:auto;
  254. max-height:120px;}
  255.  
  256. .title-bar{
  257. background-image: linear-gradient(to top left, {color:title gradient}, {color:title gradient 2});}
  258.  
  259.  
  260. /* ------------------------------------------------ */
  261.  
  262.  
  263. .button{
  264. background:transparent;
  265. border-radius:5px;
  266. padding:5px;}
  267.  
  268. .button:hover{
  269. cursor:help;}
  270.  
  271.  
  272. /* ------------------------------------------------ */
  273.  
  274.  
  275. .footer{
  276. text-align:center;
  277. padding:10px;}
  278.  
  279. ol.notes{
  280. list-style-type:none;
  281. padding:3px;
  282. overflow:auto;}
  283.  
  284. .notes{
  285. text-align:left;}
  286.  
  287. /* ------------------------------------------------ */
  288.  
  289. #audioplayer{
  290. width:30px;
  291. height:25px;
  292. overflow:hidden;
  293. position:absolute;
  294. margin-top:40px;
  295. margin-bottom:40px;
  296. margin-left:35px;
  297. border-radius: 40px;
  298. opacity: 0.7;}
  299.  
  300. /* ------------------------------------------------ */
  301.  
  302. .trackstuff{
  303. overflow:auto;
  304. margin-left:110px;
  305. margin-top:-75px;
  306. margin-bottom:50px;
  307. display:block;}
  308.  
  309. .playbutton{
  310. margin-bottom:30px;
  311. margin-top:-60px;
  312. margin-left:35px;
  313. z-index:9;
  314. width:33px;
  315. height:30px;
  316. overflow:hidden;}
  317.  
  318. /* ------------------------------------------------ */
  319.  
  320. video{
  321. max-width: 100%;
  322. height: auto;}
  323.  
  324. .questionz{
  325. padding:2px;
  326. margin:0 0 10px 0;
  327. text-align:right;}
  328.  
  329.  
  330. {CustomCss}
  331. </style>
  332. </head>
  333. <body>
  334.  
  335. <!------------------------------------------------------------------->
  336.  
  337. <div id="sidebar">
  338. <div class="window" style="width: 400px">
  339. <div class="title-bar">
  340. <div class="title-bar-text">{text:name}'s Information</div>
  341. <div class="title-bar-controls">
  342. <button aria-label="Minimize"></button>
  343. <button aria-label="Maximize"></button>
  344. <button aria-label="Close"></button>
  345. </div>
  346. </div>
  347. <div class="window-body">
  348. <table>
  349. <tbody>
  350. <tr>
  351. <td style="width:200px">
  352. <div class="sidebar img"><a href="/"><img style='max-height:100%; height: 165px; width:200px; max-width:100%; object-fit:cover;display:block' src="{image:icon}"></a>
  353. </div>
  354. </td>
  355. <td style="width:200px">
  356. <div id="description">
  357. <ul class="tree-view" style=" font-size:{text:text size}px; height:150px; max-height:150px;">
  358. {text:description}
  359. </ul>
  360. </div>
  361. </td>
  362. </tr>
  363. </tbody>
  364. </table>
  365. </div>
  366. </div>
  367. </div>
  368.  
  369. <!------------------------------------------------------------------->
  370.  
  371. <div id="song">
  372. <div class="window" style="width: 300px">
  373. <div class="title-bar">
  374. <div class="title-bar-text">{text:song title} - Windows Media Player</div>
  375. <div class="title-bar-controls">
  376. <button aria-label="Minimize"></button>
  377. <button aria-label="Maximize"></button>
  378. <button aria-label="Close"></button>
  379. </div>
  380. </div>
  381. <div class="window-body">
  382. <img src="{image:music}" style="width:100%; height:auto; max-height:175px;padding-bottom:5px;">
  383. <table>
  384. <tbody>
  385. <tr>
  386. <td>
  387. <audio id="music" src="{text:song url}"></audio>
  388. <button style="margin:5px 0 5px 0; width:50px;margin-top:-5px;font-size:18px" onclick="playpause()"><div class="button" style="font-size:13px;">Play</div></button>
  389. <script>
  390. let player = document.getElementById("music"); //the audio id
  391. let btn = document.getElementById("btn"); //the button id
  392. isPlaying = false; //set to false because it is not playing yet
  393.  
  394. function playpause() {
  395. if (!isPlaying) play(); //if isPlaying is false, then play the music
  396. else pause(); //if isPlaying is true, then pause the music
  397. }
  398.  
  399. function play(){
  400. player.play(); //play the music
  401. isPlaying = true; //set to true because the music is playing
  402. btn.innerHTML = "pause"; //change the button to say pause
  403. }
  404.  
  405. function pause(){
  406. player.pause(); //pause the music
  407. isPlaying = false; //set to false because the music is not playing
  408. btn.innerHTML = "play"; //change the button to say play
  409. }
  410.  
  411. player.onended = function(){
  412. isPlaying = false; //the song has ended, isPlaying is false
  413. btn.innerHTML = "play"; //change the button to say play
  414. }
  415. </script>
  416. </td>
  417. <td>
  418. <div class="field-row" style="max-width: 300px">
  419. <label>Volume:</label>
  420. <label>Low</label>
  421. <input type="range" min="1" max="11" value="5" />
  422. <label>High</label>
  423. </div>
  424. </td>
  425. </tr>
  426. </tbody>
  427. </table>
  428. <ul class="tree-view" style=" font-size:{text:text size}px;">
  429. Song: {text:song title}
  430. <hr style="width:100%; margin-bottom:-5px;">
  431. <br>Artist: {text:song artist}
  432. </ul>
  433. </div>
  434. </div>
  435. </div>
  436.  
  437. <!------------------------------------------------------------------->
  438.  
  439. <div id="link-container">
  440.  
  441. <div class="link-1">
  442. <a href="/">
  443. <img src="{image:link 1}" style="width:50px;max-width:50px;">
  444. <br>Home
  445. </a>
  446. </div>
  447.  
  448. <div class="link-2">
  449. <a href="/ask">
  450. <img src="{image:link 2}" style="width:50px;max-width:50px;">
  451. <br>{AskLabel}
  452. </a>
  453. </div>
  454.  
  455. <div class="link-3">
  456. <a href="/archive">
  457. <img src="{image:link 3}" style="width:50px;max-width:50px;">
  458. <br>{lang:Archive}
  459. </a>
  460. </div>
  461.  
  462. <div class="link-4">
  463. <a href="https://cloverparty.tumblr.com/tagged/mine">
  464. <img src="{image:link 4}" style="width:50px;max-width:50px;">
  465. <br>Theme credit
  466. </a>
  467. </div>
  468.  
  469. <div class="toggle">
  470. <input type="image" style="width:50px;max-width:50px;" src="{image:link 5}" onclick="toggle(this)">
  471. <br><a href="/">Click me</a>
  472. </div>
  473.  
  474. </div>
  475.  
  476. <!------------------------------------------------------------------->
  477.  
  478. <div id="pop">
  479. <div style="padding:5px; display:none;" id="cont">
  480. <div class="window" style="width: 250px">
  481. <div class="title-bar">
  482. <div class="title-bar-text">{text:name}'s Links</div>
  483. <div class="title-bar-controls">
  484. <button aria-label="Minimize"></button>
  485. <button aria-label="Maximize"></button>
  486. <button aria-label="Close"></button>
  487. </div>
  488. </div>
  489. <div class="window-body">
  490. <center>
  491. <img src="{image:links icon}" style="width:100%;max-width:250px;height:auto;margin:0 0 5px 0">
  492. <br><button><a href="{text:link 1 url}">{text:link 1}</a></button>
  493. <button><a href="{text:link 2 url}">{text:link 2}</a></button>
  494. <button><a href="{text:link 3 url}">{text:link 3}</a></button>
  495. </center>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500.  
  501. <!------------------------------------------------------------------->
  502.  
  503. <div id="content">
  504. {block:Posts}
  505. <br>
  506. <div class="window" style="width: 450px">
  507. <div class="title-bar">
  508. <div class="title-bar-text">{text:name}'s Posts</div>
  509. <div class="title-bar-controls">
  510. <button aria-label="Minimize"></button>
  511. <button aria-label="Maximize"></button>
  512. <button aria-label="Close"></button>
  513. </div>
  514. </div>
  515. <div class="window-body">
  516.  
  517. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} --> {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  518. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}-->
  519. {/block:ContentSource}
  520.  
  521. <div class="post">
  522. <div class="posts" post-type="{PostType}">
  523.  
  524.  
  525. <!-- -- -- Images -- -- -->
  526.  
  527. {block:Photo}
  528. {LinkOpenTag}
  529. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  530. {LinkCloseTag}
  531. {block:Caption}
  532. {Caption}
  533. {/block:Caption}
  534. {/block:Photo}
  535. {block:Photoset}
  536. <div class="media">{Photoset}</div>
  537. {block:Caption}
  538. <div class="caption">
  539. {Caption}
  540. </div>
  541. {/block:Caption}
  542. {/block:Photoset}
  543.  
  544. <!-- -- -- text, quotes, links -- -- -->
  545.  
  546. {block:Text}
  547. {block:Title}
  548. <div class="title">{Title}</div>
  549. {/block:Title}
  550. {Body}
  551. {/block:Text}
  552.  
  553.  
  554. {block:Chat}
  555. {block:Title}
  556. <div class="title">
  557. <h3><a href="{Permalink}">{Title}</a></h3></div>
  558. {/block:Title}
  559. {block:Lines}
  560. <div class="{Alt} user_{UserNumber}">
  561. {block:Label}
  562. <span class="label">{Label}</span>
  563. {/block:Label}
  564. {Line}
  565. </div>
  566. {/block:Lines}
  567. {/block:Chat}
  568.  
  569.  
  570. {block:Quote}
  571. <div class="quote">
  572. "{Quote}"
  573. {block:Source}
  574. <div class="source">
  575. - <i>{Source}</i>
  576. </div>
  577. {/block:Source}
  578. </div>
  579. {/block:Quote}
  580.  
  581. {block:Link}
  582. <a href="{URL}" class="link" {Target}>{Name}</a>
  583. {block:Description}
  584. {Description}
  585. {/block:Description}
  586. {/block:Link}
  587.  
  588.  
  589. <!-- -- -- audio & video -- -- -->
  590.  
  591. {block:Video}
  592. {Video-500}
  593. {block:Caption}
  594. {Caption}
  595. {/block:Caption}
  596. {/block:Video}
  597.  
  598. {block:Audio}
  599. <div id= "audioplayer">{AudioPlayerWhite}</div>
  600. {block:AlbumArt}
  601. <div id="albumart">
  602. <img src="{AlbumArtURL}" width="100">
  603. </div>
  604. {/block:AlbumArt}
  605. <div class="trackstuff">
  606. {block:TrackName}
  607. <b><i>{TrackName}</i></b>
  608. {/block:TrackName}
  609. <br>{block:Artist}
  610. <i>{Artist}</i>
  611. {/block:Artist}
  612. </div>
  613. {Caption}
  614. {/block:Audio}
  615.  
  616. <!-- -- -- asks -- -- -->
  617.  
  618. {block:Answer}
  619. <div class="question">
  620. {Asker}: {Question}
  621. </div>
  622. <div class="caption">
  623. {Answer}
  624. </div>
  625. {/block:Answer}
  626.  
  627.  
  628. <!-- -- -- asks -- -- -->
  629.  
  630. {block:Date}
  631. <div class="footer">
  632. <a href="{Permalink}">
  633. {block:NoteCount}
  634. {NoteCount}%
  635. {/block:NoteCount}
  636. </a>
  637.  
  638. {block:HasTags}
  639. <div class="tags">
  640. {block:Tags}
  641. #<a href="{TagURL}">{Tag}</a>
  642. {/block:Tags}
  643. </div>
  644. {/block:HasTags}
  645.  
  646. {block:PermalinkPage}
  647. <div class="notes">
  648. {block:PostNotes}
  649. {PostNotes}
  650. {/block:PostNotes}
  651. </div>
  652. {/block:PermalinkPage}
  653. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  654. </div>
  655. {/block:Date}
  656.  
  657.  
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. {/block:Posts}
  663. </div>
  664.  
  665. <br>
  666. <div class="navi" style="background-color:silver; box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:5px;">
  667. {block:Pagination}
  668. <center>
  669. {block:PreviousPage}
  670. <a href="{PreviousPage}">&#10094;</a>
  671. {/block:PreviousPage}
  672. {block:JumpPagination length="3"}
  673. {block:CurrentPage}
  674. <span class="current_page">{PageNumber}</span>
  675. {/block:CurrentPage}
  676. {block:JumpPage}
  677. <a class="jump_page" href="{URL}">{PageNumber}</a>
  678. {/block:JumpPage}
  679. {/block:JumpPagination}
  680. {block:NextPage}
  681. <a href="{NextPage}">&#10095;</a>
  682. {/block:NextPage}
  683. </center>
  684. {/block:Pagination}
  685. </div>
  686.  
  687. <!------------------------------------------------------------------->
  688.  
  689. <script>
  690. $( "#sidebar" ).draggable();
  691. </script>
  692.  
  693. <script>
  694. $( "#song" ).draggable();
  695. </script>
  696.  
  697. <script>
  698. $( ".link-1" ).draggable();
  699. </script>
  700.  
  701. <script>
  702. $( ".link-2" ).draggable();
  703. </script>
  704.  
  705. <script>
  706. $( ".link-3" ).draggable();
  707. </script>
  708.  
  709. <script>
  710. $( ".link-4" ).draggable();
  711. </script>
  712.  
  713. <script>
  714. $( ".toggle" ).draggable();
  715. </script>
  716.  
  717. <script>
  718. $( "#pop" ).draggable();
  719. </script>
  720.  
  721. <script>
  722. function toggle(ele) {
  723. var cont = document.getElementById('cont');
  724. if (cont.style.display == 'block') {
  725. cont.style.display = 'none';
  726.  
  727. document.getElementById(ele.id).value = 'GO!';
  728. }
  729. else {
  730. cont.style.display = 'block';
  731. document.getElementById(ele.id).value = 'Bye';
  732. }
  733. }
  734. </script>
  735.  
  736.  
  737. </body>
  738. </html>
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!