API tools faq
paste
Advertisement
userbru

theme eighteen.

userbru
Nov 26th, 2021 (edited)
1,034
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. THEME BY USERBRU
  15. base code by seyches
  16. tumblr controls cyantists
  17. icons from font-awesome and cappuccicons
  18. back to top by backtotopbutton.com
  19. day/night toggle by egg.design
  20. tooltips by tippy
  21. NPF fix by glenthemes
  22. popup by odeysseus
  23. unnest by neothms
  24.  
  25. --->
  26.  
  27. <!---- scripts ---->
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  29. <link rel="stylesheet" href=
  30. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
  31. </link>
  32. <script src="//pull.cappuccicons.com/cpf.js"></script>
  33.  
  34. <link rel="preconnect" href="https://fonts.googleapis.com">
  35. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  36. <link href="https://fonts.googleapis.com/css2?family=Poppins&family=Rubik:wght@375&display=swap" rel="stylesheet">
  37.  
  38. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
  39.  
  40. <!----- VARIABLES AND OPTIONS ----->
  41.  
  42. <meta name="image:Header" content=""/>
  43. <meta name="image:Avatar" content=""/>
  44.  
  45.  
  46. <meta name="color:background" content="#ffffff"/>
  47. <meta name="color:content background" content="#f8f8f8"/>
  48. <meta name="color:posts background" content="#ffffff"/>
  49. <meta name="color:text" content="#707070"/>
  50. <meta name="color:link" content="#313131"/>
  51. <meta name="color:accent" content="#faaa4f"/>
  52. <meta name="color:borders" content="#dcdcdc"/>
  53. <meta name="color:askbg" content="#fff2d0"/>
  54. <meta name="color:info" content="#000"/>
  55. <meta name="color:navborder" content="#ffdca7"/>
  56. <meta name="color:selected text" content="#ffca85"/>
  57. <meta name="color:selected text bg" content="#ffca85" />
  58. <meta name="color:gradient 1" content="#ffd7b6"/>
  59. <meta name="color:gradient 2" content="#f7c282"/>
  60. <meta name="color:nav links" content="#1e1e1e"/>
  61. <meta name="color:nav links hover" content="#925353"/>
  62.  
  63. <meta name="if:Sidebar Avatar" content="1"/>
  64.  
  65. <meta name="text:Desktop Description" content=""/>
  66. <meta name="text:Post Margin" content="150"/>
  67. <meta name="text:Name" content=""/>
  68. <meta name="text:Age" content=""/>
  69. <meta name="text:Pronouns" content=""/>
  70. <meta name="text:Zodiac" content=""/>
  71.  
  72. <meta name="text:link 1 title" content="link"/>
  73. <meta name="text:link 1 url" content=""/>
  74. <meta name="text:link 2 title" content="link"/>
  75. <meta name="text:link 2 url" content=""/>
  76. <meta name="text:link 3 title" content="link"/>
  77. <meta name="text:link 3 url" content=""/>
  78. <meta name="text:link 4 title" content="link"/>
  79. <meta name="text:link 4 url" content=""/>
  80. <meta name="text:link 5 title" content="link"/>
  81. <meta name="text:link 5 url" content=""/>
  82. <meta name="text:link 6 title" content="link"/>
  83. <meta name="text:link 6 url" content=""/>
  84. <meta name="text:link 7 title" content="link"/>
  85. <meta name="text:link 7 url" content=""/>
  86. <!---- day/night toggle----->
  87.  
  88. <script>$(document).ready(function(){
  89. $('.daynight').click(function(){
  90. $(document).ready(function(){
  91. $('.daynight').click(function(){
  92. $('body').toggleClass('night');
  93. $('.daynight span').toggleClass('fa-sun');
  94. });
  95. });
  96. });
  97. });</script>
  98.  
  99.  
  100. <!--- npf fix --->
  101.  
  102. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  103. <!--
  104. NPF images fix v3.0 by @glenthemes [2021]
  105. 💌 git.io/JRBt7
  106. --->
  107. <script src="//npf-images-v3.github.io/script.js"></script>
  108. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  109. <style tmblr-npf>
  110. :root {
  111. --NPF-Caption-Spacing:1em;
  112. --NPF-Image-Spacing:4px;
  113. }
  114. </style>
  115.  
  116. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  117.  
  118.  
  119.  
  120. <!----- CSS ----->
  121.  
  122. <style type="text/css">
  123.  
  124.  
  125. /* TOOLTIPS */
  126. .tippy-tooltip.gradient-theme {
  127. background-image:linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  128. color:var(--boxes);
  129. text-align:center;
  130. font-family:'Poppins', sans-serif;
  131. font-weight:bold;
  132. text-transform:uppercase;
  133. letter-spacing:1px;
  134. font-size:0.90em;
  135. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  136.  
  137. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  138. fill:var(--text);}
  139.  
  140. /*TUMBLR CONTROLS*/
  141.  
  142.  
  143. /*---- scrollbar ----*/
  144. ::-webkit-scrollbar {
  145. width:17px;
  146. height:17px;
  147. }
  148. ::-webkit-scrollbar {
  149. background-color:rgb(255,255,255); /* background color */
  150. }
  151. ::-webkit-scrollbar-track {
  152. border:8px solid rgb(255,255,255); /* background color */
  153. background-color:rgb(230,230,230); /* light border color */
  154. }
  155. ::-webkit-scrollbar-thumb {
  156. border:8px solid rgb(255,255,255); /* background color */
  157. background-color:rgb(144,144,144); /* dark border color */
  158. min-height:24px;
  159. min-width:24px;
  160. }
  161.  
  162.  
  163. /*----- BASIC STYLING -----*/
  164.  
  165. body {
  166. font-family: 'Poppins';
  167. font-size:12.5px;
  168. font-style:lowercase;
  169. color: {color:text};
  170. background-color: {color:background};
  171. line-height: 160%;
  172. word-wrap: break-word;
  173. letter-spacing: 0.04em;
  174. margin: 0;
  175. padding: 0;
  176. }
  177.  
  178. ::selection {
  179. color: {color:selected text};
  180. background: {color:selected text bg};
  181. }
  182.  
  183. a {
  184. color: {color:link};
  185. text-decoration: none;
  186. -webkit-transition: all 0.3s;
  187. -moz-transition: all 0.3s;
  188. -ms-transition: all 0.3s;
  189. -o-transition: all 0.3s;
  190. transition: all 0.3s;
  191. }
  192.  
  193. a:hover {
  194. color: {color:accent};
  195. -webkit-transition: all 0.3s;
  196. -moz-transition: all 0.3s;
  197. -ms-transition: all 0.3s;
  198. -o-transition: all 0.3s;
  199. transition: all 0.3s;
  200. }
  201.  
  202. blockquote {
  203. padding: 0 0 0 1.5em;
  204. border-left: 1px solid {color:borders};
  205. margin: 1.5em 0 1.5em 1.5em;
  206. }
  207.  
  208. h1, h2, h3, h4, h5, .title {
  209. letter-spacing: 0.06em;
  210. line-height: 145%;
  211. font-weight: bold;
  212. }
  213.  
  214. h1, .title {font-size: 1.5em;}
  215. h2 {font-size: 1.3em;}
  216. h3 {font-size: 1.25em;}
  217. h4 {font-size: 1.1em;}
  218. h5 {font-size: 1em;}
  219.  
  220. small {font-size: 0.9em;}
  221. big {font-size: 1.1em;}
  222.  
  223. hr {
  224. height: 1px;
  225. border: none;
  226. box-shadow: none;
  227. background-color: {color:borders};
  228. }
  229.  
  230. pre {
  231. line-height: inherit;
  232. font-size: inherit;
  233. white-space: pre-wrap;
  234. white-space: -moz-pre-wrap;
  235. white-space: -pre-wrap;
  236. white-space: -o-pre-wrap;
  237. word-wrap: break-word;
  238. }
  239.  
  240.  
  241. /* ----- TUMBLR CONTROLS ---- */
  242.  
  243. iframe.tmblr-iframe {
  244. z-index:99999999999999!important;
  245. top: 15px!important;
  246. right: 15px!important;
  247. opacity:0;
  248. padding-right:38px;
  249. -webkit-transform:scale(0.75);
  250. -ms-transform:scale(0.75);
  251. transform:scale(0.75);
  252. -webkit-transform-origin:100% 0;
  253. -ms-transform-origin:100% 0;
  254. transform-origin:100% 0;
  255. -webkit-filter: invert(100%) sepia(0%) hue-rotate(290deg);
  256. filter: invert(60%) sepia(0%) hue-rotate(290deg);
  257.  
  258. cursor: pointer;
  259. }
  260. iframe.tmblr-iframe:hover {
  261. opacity:1!important;
  262. }
  263. .controls {
  264. position:fixed;
  265. top:23px;
  266. right:15px;
  267. z-index:999999999;
  268. cursor: pointer;
  269. }
  270.  
  271.  
  272. .controls:hover {
  273. stroke: var(--bodyLinkHoverColor);
  274. }
  275.  
  276. /*----------HEADER---------*/
  277.  
  278.  
  279.  
  280. .header img {
  281. margin-bottom:0px;
  282. width:640px;
  283. height:auto;
  284. border-radius:10px 10px 10px 0px;
  285. }
  286.  
  287.  
  288.  
  289. .topbar {
  290. width:100%;
  291. height:15px;
  292. background:linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  293. margin-top:-5px;
  294. overflow:hidden;
  295. top:0;
  296.  
  297. }
  298.  
  299.  
  300. .navlinks {
  301. text-align:center;
  302. width:640px;
  303. width:justify;
  304. height:10px;
  305. border-bottom:1px solid {color:borders};
  306. padding:30px;
  307. text-transform:uppercase;
  308. font-size:15px;
  309. font-weight:bold;
  310. text-shadow:1px 1px #c8c1d4;
  311. display:block;
  312. }
  313.  
  314. .navlinks a {
  315. color:{color:nav links};
  316. margin-right:40px;
  317. }
  318.  
  319. .navlinks a:hover {
  320. color:{color:nav links hover};
  321. background-color:{color:gradient 1};
  322. width:50px;
  323. height:200px;
  324. }
  325.  
  326. .navlinks ul {
  327. margin: 0;
  328. padding:0;
  329. }
  330.  
  331. .navlinks li {
  332. margin: 0 15px 0 0;
  333. list-style-type: none;
  334. display: inline;
  335. }
  336.  
  337.  
  338.  
  339. /*----- SIDEBAR -----*/
  340.  
  341. #sidebar {
  342. width: 300px;
  343. margin-left:60px;
  344. position:absolute;
  345. margin-top:-110px;
  346. top: {text:post margin}px;
  347. border-radius:5px;
  348. background:{color:content background};
  349. }
  350.  
  351. .center {
  352. display: block;
  353. margin-left: auto;
  354. margin-right: auto;
  355. width: 128px;
  356. border-radius:100%;
  357. }
  358.  
  359.  
  360. {block:ifSidebarAvatar}
  361.  
  362. #side-img {
  363. margin-bottom: 1.5em;
  364. width:128px;
  365.  
  366.  
  367. }
  368. {/block:ifSidebarAvatar}
  369.  
  370. #description {
  371. margin-top:1.25em;
  372. font-size:12px;
  373. font-family:'Poppins';
  374. text-align:center;
  375. text-shadow:0.5px 0 0.1px gray;
  376. }
  377.  
  378. .search .query {
  379. color:{color:text};
  380. width:268px;
  381. font-family:'Poppins';
  382. text-align:center;
  383. font-size:10px;
  384. border:0px;
  385. margin-top:10px;
  386. outline:none;
  387. }
  388.  
  389. .subtitle {
  390. text-align:center;
  391. font-style:normal;
  392. font-family:'Poppins'';
  393. font-weight:300;
  394. font-size:10px;
  395. margin-top:10px;
  396. margin-bottom:5px;
  397. text-shadow:0.5px 0 0.1px gray;
  398. }
  399.  
  400. .subtitle a:hover{
  401. font-style:italic;
  402. }
  403.  
  404. nav {
  405. margin-top: 1.25em;
  406. border-width:0.1em;
  407. border-style:dashed;
  408. border-radius:3px;
  409. padding:10px;
  410. border-color:{color:navborder};
  411. text-shadow:1px 0px 1px gray;
  412.  
  413. }
  414. nav a {margin: auto 0.5em;}
  415.  
  416. .title {
  417.  
  418. font-family:'Poppins';
  419. font-size:30px;
  420. font-style:bold;
  421. margin-top:0px;
  422. letter-spacing:1px;
  423. text-shadow: 2px 0 1px gray;
  424. }
  425.  
  426. .title a:hover{
  427. font-style:italic;
  428. }
  429.  
  430.  
  431. .cat {
  432. padding:20px;
  433. border:1px solid {color:borders};
  434. margin-bottom:50px;
  435. background:white;
  436. border-radius:5px;
  437. }
  438.  
  439. .cti {
  440. text-transform:uppercase;
  441. font-size:15px;
  442. font-weight:bold;
  443. padding:10px;
  444. text-align:center;
  445. border-bottom:1px solid #eee;
  446. margin-bottom:20px;
  447. color:{color:titles};
  448. background:{color:titles bg};
  449. }
  450.  
  451.  
  452.  
  453. .stats {
  454. padding:10px;
  455. text-align:left;
  456. margin-top:-10px;
  457. height:auto;
  458.  
  459. }
  460.  
  461.  
  462. .stats b {
  463. color:{color:gradient 2};
  464. }
  465.  
  466.  
  467.  
  468. .date {
  469. float:left;
  470. padding:10px;
  471. margin-right:10px;
  472. text-transform:uppercase;
  473. font-weight:bold;
  474. }
  475.  
  476. .e {
  477. padding:10px;
  478.  
  479. }
  480.  
  481.  
  482.  
  483. .off a {
  484. display:block;
  485. padding:10px;
  486. border-bottom:1px solid #eee;
  487. text-transform:uppercase;
  488. font-size:10px;
  489. }
  490.  
  491. .off a:hover {
  492. margin-left:5px;
  493. }
  494.  
  495.  
  496. /*----- POSTS -----*/
  497.  
  498.  
  499. .container {
  500. width:1100px;
  501. margin-left:calc(50% - 550px);
  502. background:{color:content background};
  503. padding:20px;
  504. margin-bottom:10px;
  505. border-radius:5px;
  506.  
  507. }
  508.  
  509.  
  510. .entries {
  511. margin-top:0px;
  512. width:540px;
  513. margin-left:550px;
  514. background:{color:content background};
  515.  
  516. }
  517.  
  518.  
  519. main {
  520. position: relative;
  521. width: calc(300px + {select:post width} + 150px);
  522. margin: auto;
  523. }
  524.  
  525. section {
  526. position: relative;
  527. width: {select:post width};
  528. margin-top:120px;
  529. margin-left: 400px;
  530. }
  531.  
  532. article {
  533. width: 100%;
  534. position: relative;
  535. margin: {text:post margin}px auto;
  536. }
  537.  
  538. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  539.  
  540.  
  541. .posts {
  542. background:{color:posts background};
  543. border:1px solid {color:borders};
  544. border-radius:5px;
  545. width:560px;
  546. padding:20px;
  547. margin-top:-100px;
  548. margin-left:70px;
  549. }
  550.  
  551. /*----- CAPTIONS -----*/
  552.  
  553. .caption {margin-top: 2em; list-style-type: none;}
  554. .text-caption:first-of-type {margin-top: 0;}
  555.  
  556. .user-icon, .ask-icon {
  557. display: inline-block;
  558. vertical-align: middle;
  559. width: 2em;
  560. height: 2em;
  561. margin-right: 1em;
  562. }
  563.  
  564. .username {
  565. display: inline-block;
  566. vertical-align: middle;
  567. font-weight: bold;
  568. }
  569.  
  570. .deactive::after {
  571. content: '(deactivated)';
  572. margin-left: 1em;
  573. opacity: 0.75;
  574. color: {color:text};
  575. }
  576.  
  577. p.tmblr-attribution {margin-top: 1em !important;}
  578.  
  579. /*----- TEXT -----*/
  580.  
  581. h1.post-title {margin-top: 0;}
  582.  
  583. /*----- LINK -----*/
  584.  
  585. a.link-wrap {display: block; border: 1px solid {color:borders};}
  586. .link {padding: 2em;}
  587. .link-host, .link-txt {margin-top: 1.5em;}
  588.  
  589. .npf-link-block {
  590. margin-top: 1.5em;
  591. background-color: inherit;
  592. border: 1px solid inherit;
  593. color: inherit;
  594. }
  595.  
  596. /*----- PHOTO -----*/
  597.  
  598. img {
  599. margin: 0;
  600. display: block;
  601. height: auto;
  602. max-width: 100%;
  603. }
  604.  
  605. .photo img {width: 100%;}
  606. .vignette, #vignette {opacity: 0;}
  607. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  608.  
  609. .lightbox-image, #tumblr_lightbox img {
  610. box-shadow: none !important;
  611. border-radius: 0 !important;
  612. max-width: none;
  613. }
  614.  
  615. #tumblr_lightbox_caption, .lightbox-caption {
  616. color: #fff !important;
  617. font-family: inherit;
  618. margin-top: 1em !important;
  619. }
  620.  
  621. /*----- PHOTOSET -----*/
  622.  
  623. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  624. margin-left: 0 !important;
  625. margin-right: 0 !important;
  626. }
  627.  
  628. /*----- QUOTE -----*/
  629.  
  630. .quote {line-height: 160%; font-size: 1.25em;}
  631.  
  632. .quote p:first-of-type {margin-top: 0;}
  633. .quote p:last-of-type {margin-bottom: 0;}
  634.  
  635. .source {margin-top: 1.5em;}
  636.  
  637. /*----- CHAT -----*/
  638.  
  639. .chat {padding: 0; margin: 0;}
  640. .chat li {list-style-type: none; margin-top: 1em;}
  641. .chat li:first-of-type {margin-top: 0;}
  642. .chatter {font-weight: bold;}
  643.  
  644. p.npf_chat, p.npf_chat b {font-family: inherit;}
  645.  
  646. /*----- ANSWER -----*/
  647.  
  648.  
  649.  
  650. .askerbg {
  651.  
  652. padding: 0px;
  653. border-radius: 100px;
  654.  
  655. }
  656.  
  657. .askerbg img {
  658.  
  659. border-radius:100px!important;
  660.  
  661. }
  662.  
  663.  
  664.  
  665. .question {
  666.  
  667. width: auto;
  668. font-family:'Poppins';
  669. margin-top: 10px;
  670. margin-bottom:20px;
  671. color:{color:text};
  672. padding: 10px;
  673. border-radius: 7px;
  674. background:{color:askbg};
  675.  
  676. }
  677.  
  678.  
  679.  
  680. /*----- AUDIO -----*/
  681.  
  682. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  683.  
  684. .album-art {
  685. z-index: 1;
  686. display: inline-block;
  687. vertical-align: middle;
  688. float: left;
  689. width: 100px;
  690. height: 100px;
  691. }
  692.  
  693. .audio-player-wrap {
  694. width: 100px;
  695. height: 100px;
  696. display: inline-block;
  697. }
  698.  
  699. .button {
  700. width: 30px;
  701. height: 30px;
  702. overflow: hidden;
  703. position: relative;
  704. z-index: 2;
  705. margin: 7px;
  706. }
  707.  
  708. .audiobox {
  709. background-color: #f2f2f2;
  710. z-index: 3;
  711. position: absolute;
  712. margin: 28px 0 0 28px;
  713. border-radius: 50%;
  714. }
  715.  
  716. .audioinfo {
  717. display: inline-block;
  718. height: 100px;
  719. max-width: calc(100% - 100px);
  720. margin-left: 100px;
  721. display: flex;
  722. justify-content: center;
  723. flex-direction: column;
  724. box-sizing: border-box;
  725. padding-left: 2em;
  726. }
  727.  
  728. .audioinfo li {list-style-type: none;}
  729. .track {font-weight: bold;}
  730.  
  731. /*----- INFO -----*/
  732.  
  733. .info {margin-top: 2em;}
  734. .info a {display: inline-block; vertical-align: middle;}
  735.  
  736. .likeb {
  737. position: relative;
  738. display: inline-block;
  739. height: 1.6em;
  740. margin-bottom: -1px;
  741. }
  742.  
  743. .likeb .like_button iframe {
  744. position: absolute;
  745. top: 0;
  746. left: 0;
  747. bottom: 0;
  748. right: 0;
  749. z-index: 2;
  750. opacity: 0;
  751. }
  752.  
  753. .like_button iframe {width: 100% !important; height: 100% !important;}
  754. .likeb .liked + .actual-button {color: red;}
  755. .likeb .liked + .actual-button:after {content: '';}
  756.  
  757. .info a {
  758.  
  759.  
  760. margin-right: 0.75em;
  761. font-family:'Poppins';
  762. font-style:bold;
  763. color:{color:info};
  764.  
  765. }
  766.  
  767. .tags {
  768. margin-right: 0.75em;
  769. font-size:12px;
  770. font-family:'Poppins';
  771. color:{color:text};
  772. }
  773.  
  774. a.pinned-post {font-weight: bold; color: {color:accent};}
  775.  
  776. /*---- POST NOTES -----*/
  777.  
  778. .notes {margin: {text:post margin}px 0;}
  779.  
  780. ol.notes {
  781. max-width: 100%;
  782. padding: 0;
  783. margin: 2em 0 0 0;
  784. }
  785.  
  786. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  787.  
  788. ol.notes li.note img.avatar {
  789. margin-right: 1em;
  790. vertical-align: middle;
  791. display: inline-block;
  792. width: 1.25em;
  793. height: 1.25em;
  794. }
  795.  
  796. /*---- PAGINATION -----*/
  797.  
  798. #page-navigation {text-align: center;}
  799. #page-navigation a, .current-page {margin: 0 0.5em;}
  800. .current-page {font-weight: bold; color: {color:accent};}
  801.  
  802. /*---- CREDIT -----*/
  803.  
  804. #credit {
  805. position: fixed;
  806. bottom: 20px;
  807. right: 20px;
  808. font-size: 10px;
  809. }
  810.  
  811. #scrollToTop:link,
  812. #scrollToTop:visited {
  813.  
  814. display: none;
  815. position: fixed;
  816. bottom:48px;
  817. right:17px;
  818. font-size: 20px;
  819. padding: 13px;
  820. color:{color:Link};
  821.  
  822. }
  823.  
  824.  
  825. /*---- day/night toggle ---*/
  826.  
  827. body.night {
  828. background:#111111;
  829. color:black!important;
  830. transition:.6s;
  831. }
  832. .daynight span {
  833. position: fixed;
  834. top:155px;
  835. left:160px;
  836. font-size: 13px;
  837. cursor:pointer;
  838. padding:10px;
  839. }
  840.  
  841. body.night a, body.night b, body.night i, body.night text { color:gray!important; }
  842.  
  843. body.night header, body.night scrollbar, body.night border, body.night container, body.night posts, body.night footer { background:#111111!important; }
  844.  
  845.  
  846.  
  847. {CustomCSS}
  848.  
  849. </style>
  850.  
  851. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  852. $(document).ready(function(){
  853. $('.click,.fade').click(function() {
  854. $('#pop').fadeToggle();
  855. });
  856. });
  857. </script>
  858.  
  859. </head>
  860.  
  861. <!----- HTML ----->
  862.  
  863. <body>
  864.  
  865.  
  866. <div class="topbar"></div>
  867.  
  868. <div class="cti"><div class="title"><a href="/">{Title}</a></div></div>
  869.  
  870. <center>
  871. <div class="header"><img src="{image:header}"></div>
  872. </center>
  873.  
  874.  
  875.  
  876. <center><div class="navlinks">
  877. <a href="{text:Link 1 URL}" title="{text:Link 1 Title}"><i class="cp cp-cherry-o"></i></a>
  878. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}"><i class="cp cp-chat-bubble-o"></i></a>
  879. <a href="{text:Link 3 URL}" title="{text:Link 3 Title}"><i class="cp cp-bee-o"></i></a>
  880. <a href="{text:Link 4 URL}" title="{text:Link 4 Title}"><i class="cp cp-holly-o"></i></a>
  881. <a href="{text:Link 5 URL}" title="{text:Link 5 Title}"><i class="cp cp-cc-o"></i></a>
  882. <a href="{text:Link 6 URL}" title="{text:Link 6 Title}"><i class="cp cp-moon-o"></i></a>
  883. <a href="{text:Link 7 URL}" title="{text:Link 7 Title}"><i class="cp cp-coffee-cup-o"></i></a>
  884. </div></center>
  885.  
  886.  
  887. <!-- main = main container -->
  888.  
  889. <main>
  890.  
  891. <div class="container">
  892.  
  893. <!----- SIDEBAR ----->
  894. <aside id="sidebar">
  895.  
  896. <div class="cat">
  897. {block:ifSidebarAvatar}<img src="{image:Avatar}" class="center"/></a>{/block:ifSidebarAvatar}
  898. <div class="subtitle"><a href="https://tumblr.com/follow/lizzies">+ @{name}</a></div>
  899. <div id="description">{text:Desktop Description}
  900. </div>
  901.  
  902. <form class="search" action="javascript:return false">
  903. <input type="text" class="query" placeholder="search this blog...">
  904. </form>
  905.  
  906. <center><div class="daynight"><i class="fas fa-toggle-on" style="color:{color:link}"></i></div></center>
  907.  
  908. </div>
  909.  
  910.  
  911. <div class="cat">
  912. <div class="stats">
  913.  
  914.  
  915. <cemter>
  916.  
  917. <b><i class="cp cp-plumbob"></i> NAME</b>: {text:Name}<br>
  918. <b><i class="cp cp-balloons-o"></i> AGE</b>: {text:Age}<br>
  919. <b><i class="cp cp-pokeball"></i> PRONOUNS</b>: {text:Pronouns}<br>
  920. <b><i class="cp cp-planet-o"></i> ZODIAC</b>: {text:Zodiac}</ul>
  921.  
  922. </cemter>
  923. </div>
  924.  
  925. </div>
  926.  
  927.  
  928.  
  929.  
  930.  
  931. <!-- INFO -->
  932.  
  933. <div class="cat">
  934. <div class="sinfo">
  935.  
  936. <center><b>Online:</b> <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5665977";
  937. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  938. fhs.src = "//freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  939. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  940. </script> / <script language="JavaScript">var fhsh = document.createElement('script');var fhs_id_h = "3365694";
  941. fhsh.src = "//freehostedscripts.net/ocount.php?site="+fhs_id_h+"&name=&a=1";
  942. document.head.appendChild(fhsh);document.write("<span id='h_"+fhs_id_h+"'></span>");
  943. </script>
  944. <p>
  945.  
  946.  
  947. </div>
  948.  
  949.  
  950.  
  951. </div>
  952.  
  953.  
  954.  
  955.  
  956. </aside>
  957. <section>
  958.  
  959. <!----- POSTS ----->
  960.  
  961. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  962.  
  963. <article class="posts" id="{PostID}" post-type="{PostType}">
  964.  
  965. {block:Text}
  966. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  967. {block:NotReblog}
  968. <li class="caption text-caption">
  969. {Body}
  970. </li>
  971. {/block:NotReblog}
  972. {block:RebloggedFrom}
  973. {block:Reblogs}
  974. <li class="caption text-caption source-head">
  975. <img src="{PortraitURL-64}" class="user-icon">
  976. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  977. {Body}
  978. </li>
  979. {/block:Reblogs}
  980. {/block:RebloggedFrom}
  981. {/block:Text}
  982.  
  983. {block:Link}
  984. <a href="{URL}" class="link-wrap">
  985. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  986. <div class="link">
  987. <div class="title">{Name}</div>
  988. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  989. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  990. </div>
  991. </a>
  992. {block:Description}
  993. {block:NotReblog}
  994. <li class="caption">
  995. {Description}
  996. </li>
  997. {/block:NotReblog}
  998. {/block:Description}
  999. {block:RebloggedFrom}
  1000. {block:Reblogs}
  1001. <li class="caption">
  1002. <img src="{PortraitURL-64}" class="user-icon">
  1003. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1004. {Body}
  1005. </li>
  1006. {/block:Reblogs}
  1007. {/block:RebloggedFrom}
  1008. {/block:Link}
  1009.  
  1010. {block:Photo}
  1011. <div class="photo">
  1012. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1013. </div>
  1014. {block:Caption}
  1015. {block:NotReblog}
  1016. <li class="caption">
  1017. {Caption}
  1018. </li>
  1019. {/block:NotReblog}
  1020. {block:RebloggedFrom}
  1021. {block:Reblogs}
  1022. <li class="caption">
  1023. <img src="{PortraitURL-64}" class="user-icon">
  1024. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1025. {Body}
  1026. </li>
  1027. {/block:Reblogs}
  1028. {/block:RebloggedFrom}
  1029. {/block:Caption}
  1030. {/block:Photo}
  1031.  
  1032. {block:Photoset}
  1033. <div class="photo">{Photoset-700}</div>
  1034. {block:Caption}
  1035. {block:NotReblog}
  1036. <li class="caption">
  1037. {Caption}
  1038. </li>
  1039. {/block:NotReblog}
  1040. {block:RebloggedFrom}
  1041. {block:Reblogs}
  1042. <li class="caption">
  1043. <img src="{PortraitURL-64}" class="user-icon">
  1044. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1045. {Body}
  1046. </li>
  1047. {/block:Reblogs}
  1048. {/block:RebloggedFrom}
  1049. {/block:Caption}
  1050. {/block:Photoset}
  1051.  
  1052. {block:Video}
  1053. <div class="video">{Video-500}</div>
  1054. {block:Caption}
  1055. {block:NotReblog}
  1056. <li class="caption">
  1057. {Caption}
  1058. </li>
  1059. {/block:NotReblog}
  1060. {block:RebloggedFrom}
  1061. {block:Reblogs}
  1062. <li class="caption">
  1063. <img src="{PortraitURL-64}" class="user-icon">
  1064. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1065. {Body}
  1066. </li>
  1067. {/block:Reblogs}
  1068. {/block:RebloggedFrom}
  1069. {/block:Caption}
  1070. {/block:Video}
  1071.  
  1072. {block:Quote}
  1073. <div class="quote">{Quote}</div>
  1074. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1075. {/block:Quote}
  1076.  
  1077. {block:Chat}
  1078. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1079. <ul class="chat">{block:Lines}
  1080. <li>
  1081. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1082. {Line}
  1083. </li>
  1084. {/block:Lines}</ul>
  1085. {/block:Chat}
  1086.  
  1087. {block:Answer}
  1088. <table style="padding-bottom:5px;margin-bottom:5px;">
  1089. <tr>
  1090. <td class="askerbg" style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}"></td><td style="vertical-align:top;"><strong>{Asker} asked:</strong>
  1091. <div class="question">{Question}</div>
  1092. </td>
  1093. </tr>
  1094. </table>
  1095. {Answer}
  1096. {/block:Answer}
  1097.  
  1098. {block:Audio}
  1099. <div class="audiopost">
  1100. <div class="audiobox">
  1101. <div class="button">
  1102. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1103. </div>
  1104. </div>
  1105. {block:AlbumArt}
  1106. <img src="{AlbumArtURL}" class="album-art">
  1107. {/block:AlbumArt}
  1108. <div class="audioinfo">
  1109. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1110. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1111. {block:Album}<li>{Album}</li>{/block:Album}
  1112. </div>
  1113. </div>
  1114. {block:Caption}
  1115. {block:NotReblog}
  1116. <li class="caption">
  1117. {Caption}
  1118. </li>
  1119. {/block:NotReblog}
  1120. {block:RebloggedFrom}
  1121. {block:Reblogs}
  1122. <li class="caption">
  1123. <img src="{PortraitURL-64}" class="user-icon">
  1124. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1125. {Body}
  1126. </li>
  1127. {/block:Reblogs}
  1128. {/block:RebloggedFrom}
  1129. {/block:Caption}
  1130. {/block:Audio}
  1131.  
  1132. <!----- INFO ----->
  1133.  
  1134. {block:Date}
  1135. <div class="info">
  1136. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="fas fa-thumbtack"></i> {PinnedPostLabel}</a>{/block:PinnedPostLabel}
  1137. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}" style="text-transform:lowercase"><i class="cp cp-calendar-o" style="font-size:15px; font-weight:bold;"></i></a>
  1138. {block:NoteCount} <a href="{Permalink}" title="{NoteCountWithLabel}"><i class="cp cp-graph-o" style="font-size:15px; font-weight:bold;"></i></a>{/block:NoteCount}
  1139.  
  1140. <!-- reblog info and content source on permalink pages -->
  1141.  
  1142. {block:PermalinkPage}
  1143.  
  1144. {block:RebloggedFrom}
  1145. <a href="{ReblogParentURL}" title="reblogged from"><i class="cp cp-chevron-left" style="font-size:15px; font-weight:bold;"></i></a>
  1146. <a href="{ReblogRootURL}" title="original poster"><i class="cp cp-compass-o" style="font-size:15px; font-weight:bold;"></i></a>
  1147. {/block:RebloggedFrom}
  1148.  
  1149. {/block:PermalinkPage}
  1150.  
  1151. <!-- like and reblog buttons -->
  1152.  
  1153. <a href="{ReblogURL}" target="_blank" title="reblog this post"><i class="cp cp-reblog-alt" style="font-size:15px; font-weight:bold;"></i></a>
  1154.  
  1155. <a class="likeb" href="#" title="like this post">{LikeButton}<span class="actual-button"><i class="cp cp-heart-o" style="font-size:15px; font-weight:bold;"></i></span></a>
  1156.  
  1157. </div>
  1158. {/block:Date}
  1159.  
  1160. <!----- TAGS ----->
  1161.  
  1162. {block:HasTags}
  1163. <div class="tags">
  1164. {block:Tags}<a href="{TagURL}">#{Tag} &nbsp;</a>{/block:Tags}
  1165. </div>
  1166. {/block:HasTags}
  1167.  
  1168. <!----- POST NOTES ----->
  1169.  
  1170. {block:PermalinkPage}{block:Date}
  1171. {block:NoteCount}{block:PostNotes}
  1172. <div class="notes">
  1173. {PostNotes-64}
  1174. </div>
  1175. {/block:PostNotes}{/block:NoteCount}
  1176. {/block:Date}{/block:PermalinkPage}
  1177.  
  1178. </article>
  1179. {/block:Posts}
  1180.  
  1181. <!-- end of posts container -->
  1182.  
  1183. </section>
  1184.  
  1185. <!----- PAGINATION ----->
  1186.  
  1187. {block:Pagination}
  1188. <article id="page-navigation">
  1189. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  1190. {block:JumpPagination length="5"}
  1191. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1192. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1193. {/block:JumpPagination}
  1194. {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
  1195. </article>
  1196. {/block:Pagination}
  1197.  
  1198. </div>
  1199. <!-- end of main container -->
  1200.  
  1201. <!-- tumblr controls -->
  1202.  
  1203. <div class="controls"><i class="fas fa-power-off"></i></div>
  1204. </main>
  1205.  
  1206. <!----- CREDIT: DO NOT REMOVE ----->
  1207.  
  1208. <a href="https://userbru.tumblr.com" title="by userbru" id="credit"><i class="far fa-moon"></i></a>
  1209.  
  1210.  
  1211. {block:IfScrollToTop}<script>var topButton = "sleek/simple-light";</script><script src="//backtotopbutton.com/script/toTop.js"></script>{/block:IfScrollToTop}
  1212.  
  1213.  
  1214. <script>
  1215. $(document).ready(function(){
  1216. $('.search').submit(function(event){
  1217. var value = $('input:first').val();
  1218. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  1219. });
  1220. });
  1221. </script>
  1222.  
  1223.  
  1224. </body>
  1225.  
  1226.  
  1227. <script src="https://unpkg.com/popper.js@1"></script>
  1228. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1229. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1230.  
  1231.  
  1232.  
  1233. <script>
  1234.  
  1235.  
  1236. tippy('a[title]', {
  1237. theme: 'gradient',
  1238. arrow: false,
  1239. zIndex: 9999999999,
  1240. maxWidth: 300,
  1241.  
  1242. content(reference) {
  1243. const title = reference.getAttribute('title');
  1244. reference.removeAttribute('title');
  1245. return title;
  1246. },
  1247. });
  1248.  
  1249.  
  1250. </script>
  1251.  
  1252. </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!