Advertisement
heikes

ringtone

Aug 28th, 2020 (edited)
487
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!------
  6.  
  7. ringtone theme by @substats !
  8.  
  9. i finally learned how to use custom fonts lol
  10.  
  11. OK: editing the theme, changing the credit emoji (no hate symbols), being gay
  12. NOT OK: copying code, deleting credit, using as base, being cis
  13.  
  14. ------>
  15.  
  16. <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
  17. <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch&display=swap" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
  20. <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
  21. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  22. <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" type="text/css">
  23. <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
  25. <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  28. <script>
  29. $(document).ready(function(){
  30. $('#sidebar').click(function() {
  31. $('#descy').fadeToggle();
  32. });
  33. });
  34. </script>
  35. {block:ifredirect}
  36. <script>
  37. if(window.location.pathname == '/') location.replace('/tagged/{text:Redirect}');
  38. </script>
  39. {/block:ifredirect}
  40. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  41.  
  42. <meta name="color:Background" content="#ffffff"/>
  43. <meta name="color:Post Background" content="#ffffff"/>
  44. <meta name="color:Link Background" content="#DEDEDE"/>
  45. <meta name="color:Font" content="#000"/>
  46. <meta name="color:Text Shadow" content="#000"/>
  47. <meta name="color:Link" content="#000"/>
  48. <meta name="color:Link Shadow" content="#000"/>
  49. <meta name="color:Link Hover" content="#000"/>
  50. <meta name="color:Desc Link" content="#000"/>
  51. <meta name="color:Scrollbar Thumb" content="#ffffff"/>
  52. <meta name="color:Scrollbar Track" content="#000"/>
  53. <meta name="color:Border" content="#000"/>
  54. <meta name="color:Perma" content="#000"/>
  55. <meta name="color:Perma Background" content="#DEDEDE"/>
  56. <meta name="color:Selection Background" content="#ffffff"/>
  57. <meta name="color:Selection Text" content="#ffffff"/>
  58. <meta name="color:Tooltip" content="#000"/>
  59. <meta name="color:Tooltip Background" content="#ffffff"/>
  60.  
  61. <meta name="image:Favicon" content="https://66.media.tumblr.com/5e3ad8dc23a72167084c2a149cf61698/fbeb9aa7ec92c18f-97/s250x400/cf67826c2ce03f97f078965228cdeb1b1a30a917.png"/>
  62. <meta name="image:Background" content=""/>
  63. <meta name="image:Sidebar Image" content=""/>
  64. <meta name="image:Link Background" content=""/>
  65. <meta name="image:Post Background" content=""/>
  66. <meta name="image:Perma Background" content=""/>
  67. <meta name="image:Tooltip Background" content=""/>
  68.  
  69. <meta name="if:Rainbow Links" content="0"/>
  70. <meta name="if:Rainbow Border" content="0"/>
  71. <meta name="if:Link Shadow" content="1"/>
  72. <meta name="if:Text Shadow" content="1"/>
  73. <meta name="if:Custom Link 1" content="1"/>
  74. <meta name="if:Custom Link 2" content="1"/>
  75. <meta name="if:Custom Link 3" content="1"/>
  76. <meta name="if:Show Tags" content="0"/>
  77. <meta name="if:Rounded" content="0"/>
  78. <meta name="if:Redirect" content="0"/>
  79.  
  80. <meta name="text:Link Font Size" content="25px"/>
  81. <meta name="text:Font Size" content="20px"/>
  82. <meta name="text:Perma Size" content="16px"/>
  83. <meta name="text:Link 1 Title" content="one"/>
  84. <meta name="text:Link 1 url" content="/"/>
  85. <meta name="text:Link 2 Title" content="two"/>
  86. <meta name="text:Link 2 url" content="/"/>
  87. <meta name="text:Link 3 Title" content="three"/>
  88. <meta name="text:Link 3 url" content="/"/>
  89. <meta name="text:Border Width" content="2px"/>
  90. <meta name="text:Redirect" content="leave empty if you dont want it"/>
  91. <meta name="text:Prev Page" content="previous"/>
  92. <meta name="text:Next Page" content="next"/>
  93. <meta name="text:Note Symbol" content="%"/>
  94.  
  95. <meta name="select:Font" content="VT323">
  96. <meta name="select:Font" content="Times New Roman">
  97. <meta name="select:Font" content="Georgia">
  98. <meta name="select:Font" content="Amatic SC">
  99. <meta name="select:Font" content="Helvetica">
  100. <meta name="select:Font" content="Sacramento">
  101. <meta name="select:Font" content="Courier">
  102. <meta name="select:Font" content="Arial">
  103. <meta name="select:Font" content="MS Gothic">
  104. <meta name="select:Font" content="Comic Sans MS">
  105. <meta name="select:Font" content="Orbitron">
  106. <meta name="select:Font" content="Bebas Neue">
  107. <meta name="select:Font" content="Cinzel">
  108. <meta name="select:Font" content="Caveat">
  109. <meta name="select:Font" content="Permanent Marker">
  110. <meta name="select:Font" content="Special Elite">
  111. <meta name="select:Font" content="Grenze Gotisch">
  112. <meta name="select:Font" content="Major Mono Display">
  113.  
  114. <meta name="select:Border" content="solid">
  115. <meta name="select:Border" content="dashed">
  116. <meta name="select:Border" content="dotted">
  117. <meta name="select:Border" content="double">
  118. <meta name="select:Border" content="groove">
  119. <meta name="select:Border" content="ridge">
  120. <meta name="select:Border" content="inset">
  121. <meta name="select:Border" content="outset">
  122.  
  123. <link rel="shortcut icon" href="{image:favicon}">
  124. <title>{Title}</title>
  125.  
  126. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  127. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
  128. {block:Description}
  129. <meta name="description" content="{MetaDescription}"/>
  130. {/block:Description}
  131.  
  132. <style type="text/css">
  133.  
  134. /* SCROLLBAR */
  135. ::-webkit-scrollbar {
  136. width:12px;
  137. }
  138. /* Track */
  139. ::-webkit-scrollbar-track {
  140. box-shadow: inset 0 0 5px gray;
  141. background:{color:Scrollbar Track};
  142. }
  143. /* Handle */
  144. ::-webkit-scrollbar-thumb {
  145. background: {color:Scrollbar Thumb};
  146. }
  147. ::selection {
  148. background-color: {color:Selection Background};
  149. color:{color:Selection Text};
  150. }
  151. ::-moz-selection {
  152. color: {color:Selection Text};
  153. background: {color:Background};
  154. }
  155.  
  156. body {
  157. font-family:{select:Font};
  158. font-size:{text:Font Size};
  159. background-color: {color:Background};
  160. color:{color:Font};
  161. background-image: url({image:Background});
  162. background-size:cover;
  163. background-attachment:fixed;
  164. margin:20px;
  165. {block:iftextshadow}
  166. text-shadow:0px 0px 2px {color:Text Shadow};
  167. {block:iftextshadow}
  168. }
  169.  
  170. #pene {
  171. max-width:1920px;
  172. margin-left:20%;
  173. }
  174.  
  175. #sidebar {
  176. top:20%;
  177. left:17%;
  178. position:fixed;
  179. width:250px;
  180. display: inline-block;
  181. }
  182.  
  183. #sidebar:hover #descy {
  184. opacity:1;
  185. }
  186.  
  187. #sidebar img{
  188. width:100%;
  189. display: block
  190. height:250px;
  191. object-fit:cover;
  192. overflow:hidden;
  193. transition: 1s ease;
  194. margin-bottom:10px;
  195. {block:ifnotrainbowborder}
  196. border: {text:Border Width} {select:Border} {color:Border};
  197. {/block:ifnotrainbowborder}
  198. {block:ifrainbowborder}
  199. border: {text:Border Width} {select:Border} transparent;
  200. border-image:linear-gradient(to top left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  201. border-image-slice:1;
  202. {/block:ifrainbowborder}
  203. {block:ifrounded}
  204. border-radius:10px;
  205. {/block:ifrounded}
  206. transition-duration: 1s;
  207. }
  208.  
  209. #sidebar img:hover {
  210. transform:scaleX(-1);
  211. }
  212.  
  213. #descy {
  214. width:230px;
  215. {block:ifnotrainbowborder}
  216. border: {text:Border Width} {select:Border} {color:Border};
  217. {/block:ifnotrainbowborder}
  218. {block:ifrainbowborder}
  219. border: {text:Border Width} {select:Border} transparent;
  220. border-image:linear-gradient(to top left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  221. border-image-slice:1;
  222. {/block:ifrainbowborder}
  223. padding:5px;
  224. margin:0px 0px 10px;
  225. color:{color:desc link};
  226. font-size:{text:link font size};
  227. text-align:center;
  228. padding:10px;
  229. {block:ifrounded}
  230. border-radius:10px;
  231. {/block:ifrounded}
  232. background-color:{color:Link Background};
  233. background-image: url({image:Link Background});
  234. background-size:cover;
  235. background-attachment:fixed;
  236. opacity:0;
  237. display:inline-block;
  238. transition:1s ease;
  239. position: relative;
  240. }
  241.  
  242. a {
  243. text-decoration:none;
  244. transition-duration: 0.5s;
  245. transition:0.5s ease;
  246. {block:ifnotrainbowlinks}
  247. {block:iflinkshadow}
  248. text-shadow: 0px 0px 2px {color:Link Shadow};
  249. {/block:iflinkshadow}
  250. color:{color:Link};
  251. {/block:ifnotrainbowlinks}
  252. {block:ifrainbowlinks}
  253. background-image: linear-gradient(to left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  254. background-clip: text;
  255. -webkit-background-clip: text;
  256. color: transparent;
  257. {/block:ifrainbowlinks}
  258. }
  259.  
  260. a:hover {
  261. color:{color:Link Hover};
  262. }
  263.  
  264. blockquote {
  265. padding-left:5px;
  266. border-left:1px solid;
  267. color: {color:Font};
  268. margin-left:3px;
  269. margin-bottom:5px;
  270. }
  271.  
  272. iframe, img, embed, object, video {
  273. max-width: 100%;
  274. }
  275.  
  276. img {
  277. height: auto;
  278. width: auto;
  279. }
  280.  
  281. article {
  282. background: {color:post background};
  283. background-image: url({image:Post Background});
  284. background-size:cover;
  285. width:500px;
  286. padding:10px;
  287. font-size:{text:Font Size};
  288. font-family: {select:Font};
  289. position:center;
  290. margin:20px auto;
  291. {block:ifnotrainbowborder}
  292. border: {text:Border Width} {select:Border} {color:Border};
  293. {/block:ifnotrainbowborder}
  294. {block:ifrainbowborder}
  295. border: {text:Border Width} {select:Border} transparent;
  296. border-image:linear-gradient(to top left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  297. border-image-slice:1;
  298. {/block:ifrainbowborder}
  299. {block:ifrounded}
  300. border-radius:10px;
  301. {/block:ifrounded}
  302. }
  303.  
  304. article img {
  305. }
  306.  
  307. .tooltip {
  308. display: inline;
  309. position: relative;
  310. }
  311.  
  312. #s-m-t-tooltip {
  313. transition-duration: 0.5s;
  314. transition:0.5s ease;
  315. text-align:center;
  316. max-width:250px;
  317. padding:5px 5px 5px 5px;
  318. margin:20px;
  319. {block:ifnotrainbowborder}
  320. border: {text:Border Width} {select:Border} {color:Border};
  321. {/block:ifnotrainbowborder}
  322. {block:ifrainbowborder}
  323. border: {text:Border Width} {select:Border} transparent;
  324. border-image:linear-gradient(to top left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  325. border-image-slice:1;
  326. {/block:ifrainbowborder}
  327. background-image:url('{image:tooltip background}');
  328. background-color: {color:tooltip background};
  329. color:{color:tooltip};
  330. z-index:999999999999999999999999999999999999;
  331. {block:ifrounded}
  332. border-radius:10px;
  333. {/block:ifrounded}
  334. }
  335.  
  336. .photo {
  337. }
  338.  
  339. .photoset {
  340. }
  341.  
  342. .quote {
  343. text-align:center;
  344. }
  345.  
  346. .link {
  347. }
  348.  
  349. .audio {
  350. width:100%;
  351. }
  352.  
  353. .video{
  354. }
  355.  
  356. .video-player {
  357. }
  358.  
  359. .answer {
  360. }
  361.  
  362. .ques {
  363. font-weight:bolder;
  364. }
  365.  
  366. .ans {
  367. font-style:normal;
  368. }
  369.  
  370. .chat{
  371. margin-left:-30px;
  372. }
  373.  
  374. .chat span {
  375. float: left;
  376. margin-right: 10px;
  377. }
  378.  
  379. .chat:nth-child(even) {
  380. background:gray;
  381. }
  382.  
  383. .odd{
  384. background:white;
  385. }
  386.  
  387. #perma {
  388. text-align:center;
  389. position: relative;
  390. color:{color:Perma};
  391. margin-top:2px;
  392. padding:2px;
  393. word-spacing:5px;
  394. font-size:{text:Perma Size};
  395. background: {color:Perma Background};
  396. background-image:url({image:Perma Background});
  397. background-position:center;
  398. {block:PermalinkPage}
  399. display:none;
  400. {/block:PermalinkPage}
  401. {block:ifnotrainbowborder}
  402. border: {text:Border Width} {select:Border} {color:Border};
  403. {/block:ifnotrainbowborder}
  404. {block:ifrainbowborder}
  405. border: {text:Border Width} {select:Border} transparent;
  406. border-image:linear-gradient(to top left,#b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  407. border-image-slice:1;
  408. {/block:ifrainbowborder}
  409. }
  410.  
  411. .tumblr_audio_player {
  412. width: 100%;
  413. height: 100px;
  414. overflow: hidden;
  415. position: relative;
  416. z-index: 1000;
  417. }
  418.  
  419. .pagination {
  420. text-align:center;
  421. position:center;
  422. margin-right:50px;
  423. }
  424.  
  425. hr {
  426. }
  427.  
  428. caption {
  429. margin:12px;
  430. }
  431.  
  432. </style>
  433. </head>
  434. <body>
  435.  
  436. <div id="sidebar">
  437. <div id="SidebarImg"><img src={image:Sidebar Image}></div>
  438. {block:ifcustomlink1}
  439. <div id="descy"><a href="{text:link 1 url}"style="color:{color:desc link}">{text:link 1 title}</a></div>
  440. {/block:ifcustomlink1}
  441. {block:ifcustomlink2}<div id="descy" style="transition:1.5s ease;"><a href="{text:link 2 url}"style="color:{color:desc link}">{text:link 2 title}</a> {/block:ifcustomlink2}</div>
  442. {block:ifcustomlink3}<div id="descy" style="transition:2s ease;"><a href="{text:link 3 url}"style="color:{color:desc link}">{text:link 3 title}</a></div> {/block:ifcustomlink3}
  443. </div>
  444.  
  445. <nav>
  446. <ul>
  447. {block:HasPages}
  448. {block:Pages}
  449. <li> <a href="{URL}">{Label}</a></li>
  450. {/block:Pages}
  451. {/block:HasPages}
  452. </ul>
  453. </nav>
  454.  
  455. <div id="pene">
  456. {block:Posts}
  457. <article>
  458. {block:Text}
  459. <div class="text">
  460. {block:Title}<h1 class="title">
  461. <a href="{Permalink}">{Title}</a>
  462. </h1><hr>{/block:Title}
  463. {Body}
  464. {/block:Text}
  465.  
  466. {block:Photo}
  467. <div class="photo">
  468. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  469. {block:Caption}{Caption}{/block:Caption}
  470. {/block:Photo}
  471.  
  472. {block:Photoset}
  473. <div class="photoset">
  474. {block:IndexPage}
  475. {Photoset-500}
  476. {/block:IndexPage}
  477. {block:PermalinkPage}
  478. {Photoset-500}
  479. {/block:PermalinkPage}
  480. {block:Caption}{Caption}{/block:Caption}
  481. {/block:Photoset}
  482.  
  483. {block:Quote}
  484. <div class="quote">
  485. โ {Quote} โž
  486. <br><br>{block:Source}<cite>&mdash; {Source}</cite>{/block:Source}
  487. {/block:Quote}
  488.  
  489. {block:Link}
  490. <div class="link">
  491. <h1 class="title"><a href="{URL}">{Name}</a><hr></h1>
  492. {block:Description}{Description}{/block:Description}
  493. {/block:Link}
  494.  
  495. {block:Chat}
  496. <div class="chat">
  497. <ul>
  498. {block:Lines}
  499. <div class="{Alt} user_{UserNumber}">
  500. {block:Label}
  501. <b>{Label}</b>{/block:Label}
  502. {Line}
  503. </div>
  504. {/block:Lines}
  505. </ul>
  506. {/block:Chat}
  507.  
  508. {block:Audio}
  509. <div class="audio">
  510. {block:AlbumArt}
  511. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  512. {/block:AlbumArt}
  513. {block:AudioEmbed}
  514. {AudioEmbed}
  515. {/block:AudioEmbed}<br>
  516. {block:TrackName}
  517. <b>track:</b> {TrackName}
  518. {/block:TrackName}</span><br>
  519. {block:Artist}
  520. <b>artist:</b> {Artist}
  521. {/block:Artist}
  522. {block:Caption}
  523. {Caption}
  524. {/block:Caption}
  525. {/block:Audio}
  526.  
  527. {block:Video}
  528. <div class="video">
  529. <div class="video-player">{Video-500}</div>
  530. {block:Caption}{Caption}{/block:Caption}
  531. {/block:Video}
  532.  
  533. {block:Answer}
  534. <div class="answer">
  535. {Asker} asked: <b><div class="ques">{Question}</div></b>
  536. <div class="ans">{Answer}</div>
  537. {/block:Answer}
  538. </div>
  539.  
  540. <div id="perma">
  541. <a href="{reblogURL}" title="RB?" style="color:{color:Perma}" >{NoteCount}{text:Note Symbol}</a>
  542. <a href="{Permalink}" title="{Month}/{DayOfMonth}/{Year}" style="color:{color:Perma}">{MonthNumberWithZero}/{DayofMonthWithZero}/{Year}</a>
  543. {block:ifShowTags}{block:HasTags} <a href="{Permalink}"title="{block:Tags}#{Tag}{/block:Tags}"style="color:{color:Perma}" > {block:Tags}#{Tag} {/block:Tags}</a>{block:HasTags} {/block:ifShowTags}
  544. </div>
  545.  
  546. {block:PermalinkPage}
  547. {block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}{/block:Date}
  548. {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
  549. {block:HasTags}</br>tagged as: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  550. {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> - via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  551. {block:PostNotes}{PostNotes-16}{/block:PostNotes}
  552. </div></div>
  553. {/block:PermalinkPage}
  554. </footer>
  555. </article>
  556. {/block:Posts}
  557. </div>
  558. {block:Pagination}
  559. <div class="pagination">
  560. <div class="pagi">
  561. {block:PreviousPage}<a href="{PreviousPage}"style="font-size:50px">{text:Prev Page}</a>{/block:PreviousPage}
  562. {block:NextPage}<a href="{NextPage}"style="font-size:50px">{text:Next Page}</a>{/block:NextPage}
  563. </div></div>
  564. {/block:Pagination}
  565. </div>
  566.  
  567. </body>
  568. </html>
  569.  
  570. <p style=" position:fixed; right: 10px; bottom: -3px; font-size:14px;"><a href="https://substats.tumblr.com/tagged/my-themes" title="@substats">๐Ÿ‡</a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement