API tools faq
paste
Advertisement
jellyparty

win98 tumblr theme

jellyparty
Jul 18th, 2022 (edited)
8,791
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.67 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3.  
  4. <!----- ----- ----- ----- ----- ----- ----- -----
  5.  
  6. WIN98 by emoticon ^_^
  7.  
  8.  
  9. .........
  10. .'------.' | Plug and Play
  11. | .-----. | |
  12. | | | | |
  13. __| | | | |;. _______________
  14. / |*`-----'.|.' `; //
  15. / `---------' .;' //
  16. /| / .''''////////;' //
  17. |=| .../ ######### /;/ //|
  18. |/ / / ######### // //||
  19. / `-----------' // ||
  20. /________________________________//| ||
  21. `--------------------------------' | ||
  22. : | || | || |__LL__|| || | ||
  23. : | || | || | || `""'
  24. n | || `""' | ||
  25. M | || | ||
  26. | || | ||
  27. `""' `""'
  28.  
  29.  
  30. 1) Please don't change the credit link, you can change the shooting star to a pixel/something else, but please don't edit the redirect path
  31.  
  32. 2) Please don't use as a base code (you can edit to your liking just don't redistribute please)
  33.  
  34. 3) Make sure you use a color's RGB for the floatie glow color; you can use this website https://www.color-hex.com/... Here is an example: 24, 41, 255
  35.  
  36.  
  37. special thanks to ;
  38. sadthemes on tumblr
  39. https://github.com/jdan/98.css
  40. and u
  41.  
  42. ===============================
  43. // Updates
  44. // 4/4/2023: fixed an issue where the description would overflow out of the sidebar.
  45.  
  46. ----- ----- ----- ----- ----- ----- ----- ------>
  47.  
  48.  
  49. <!------------ img ------------>
  50. <meta name="image:background" content="">
  51. <meta name="image:header" content="">
  52.  
  53. <meta name="image:favicon" content="">
  54. <meta name="image:cursor" content="">
  55.  
  56. <meta name="image:link 1" content="">
  57. <meta name="image:link 2" content="">
  58. <meta name="image:link 3" content="">
  59. <meta name="image:link 4" content="">
  60.  
  61. <meta name="image:floatie" content="">
  62.  
  63.  
  64. <!------------ opt ------------>
  65. <meta name="if:full background" content="">
  66. <meta name="if:marquee website title" content="">
  67. <meta name="if:image hue shift on hover" content="">
  68.  
  69. <meta name="if:link glow" content="">
  70. <meta name="if:link border" content="">
  71. <meta name="if:bold links" content="">
  72. <meta name="if:link underline" content="">
  73. <meta name="if:rainbow links" content="">
  74.  
  75. <meta name="if:heart sidebar" content="">
  76. <meta name="if:circle sidebar" content="">
  77.  
  78.  
  79. <!------------ font ------------>
  80. <meta name="select:font" content="pixelated ms sans serif">
  81. <meta name="select:font" content="arial">
  82. <meta name="select:font" content="magica">
  83. <meta name="select:font" content="short stack">
  84. <meta name="select:font" content="ms gothic">
  85. <meta name="select:font" content="roboto mono">
  86.  
  87. <!------------ color ------------>
  88. <meta name="color:background" content="">
  89.  
  90. <meta name="color:content links" content="">
  91. <meta name="color:content links hover" content="">
  92.  
  93. <meta name="color:link glow" content="">
  94. <meta name="color:link glow hover" content="">
  95.  
  96. <meta name="color:link border" content="">
  97. <meta name="color:link border hover" content="">
  98.  
  99. <meta name="color:rainbow link outline" content="">
  100.  
  101. <meta name="color:text selection" content="">
  102. <meta name="color:text selection background" content="">
  103.  
  104. <meta name="color:links" content="">
  105. <meta name="color:links background" content="">
  106.  
  107. <meta name="color:title gradient 1" content="">
  108. <meta name="color:title gradient 2" content="">
  109.  
  110.  
  111. <!------------ txt ------------>
  112. <meta name="text:text size" content="15">
  113.  
  114. <meta name="text:sidebar left" content="110">
  115. <meta name="text:search left" content="235">
  116. <meta name="text:extra box left" content="150">
  117.  
  118. <meta name="text:sidebar top" content="20">
  119. <meta name="text:search top" content="380">
  120. <meta name="text:extra box top" content="340">
  121.  
  122. <meta name="text:marquee website title" content="Welcome to my blog">
  123.  
  124. <meta name="text:name" content="Silly">
  125. <meta name="text:description" content="/">
  126.  
  127. <meta name="text:extra box" content="/">
  128.  
  129. <meta name="text:link 1 url" content="/">
  130. <meta name="text:link 2 url" content="/">
  131. <meta name="text:link 3 url" content="/">
  132. <meta name="text:link 4 url" content="/">
  133.  
  134. <meta name="text:link 1" content="Refresh">
  135. <meta name="text:link 2" content="About me.txt">
  136. <meta name="text:link 3" content="Mailbox">
  137. <meta name="text:link 4" content="Archive">
  138.  
  139. <meta name="text:floatie glow" content="255, 255, 255">
  140. <meta name="text:floatie size" content="150">
  141. <meta name="text:floatie right" content="5">
  142.  
  143.  
  144. <!------------ basic ------------>
  145. {block:ifnotmarqueewebsitetitle}
  146. <title>{Title}</title>
  147. {/block:ifnotmarqueewebsitetitle}
  148. <link rel="shortcut icon" href="{image:favicon}">
  149. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  150. {block:Description}
  151. <meta name="description" content="{MetaDescription}" />
  152. {/block:Description}
  153.  
  154.  
  155. <!------------ script ------------>
  156. <link rel="stylesheet" href="https://unpkg.com/98.css">
  157. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  158. <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  159. <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  160. {block:ifmarqueewebsitetitle}
  161. <title>{text:marquee website title}</title>
  162. <script>var documentTitle = document.title + " ★ ";
  163.  
  164. (function titleMarquee() {
  165. document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
  166. setTimeout(titleMarquee, 200);
  167. })();</script>
  168. {/block:ifmarqueewebsitetitle}
  169.  
  170. <style type="text/css">
  171.  
  172. body{
  173. cursor:url("{image:cursor}"), default;
  174. background:{color:background};
  175. background-image:url('{image:background}');
  176. background-attachment:fixed;
  177. font-family:{select:font};
  178. font-size:{text:text size}px;
  179. {block:iffullbackground}
  180. background-size: cover;
  181. {/block:iffullbackground};}
  182.  
  183. a{
  184. text-decoration:none;
  185. color:{color:content links};
  186. {block:iflinkglow}
  187. text-shadow: 0 0 10px {color:link glow}; 0 0 10px;
  188. {/block:iflinkglow};
  189. {block:ifboldlinks}
  190. font-weight:bold;
  191. {/block:ifboldlinks}
  192. {block:iflinkunderline}
  193. text-decoration:underline;
  194. {/block:iflinkunderline}
  195. {block:ifrainbowlinks}
  196. -webkit-text-stroke: 0.5px {color:rainbow link outline};
  197. text-decoration: none;
  198. color: white;
  199. display: inline-block;
  200. background-size: 120% 100%;
  201. -webkit-background-clip: text;
  202. -webkit-text-fill-color: transparent;
  203. -moz-background-clip: text;
  204. -moz-text-fill-color: transparent;
  205. -ms-background-clip: text;
  206. -ms-text-fill-color: transparent;
  207. background-clip: text;
  208. text-fill-color: transparent;
  209. transition: all 0.15s cubic-bezier(0.68, -0.25, 0.265, 1.25);
  210. background-image: linear-gradient(45deg, #f393fe, #ce93ff, #909cff, #8fd4ff, #90ffef, #93ff92, #e0fe93, #fde091, #ffba91, #ff939c, #fe92dc);
  211. {/block:ifrainbowlinks}
  212. {block:iflinkborder}
  213. text-shadow: -1px 0 {color:link border}, 0 1px {color:link border}, 1px 0 {color:link border}, 0 -1px {color:link border};
  214. {/block:iflinkborder};
  215. cursor:url("{image:cursor}"), default;}
  216.  
  217. a:hover{
  218. color:{color:content links hover};
  219. {block:iflinkglow}
  220. text-shadow: 0 0 10px {color:link glow hover}; 0 0 10px;
  221. {/block:iflinkglow};
  222. {block:iflinkborder}
  223. text-shadow: -1px 0 {color:link border hover}, 0 1px {color:link border hover}, 1px 0 {color:link border hover}, 0 -1px {color:link border hover};
  224. {/block:iflinkborder};
  225. font-style:italic;}
  226.  
  227. @font-face{
  228. font-family: 'Magica';
  229. src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);}
  230.  
  231. ::selection{
  232. color:{color:text selection};
  233. background-color:{color:text selection background};}
  234.  
  235. .npf_row {
  236. margin: 0 !important;}
  237. blockquote{
  238. margin: 0px;}
  239. p{
  240. margin:0 0 10px 0;
  241. padding:0;}
  242.  
  243.  
  244. /* -------------------- post -------------------- */
  245. #postcontent{
  246. margin-top:20px;
  247. width:450px;
  248. margin-top:5px;
  249. margin-left:600px;}
  250.  
  251. .post, .naviga{
  252. margin:0 0 15px 0;
  253. overflow:hidden;
  254. padding:5px;}
  255.  
  256. .post img {
  257. max-width:100%;
  258. height:auto;}
  259.  
  260.  
  261. /* -------------------- header -------------------- */
  262. #container{
  263. top:{text:sidebar top}px;
  264. background:white
  265. width:590px;
  266. left:{text:sidebar left}px;
  267. padding:5px;
  268. position:fixed;}
  269.  
  270. #description{
  271. padding:5px;
  272. overflow-y:auto;
  273. overflow-x:hidden;
  274. width:170px;
  275. text-align:center;
  276. max-height:140px;}
  277.  
  278. #second{
  279. position:fixed;
  280. top:{text:search top}px;
  281. left:{text:search left}px;}
  282.  
  283. #third{
  284. position:fixed;
  285. top:{text:extra box top}px;
  286. left:{text:extra box left}px;}
  287.  
  288. #fart{
  289. overflow-y:auto;
  290. text-align:center;
  291. overflow-x:hidden;
  292. max-height:50px;}
  293.  
  294.  
  295. .header img{
  296. {block:ifheartsidebar}
  297. -webkit-mask-image:url(https://64.media.tumblr.com/530d6f82ba12efe719853b50499b1d5d/b58a88777157fa9c-6e/s500x750/69a0aa24e15c4c98f2b7ce62f6c00544e0b3a1c3.png);
  298. -webkit-mask-repeat:no-repeat;
  299. -webkit-mask-size:cover;
  300. {/block:ifheartsidebar}
  301. {block:ifcirclesidebar}
  302. border-radius:100%;
  303. {/block:ifcirclesidebar}
  304. max-height:100%;
  305. max-width:100%;
  306. max-width:180px;}
  307.  
  308. #linky{
  309. text-align:center;
  310. width:60px;
  311. position:fixed;
  312. top:70px;
  313. padding:5px;}
  314.  
  315. .search{
  316. width:155px;
  317. height:10px;
  318. margin-top:5px;
  319. padding:5px;
  320. color:black;}
  321.  
  322. .enter{
  323. height:20px;}
  324.  
  325.  
  326. /* -------------------- etc -------------------- */
  327. .window-body{
  328. font-family:{select:font};
  329. font-size:{text:text size}px;}
  330.  
  331. .title-bar{
  332. background-image: linear-gradient(to bottom left, {color:title gradient 1}, {color:title gradient 2});}
  333.  
  334. .footer:hover .tags{
  335. opacity:1;
  336. transition:0.4s ease;
  337. max-height:1000px;
  338. margin-bottom:10px;
  339. padding-bottom:15px;
  340. margin-top:5px;}
  341.  
  342. .tags{
  343. opacity:0;
  344. transition:0.4s ease;
  345. margin-top:5px;
  346. max-height:0px;}
  347.  
  348. ol.notes{
  349. list-style-type:none;
  350. padding:3px;
  351. overflow:auto;}
  352.  
  353. {block:ifimagehueshiftonhover}
  354. img{
  355. -webkit-filter: hue-rotate(0deg);
  356. -webkit-transition: 5s ease-in-out;
  357. -moz-filter: grayscale(0%);
  358. -moz-transition: 5s ease-in-out;
  359. -o-filter: grayscale(0%);
  360. -o-transition: 5s ease-in-out;}
  361.  
  362. img:hover{
  363. animation-iteration-count:infinite;
  364. -webkit-filter: hue-rotate(360deg);
  365. -webkit-transition: 5s ease-in-out;
  366. -moz-filter: hue-rotate(360deg);
  367. -moz-transition: 5s ease-in-out;
  368. -o-filter: hue-rotate(360deg);
  369. -o-transition: 5s ease-in-out;}
  370. {block:ifimagehueshiftonhover}
  371.  
  372. #credit{
  373. font-size:25px;
  374. position:fixed;
  375. left:5px;
  376. bottom:5px;}
  377.  
  378. .ask{
  379. margin:0 0 10px 0;
  380. padding:2px;}
  381.  
  382. #floatie{
  383. position:fixed;
  384. right:{text:floatie right}px;
  385. bottom:5px;
  386. filter: drop-shadow(0 0 0.75rem rgb({text:floatie glow}));}
  387.  
  388.  
  389. {CustomCss}
  390. </style>
  391. </head>
  392. <body>
  393.  
  394. <!------------ side ------------>
  395.  
  396. <div id="container">
  397. <div id="header">
  398. <div class="window" style="width: 400px">
  399. <div class="title-bar">
  400. <div class="title-bar-text">{text:name}'s Information</div>
  401. <div class="title-bar-controls">
  402. <button aria-label="Minimize"></button>
  403. <button aria-label="Maximize"></button>
  404. <button aria-label="Close"></button>
  405. </div>
  406. </div>
  407. <div class="window-body">
  408. <table>
  409. <tbody>
  410. <tr>
  411. <td style="width:180px;">
  412. <div class="header img"><a href="/"><img style='height: 165px; width:180px; object-fit: cover' src="{image:header}"></a>
  413. </div></td>
  414. <td style="width:180px;">
  415. <div id="description">
  416. {text:description}
  417. </div>
  418. </td>
  419. </tr>
  420. </tbody>
  421. </table>
  422. </div>
  423. </div>
  424. <div id="second">
  425. <div class="window" style="width: 250px">
  426. <div class="title-bar">
  427. <div class="title-bar-text">{text:name}'s Information</div>
  428. <div class="title-bar-controls">
  429. <button aria-label="Minimize"></button>
  430. <button aria-label="Maximize"></button>
  431. <button aria-label="Close"></button>
  432. </div>
  433. </div>
  434. <div class="window-body">
  435. <div id="second2">
  436. <form action="/search" method="get">
  437. <input class="search" type="text" placeholder="{text:searchbar text}" name="q" value="" style="outline:none;">
  438. <input class="enter" type="submit" value="Search" id="sb"/>
  439. </form>
  440. <p>
  441. {block:Pagination}
  442. <center>
  443. {block:PreviousPage}
  444. <a href="{PreviousPage}"><button>&#10094; Back</button></a>
  445. {/block:PreviousPage}
  446. {block:NextPage}
  447. <a href="{NextPage}"><button>Next &#10095</button></a>
  448. {/block:NextPage}
  449. {block:PermalinkPage}
  450. {/block:PermalinkPage}
  451. {/block:Pagination}
  452. </div>
  453. </div>
  454. </div>
  455. </div>
  456.  
  457. <div id="third">
  458. <div class="window" style="width: 250px">
  459. <div class="title-bar">
  460. <div class="title-bar-text">{text:name}'s Information</div>
  461. <div class="title-bar-controls">
  462. <button aria-label="Minimize"></button>
  463. <button aria-label="Maximize"></button>
  464. <button aria-label="Close"></button>
  465. </div>
  466. </div>
  467. <div class="window-body">
  468. <div id="fart">
  469. {text:extra box}
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476.  
  477. <!------------ link ------------>
  478.  
  479. <div id="linky">
  480. <div class="link1"><a href="{text:link 1 url}"><img style="margin:0 0 10px 0" src="{image:link 1}">
  481. <br><text style="background-color:{color:links background}; color:{color:links}; font-family:{select:font};">{text:link 1}</text></a></div>
  482. <div class="link2"><p><a href="{text:link 2 url}"><img style="margin:10px 0 5px 0; max-width:100px" src="{image:link 2}"><br><text style="background-color:{color:links background}; font-family:{select:font}; color:{color:links};">{text:link 2}</text></a></div>
  483. <div class="link3"><p><a href="{text:link 3 url}"><img style="margin:10px 0 5px 0" src="{image:link 3}"><br><text style="background-color:{color:links background}; font-family:{select:font}; color:{color:links};">{text:link 3}</text></a></div>
  484. <div class="link4"><p><a href="{text:link 4 url}"><img style="margin:10px 0 5px 0" src="{image:link 4}"><br><text style="background-color:{color:links background}; font-family:{select:font}; color:{color:links};">{text:link 4}</text></a></div>
  485. </div>
  486.  
  487. <!------------ posts ------------>
  488.  
  489. <div id="postcontent">
  490. {block:Posts}
  491. <br>
  492. <div class="background">
  493. <div class="window" style="width: 450px">
  494. <div class="title-bar">
  495. <div class="title-bar-text">{text:name}'s Posts</div>
  496. <div class="title-bar-controls">
  497. <button aria-label="Minimize"></button>
  498. <button aria-label="Maximize"></button>
  499. <button aria-label="Close"></button>
  500. </div>
  501. </div>
  502. <div class="window-body">
  503. <!--{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}
  504. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  505. {/block:ContentSource}
  506. <div class="post">
  507. <!-- Text -->
  508. {block:Text}
  509. {block:Title}
  510. <div class="title">{Title}</div>
  511. {/block:Title}
  512. {Body}
  513. {/block:Text}
  514. {block:Chat}
  515. {block:Title}
  516. <div class="title">
  517. <h3><a href="{Permalink}">{Title}</a></h3></div>
  518. {/block:Title}
  519. {block:Lines}
  520. <div class="{Alt} user_{UserNumber}">
  521. {block:Label}
  522. <span class="label">{Label}</span>
  523. {/block:Label}{Line}
  524. </div>
  525. {/block:Lines}
  526. {/block:Chat}
  527.  
  528.  
  529. <!-- Images --->
  530. {block:Photo}
  531. {LinkOpenTag}
  532. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  533. {LinkCloseTag}
  534. {block:Caption}
  535. {Caption}
  536. {/block:Caption}
  537. {/block:Photo}
  538. {block:Photoset}
  539. <div class="media">{Photoset}</div>
  540. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  541. {/block:Photoset}
  542.  
  543. <!-- Video -->
  544. {block:Video}
  545. {Video-500}
  546. {block:Caption}
  547. {Caption}
  548. {/block:Caption}
  549. {/block:Video}
  550.  
  551. <!-- Audio -->
  552. {block:Audio}
  553. <div id= "audioplayer">{AudioPlayerWhite}</div>
  554. {block:AlbumArt}
  555. <div id="albumart">
  556. <img src="{AlbumArtURL}" width="100">
  557. </div>
  558. {/block:AlbumArt}
  559. <div class="trackstuff">
  560. {block:TrackName}<b><i>{TrackName}</i></b>{/block:TrackName}<br>{block:Artist}<i>{Artist}</i>{/block:Artist}</div>
  561. {Caption}
  562. {/block:Audio}
  563.  
  564. <!-- Quote -->
  565. {block:Quote}
  566. <div class="quote">
  567. "{Quote}"
  568. {block:Source}
  569. <div class="source">- <i>{Source}</i></div>
  570. {/block:Source}
  571. </div>
  572. {/block:Quote}
  573.  
  574. <!-- Link -->
  575. {block:Link}
  576. <a href="{URL}" class="link" {Target}>{Name}</a>
  577. {block:Description}
  578. {Description}
  579. {/block:Description}
  580. {/block:Link}
  581.  
  582. <!-- Ask -->
  583. {block:Answer}
  584. <div class="ask">
  585. <div class="question">{Asker}: <b>{Question}</b></div>
  586. </div>
  587. <div class="caption">{Answer}</div>
  588. {/block:Answer}
  589.  
  590. <!-- Footer -->
  591. {block:Date}
  592. <div class="footer">
  593. <a href="{Permalink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a> <img src="{image:footer pixel}"> <a href="{ReblogUrl}">reblog</a> / <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  594.  
  595. <center>{block:HasTags}<div class="tags">{block:Tags}# </b><a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</center>
  596. {block:PermalinkPage}
  597. <text style="text-align:left">
  598. {block:NoteCount}
  599. {block:PostNotes}{PostNotes}{/block:PostNotes}
  600. {/block:NoteCount}
  601. </text>
  602. {/block:PermalinkPage}
  603. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  604. {/block:Date}
  605. </div>
  606. </div>
  607. </div>
  608. </div>
  609. {/block:Posts}
  610.  
  611. </div>
  612. </div>
  613. </div>
  614. </div>
  615. </div>
  616. </div>
  617. </div>
  618.  
  619. <!------------ etc ------------>
  620.  
  621. <div id="floatie">
  622. <img src="{image:floatie}" width="{text:floatie size}px">
  623. </div>
  624.  
  625. <script>
  626. $( "#header" ).draggable();
  627. </script>
  628. <script>
  629. $( "#second" ).draggable();
  630. </script>
  631. <script>
  632. $( "#third" ).draggable();
  633. </script>
  634. <script>
  635. $( ".link1" ).draggable();
  636. </script>
  637. <script>
  638. $( ".link2" ).draggable();
  639. </script>
  640. <script>
  641. $( ".link3" ).draggable();
  642. </script>
  643. <script>
  644. $( ".link4" ).draggable();
  645. </script>
  646. <script>
  647. $( "#floatie" ).draggable();
  648. </script>
  649.  
  650. <!-- please do not edit the credit link :o( -->
  651. <div id="credit">
  652. <a href="https://cloverparty.tumblr.com/tagged/mine">ミ★</a>
  653. </div>
  654. <!-- thank you -->
  655.  
  656. </body>
  657. </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!