Advertisement
vitaminholland

Theme — Shivers

Nov 24th, 2021 (edited)
2,467
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 31.85 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- 'Shivers' by vitaminholland -->
  14.  
  15. <!-- Metadata -->
  16.  
  17. <meta name="color:Background" content="#f8f8f8"/>
  18. <meta name="color:Border" content="#eeeeee"/>
  19. <meta name="color:Chat Even Background" content="#f0f0f0"/>
  20. <meta name="color:Link" content="#000000"/>
  21. <meta name="color:Link Hover" content="#cfcfcf"/>
  22. <meta name="color:Like" content="#ec6363"/>
  23. <meta name="color:Main Color" content="#c49eb4"/>
  24. <meta name="color:Pin" content="#31a49d"/>
  25. <meta name="color:Post Background" content="#ffffff"/>
  26. <meta name="color:Pre Background" content="#f8f8f8"/>
  27. <meta name="color:Scrollbar" content="#000000"/>
  28. <meta name="color:Text" content="#555555"/>
  29. <meta name="color:Tooltip Background" content="#000000"/>
  30. <meta name="color:Tooltip Color" content="#ffffff"/>
  31.  
  32. <meta name="select:Heading Font" content="Playfair Display" title="Playfair Display"/>
  33. <meta name="select:Heading Font" content="Lora" title="Lora"/>
  34. <meta name="select:Heading Font" content="Noto Serif Display" title="Noto Serif Display"/>
  35.  
  36. <meta name="select:Body Font" content="Noto Sans" title="Noto Sans"/>
  37. <meta name="select:Body Font" content="DM Sans" title="DM Sans"/>
  38. <meta name="select:Body Font" content="Golos Text" title="Golos Text"/>
  39. <meta name="select:Body Font" content="Karla" title="Karla"/>
  40. <meta name="select:Body Font" content="Nunito Sans" title="Nunito Sans"/>
  41. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  42. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  43.  
  44. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  45. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  46. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  47.  
  48. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  49. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  50.  
  51. <meta name="image:Header Image" content="https://64.media.tumblr.com/f36efd464fd94297ddf3ce954ddf14e0/3d0fd826f28bd5a6-62/s2048x3072/f82938aad1b9e651aae4598155fb201e42bdf893.png"/>
  52.  
  53. <meta name="text:Title" content="Shivers"/>
  54.  
  55. <meta name="text:Location" content="Whereabouts"/>
  56. <meta name="text:Birthday" content="Date Of Birth"/>
  57. <meta name="text:Likes" content="Things You Like"/>
  58.  
  59. <meta name="text:Link 1 URL" content="/"/>
  60. <meta name="text:Link 1 Name" content="Link One"/>
  61. <meta name="text:Link 2 URL" content="/"/>
  62. <meta name="text:Link 2 Name" content="Link Two"/>
  63. <meta name="text:Link 3 URL" content="/"/>
  64. <meta name="text:Link 3 Name" content="Link Three"/>
  65.  
  66. <meta name="text:Updates Title" content="Blog Updates"/>
  67. <meta name="text:Navigation Title" content="Navigation"/>
  68.  
  69. <meta name="text:Update Date 1" content="MM/DD/YYYY"/>
  70. <meta name="text:Update 1" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  71. <meta name="text:Update Date 2" content="MM/DD/YYYY"/>
  72. <meta name="text:Update 2" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  73. <meta name="text:Update Date 3" content="MM/DD/YYYY"/>
  74. <meta name="text:Update 3" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  75.  
  76. <meta name="if:Submit Link" content="1"/>
  77.  
  78. <meta name="if:Updates" content="1"/>
  79. <meta name="if:Navigation" content="1"/>
  80.  
  81. <meta name="if:Hide Tags" content="0"/>
  82. <meta name="if:Show Tags" content="1"/>
  83.  
  84. <meta name="if:Back To Top" content="1"/>
  85.  
  86. <!-- Google Fonts Script -->
  87.  
  88. <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+Display:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  89.  
  90. <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Golos+Text:wght@400;700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  91.  
  92. <!-- Styled Tooltips Script -->
  93.  
  94. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  95.  
  96. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  97.  
  98. <script>
  99. (function($){
  100. $(document).ready(function(){
  101. $("a[title]").style_my_tooltips({
  102. tip_follows_cursor:true,
  103. tip_delay_time:90,
  104. tip_fade_speed:600,
  105. attribute:"title"
  106. });
  107. });
  108. })(jQuery);
  109. </script>
  110.  
  111. <!-- Font Awesome Script -->
  112.  
  113. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  114.  
  115. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  116.  
  117. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  118.  
  119. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  120.  
  121. <script>
  122. tumblr_npf_audio({
  123. emptyTitleText: "",
  124. emptyArtistText: "",
  125. emptyAlbumText: "",
  126. titleLabel: "",    
  127. artistLabel: "",
  128. albumLabel: "",
  129. });
  130. </script>
  131.  
  132. <!-- Unnest Captions Script -->
  133.  
  134. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  135.  
  136. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  137.  
  138. <script>
  139. $(function(){  $('.entries').unnest({
  140. yourCaption: ".text, .caption",
  141. wrapName: ".tumblr_parent",
  142. newCaptionUsername: false,
  143. originalPostCaptionUsername: false,
  144. tumblrAvatars: true,
  145. tumblrAvatarClass: ".tumblr_avatar",
  146. usernameColon: false
  147. });
  148. });
  149. </script>
  150.  
  151. <!-- NPF images fix v3.0 by @glenthemes [2021] 💌 git.io/JRBt7 -->
  152.  
  153. <script src="//npf-images-v3.github.io/script.js"></script>
  154.  
  155. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  156. <style tmblr-npf>
  157. :root {
  158. --NPF-Caption-Spacing: 1em;
  159. --NPF-Image-Spacing: 1px;
  160. }
  161. </style>
  162.  
  163. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  164.  
  165. <!-- Inline Images Resizing Script -->
  166.  
  167. <script>
  168. $(".tmblr-full, figure").each(function(){
  169. var imgWidth = $(this).attr("data-orig-width"),
  170. img = $(this).find("img"),
  171. imgSrc = img.attr("src");
  172. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  173. if (imgWidth >= 500){
  174. img.attr("src",imgSrc.replace("_500.","_1280."));
  175. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  176. }
  177. });  
  178. </script>
  179.  
  180. <!-- PXU Script -->
  181.  
  182. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  183.  
  184. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  185.  
  186. <script>
  187. $(document).ready(function(){
  188. $('.photo-slideshow').pxuPhotoset({
  189. lightbox: true,
  190. rounded: false,
  191. gutter: '1px',
  192. borderRadius: '0px',
  193. photoset: '.photo-slideshow',
  194. photoWrap: '.photo-data',
  195. photo: '.pxu-photo'
  196. });
  197. });
  198. </script>
  199.  
  200. <!-- Responsive Tumblr Videos Script -->
  201.  
  202. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  203.  
  204. <script>
  205. $(document).ready(function() {
  206. flexibleFrames($(".video"));  
  207. });
  208. </script>
  209.  
  210. <!-- Hide & Show Script -->
  211.  
  212. <script>
  213. $(document).ready(function(){
  214. $(".tags").hide();
  215. $(".tags-title").click(function(){
  216. $(this).next(".tags").slideToggle('fast');
  217. });
  218. });
  219. </script>
  220.  
  221. <!-- Scroll To Top Script -->
  222.  
  223. <script type="text/javascript">
  224. $(function() {      
  225. $(window).scroll(function() {
  226. if($(this).scrollTop() != 0) {
  227. $('#top').fadeIn();        
  228. }
  229. else {
  230. $('#top').fadeOut();      
  231. }
  232. });
  233. $('#top').click(function() {
  234. $('body,html').animate({scrollTop:0},600);
  235. });
  236. });
  237. </script>
  238.  
  239. <style type="text/css">
  240.  
  241. .tmblr-iframe--app-cta-button {
  242. display: none!important;
  243. }
  244.  
  245. ::-webkit-scrollbar-thumb:horizontal {
  246. background: {color:Scrollbar};
  247. }
  248.  
  249. ::-webkit-scrollbar-thumb:vertical {
  250. background: {color:Scrollbar};
  251. }
  252.  
  253. ::-webkit-scrollbar {
  254. height: 1px;
  255. width: 1px;
  256. }
  257.  
  258. ::selection {
  259. background: {color:Main Color};
  260. color: white;
  261. }
  262.  
  263. ::-moz-selection {
  264. background: {color:Main Color};
  265. color: white;
  266. }
  267.  
  268. #s-m-t-tooltip {
  269. background: {color:Tooltip Background};
  270. border-radius: 5px;
  271. color: {color:Tooltip Color};
  272. font-size: {select:Uppercase Font Size};
  273. margin-top: 30px;
  274. padding: 5px;
  275. text-align: center;
  276. text-transform: uppercase;
  277. z-index: 999999999999999999999999999999999999;
  278. }
  279.  
  280. body {
  281. background: {color:Background};
  282. color: {color:Text};
  283. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  284. font-family: '{select:Body Font}', sans-serif;
  285. font-size: {select:Body Font Size};
  286. font-style: normal;
  287. font-weight: 400;
  288. hyphens: auto;
  289. letter-spacing: 1px;
  290. margin: 0px;
  291. text-align: left;
  292. text-transform: none;
  293. word-wrap: break-word;
  294. }
  295.  
  296. a {
  297. color: {color:Link};
  298. text-decoration: none;
  299. -webkit-transition: all 0.5s ease;
  300. -moz-transition: all 0.5s ease;
  301. -o-transition: all 0.5s ease;
  302. }
  303.  
  304. a:hover {
  305. color: {color:Link Hover};
  306. }
  307.  
  308. b {
  309. font-weight: 700;
  310. }
  311.  
  312. h1 {
  313. font-family: '{select:Heading Font}', sans-serif;
  314. font-size: 1.5rem;
  315. font-weight: bold;
  316. margin-block-start: 0em;
  317. text-transform: lowercase;
  318. }
  319.  
  320. h2 {
  321. font-size: 1rem;
  322. font-weight: bold;
  323. margin-block-start: 0em;
  324. }
  325.  
  326. blockquote {
  327. border-left: 1px solid {color:Border};
  328. margin: 5px;
  329. padding-left: 5px;
  330. }
  331.  
  332. blockquote img {
  333. height: auto;
  334. max-width: 100%;
  335. }
  336.  
  337. blockquote blockquote {
  338. border-left: 1px solid {color:Border};
  339. padding-left: 5px;
  340. }
  341.  
  342. pre {
  343. background: {color:Pre Background};
  344. border-radius: 5px;
  345. padding: 10px;
  346. white-space: pre-wrap;
  347. }
  348.  
  349. #main-container {
  350. background: {color:Post Background};
  351. margin-left: auto;
  352. margin-right: auto;
  353. width: 903px;
  354. }
  355.  
  356. #left {
  357. background: {color:Post Background};
  358. border-left: 1px solid {color:Border};
  359. height: 100%;
  360. overflow-x: scroll;
  361. position: fixed;
  362. top: 0px;
  363. width: 300px;
  364. }
  365.  
  366. .left-content {
  367. margin-bottom: 20px;
  368. margin-left: 20px;
  369. margin-top: 20px;
  370. width: 260px;
  371. }
  372.  
  373. .search-wrapper {
  374. margin-top: 20px;
  375. width: 100%;
  376. }
  377.  
  378. form {
  379. display: flex;
  380. margin-top: 0em;
  381. margin-block-end: 0em;
  382. }
  383.  
  384. input {
  385. appearance: textfield;
  386. background: {color:Post Background};
  387. border: 1px solid {color:Border}!important;
  388. border-image: initial;
  389. border-radius: 100px;
  390. border-style: none;
  391. border-width: 0px;
  392. color: {color:Text};
  393. cursor: text;
  394. font-family: '{select:Body Font}', sans-serif;
  395. font-size: {select:Uppercase Font Size};
  396. letter-spacing: 1px;
  397. margin: 0px;
  398. outline: 0;
  399. padding: 10px;
  400. text-align: left;
  401. text-indent: 0px;
  402. text-rendering: auto;
  403. text-shadow: none;
  404. text-transform: uppercase;
  405. width: 100%;
  406. -webkit-rtl-ordering: logical;
  407. -webkit-writing-mode: horizontal-tb !important;
  408. }
  409.  
  410. input[type="submit" i] {
  411. display: none!important;
  412. }
  413.  
  414. #box {
  415. margin-bottom: 20px;
  416. margin-top: 20px;
  417. }
  418.  
  419. .box-title {
  420. background: {color:Quote Icon Color};
  421. border: 1px solid {color:Border};
  422. border-radius: 100px;
  423. display: block;
  424. font-size: {select:Uppercase Font Size};
  425. margin-bottom: 20px;
  426. text-transform: uppercase;
  427. }
  428.  
  429. .updates {
  430. margin-bottom: 15px;
  431. }
  432.  
  433. .updates-date {
  434. color: {color:Main Color};
  435. text-align: left;
  436. }
  437.  
  438. .updates-content {
  439. text-align: left;
  440. }
  441.  
  442. .more-links {
  443. font-size: {select:Uppercase Font Size};
  444. margin: -5px;
  445. text-align: left;
  446. text-transform: uppercase;
  447. }
  448.  
  449. .more-links a {
  450. background: {color:Post Background};
  451. border: 1px solid {color:Border};
  452. border-radius: 5px;
  453. display: inline-block;
  454. margin: 5px;
  455. padding: 5px 10px 5px 10px;
  456. }
  457.  
  458. #container {
  459. background: {color:Post Background};
  460. margin-left: 301px;
  461. width: 602px;
  462. }
  463.  
  464. #border-left {
  465. background: {color:Border};
  466. height: 100%;
  467. margin-left: 0px;
  468. position: fixed;
  469. top: 0px;
  470. width: 1px;
  471. }
  472.  
  473. #border-right {
  474. background: {color:Border};
  475. height: 100%;
  476. margin-left: 601px;
  477. position: fixed;
  478. top: 0px;
  479. width: 1px;
  480. }
  481.  
  482. #user-information {
  483. position: relative;
  484. width: 601px;
  485. }
  486.  
  487. .header-image {
  488. height: 250px;
  489. width: 601px;
  490. }
  491.  
  492. .header-image img {
  493. height: 250px;
  494. width: 601px;
  495. }
  496.  
  497. .aitdil-wrapper {
  498. margin-bottom: 52px;
  499. margin-left: 52px;
  500. margin-right: 52px;
  501. margin-top: -52px;
  502. position: relative;
  503. }
  504.  
  505. .avatar-icon {
  506. background: {color:Post Background};
  507. border: 1px solid {color:Border};
  508. border-radius: 100px;
  509. height: 96px;
  510. padding: 3px;
  511. width: 96px;
  512. }
  513.  
  514. .avatar-icon img {
  515. border-radius: 100px;
  516. height: 96px;
  517. width: 96px;
  518. }
  519.  
  520. .title {
  521. color: {color:Main Color};
  522. font-size: 1.2rem;
  523. font-weight: bold;
  524. margin-top: 15px;
  525. text-transform: lowercase;
  526. }
  527.  
  528. .description {
  529. margin-top: 15px;
  530. }
  531.  
  532. .info {
  533. font-size: {select:Uppercase Font Size};
  534. margin-top: 15px;
  535. text-transform: uppercase;
  536. }
  537.  
  538. .info li {
  539. display: inline;
  540. list-style-type: none;
  541. margin-right: 10px;
  542. }
  543.  
  544. .links {
  545. font-size: {select:Uppercase Font Size};
  546. margin-top: 15px;
  547. text-transform: uppercase;
  548. }
  549.  
  550. .links a {
  551. display: inline-block;
  552. margin-right: 10px;
  553. }
  554.  
  555. #posts {
  556. width: 600px;
  557. }
  558.  
  559. .entries {
  560. width: 600px;
  561. }
  562.  
  563. .entries-wrapper {
  564. background: {color:Post Background};
  565. border-top: 1px solid {color:Border};
  566. padding: 50px;
  567. width: 500px;
  568. }
  569.  
  570. .entries img {
  571. height: auto;
  572. max-width: 100%;
  573. }
  574.  
  575. .npf_row img {
  576. width: 100%;
  577. }
  578.  
  579. .tmblr-full {
  580. margin-bottom: 10px;
  581. }
  582.  
  583. .npf_inst {
  584. margin-bottom: 20px;
  585. }
  586.  
  587. .npf-wrapper {
  588. margin: 0px;
  589. }
  590.  
  591. .npf-wrapper .tmblr-full {
  592. display: flex;
  593. }
  594.  
  595. .text-wrapper {
  596. margin: 0px;
  597. }
  598.  
  599. .read_more {
  600. background: {color:Main Color};
  601. border: 1px solid {color:Border};
  602. border-radius: 5px;
  603. color: white;
  604. display: inline-block;
  605. font-size: {select:Uppercase Font Size};
  606. padding: 10px;
  607. text-align: center;
  608. text-transform: uppercase;
  609. width: calc(100% - 22px);
  610. }
  611.  
  612. .read_more:hover {
  613. background: white;
  614. color: {color:Main Color};
  615. }
  616.  
  617. .vignette, #vignette {
  618. opacity: 0;
  619. }
  620.  
  621. .lightbox-image, #tumblr_lightbox img {
  622. border-radius: 0!important;
  623. box-shadow: none!important;
  624. max-width: none;
  625. }
  626.  
  627. .tmblr-lightbox, #tumblr_lightbox {
  628. background-attachment: fixed;
  629. background-image: url('https://i.imgur.com/7wF2zbK.png');
  630. background-repeat: repeat;
  631. }
  632.  
  633. .lightbox-caption, #tumblr_lightbox_caption {
  634. visibility: hidden;
  635. }
  636.  
  637. .text p {
  638. margin-top: 0px;
  639. }
  640.  
  641. .caption {
  642. margin-top: 20px;
  643. }
  644.  
  645. .caption p {
  646. margin-top: 0px;
  647. }
  648.  
  649. blockquote.tumblr_parent {
  650. border: none;
  651. border-bottom: 1px solid {color:Border};
  652. margin: 0px;
  653. margin-bottom: 20px;
  654. padding: 0px;
  655. }
  656.  
  657. blockquote.tumblr_parent:last-child {
  658. border-bottom: 0px;
  659. }
  660.  
  661. blockquote.user-reblog {
  662. border: none;
  663. margin: 0px;
  664. padding: 0px;
  665. }
  666.  
  667. .tumblr_avatar {
  668. height: 30px;
  669. margin-bottom: 20px;
  670. width: 30px;
  671. }
  672.  
  673. img.tumblr_avatar {
  674. border-radius: 100px;
  675. display: inline-block;
  676. height: 30px!important;
  677. margin-right: 10px;
  678. vertical-align: middle;
  679. width: 30px!important;
  680. }
  681.  
  682. img.user-image {
  683. border-radius: 100px;
  684. display: inline-block;
  685. height: 30px!important;
  686. margin-right: 10px;
  687. vertical-align: middle;
  688. width: 30px!important;
  689. }
  690.  
  691. a.tumblr_blog {
  692. font-size: {select:Body Font Size};
  693. font-weight: bold;
  694. margin-top: calc((30px - {select:Body Font Size}) / 4);
  695. display: inline-block;
  696. position: absolute;
  697. text-align: center;
  698. text-transform: lowercase;
  699. }
  700.  
  701. .ask-wrapper {
  702. width: 100%;
  703. }
  704.  
  705. .asker-wrapper {
  706. overflow: auto;
  707. width: 100%;
  708. }
  709.  
  710. .asker-name {
  711. background: {color:Chat Even Background};
  712. border-top-left-radius: 5px;
  713. border-top-right-radius: 5px;
  714. font-size: {select:Uppercase Font Size};
  715. padding: 20px;
  716. text-transform: uppercase;
  717. }
  718.  
  719. .asker-question {
  720. border: 1px solid {color:Border};
  721. border-top: none;
  722. border-bottom-left-radius: 5px;
  723. border-bottom-right-radius: 5px;
  724. font-size: {select:Uppercase Font Size};
  725. padding: 20px;
  726. text-transform: uppercase;
  727. }
  728.  
  729. .asker-question p {
  730. margin: 0px;
  731. }
  732.  
  733. .quote-wrapper {
  734. width: 100%;
  735. }
  736.  
  737. .quote-icon {
  738. background: {color:Chat Even Background};
  739. border-radius: 100px;
  740. color: {color:Main Color};
  741. font-size: 0.9rem;
  742. height: 0.9rem;
  743. margin-left: auto;
  744. margin-right: auto;
  745. margin-top: -17.195px;
  746. padding: 10px;
  747. width: 0.9rem;
  748. }
  749.  
  750. .quote {
  751. border: 1px solid {color:Border};
  752. border-radius: 5px;
  753. font-family: 'Playfair Display', serif;
  754. font-size: 1.2rem;
  755. font-weight: bold;
  756. padding: 10px;
  757. padding-bottom: 26.4px;
  758. text-align: center;
  759. }
  760.  
  761. .website {
  762. background: {color:Main Color};
  763. border-radius: 5px;
  764. color: {color:Post Background};
  765. font-size: {select:Uppercase Font Size};
  766. padding: 20px;
  767. text-transform: uppercase;
  768. }
  769.  
  770. .website a {
  771. color: {color:Post Background};
  772. }
  773.  
  774. .website a:hover {
  775. color: {color:Link Hover};
  776. }
  777.  
  778. .chat {
  779. font-size: {select:Uppercase Font Size};
  780. text-transform: uppercase;
  781. }
  782.  
  783. .chat li {
  784. list-style-type: none;
  785. }
  786.  
  787. .chat li:nth-child(odd) {
  788. background: {color:Main Color};
  789. color: {color:Post Background};
  790. padding: 10px;
  791. }
  792.  
  793. .chat li:nth-child(even) {
  794. background: {color:Chat Even Background};
  795. color: {color:Main Color};
  796. padding: 10px;
  797. }
  798.  
  799. .audio iframe {
  800. height: 85px;
  801. width: 500px;
  802. }
  803.  
  804. figure {
  805. display: flex;
  806. width: 100%;
  807. }
  808.  
  809. figcaption.npf-audio-wrapper {
  810. width: 100%;
  811. }
  812.  
  813. .npf-audio-wrapper {
  814. --NPF-Audio-Buttons-Size: 1.4rem;
  815. --NPF-Audio-Buttons-Color: #555555;
  816. --NPF-Audio-Buttons-Spacing: 1.3rem;
  817. --NPF-Audio-Image-Size: 85px;
  818. --NPF-Audio-Image-Spacing: 0px;
  819. }
  820.  
  821. span.npf-audio-title {
  822. font-weight: bold;
  823. }
  824.  
  825. .npf-audio-background {
  826. background-color: #f2f2f2;
  827. padding: 1.5rem;
  828. }
  829.  
  830. video {
  831. height: auto;
  832. width: 100%;
  833. }
  834.  
  835. .source {
  836. background: {color:Chat Even Background};
  837. border-radius: 5px;
  838. display: inline-block;
  839. font-size: {select:Uppercase Font Size};
  840. margin-top: 10px;
  841. padding: 5px;
  842. text-transform: uppercase;
  843. }
  844.  
  845. .top-info {
  846. align-items: center;
  847. display: flex;
  848. justify-content: space-between;
  849. margin-bottom: 40px;
  850. }
  851.  
  852. .post-date {
  853. font-size: {select:Uppercase Font Size};
  854. text-transform: uppercase;
  855. }
  856.  
  857. .csri-wrapper {
  858. align-items: center;
  859. display: flex;
  860. }
  861.  
  862. .cs-image {
  863. height: 48px;
  864. width: 48px;
  865. }
  866.  
  867. .cs-image img {
  868. border-radius: 100px;
  869. height: 48px;
  870. width: 48px;
  871. }
  872.  
  873. .reblog-info {
  874. font-size: {select:Uppercase Font Size};
  875. margin-left: 10px;
  876. text-transform: uppercase;
  877. }
  878.  
  879. .pslr {
  880. border-top: 1px solid {color:Border};
  881. font-size: {select:Uppercase Font Size};
  882. margin-top: 20px;
  883. padding-top: 20px;
  884. overflow: hidden;
  885. text-transform: uppercase;
  886. }
  887.  
  888. .pinned-post {
  889. color: {color:Pin};
  890. display: inline-block;
  891. font-size: {select:Uppercase Font Size};
  892. margin-right: 10px;
  893. text-transform: uppercase;
  894. }
  895.  
  896. .like-b {
  897. display: inline-block;
  898. margin-right: 10px;
  899. position: relative;
  900. }
  901.  
  902. .like-b .like_button iframe {
  903. bottom: 0px;
  904. left: 0px;
  905. opacity: 0;
  906. position: absolute;
  907. right: 0px;
  908. top: 0px;
  909. }
  910.  
  911. .like-b .liked + .b {
  912. color: {color:Like};
  913. }
  914.  
  915. .vsdt-wrapper {
  916. font-size: {select:Uppercase Font Size};
  917. margin: -5px;
  918. margin-top: 10px;
  919. text-transform: uppercase;
  920. }
  921.  
  922. .vsdt-wrapper span {
  923. background: {color:Post Background};
  924. border: 1px solid {color:Border};
  925. border-radius: 5px;
  926. display: inline-block;
  927. margin: 5px;
  928. padding: 5px 10px 5px 10px;
  929. }
  930.  
  931. .tags-title {
  932. font-size: {select:Uppercase Font Size};
  933. display: inline-block;
  934. text-transform: uppercase;
  935. }
  936.  
  937. .tags-title a {
  938. -webkit-transition: all 0.5s ease;
  939. -moz-transition: all 0.5s ease;
  940. -o-transition: all 0.5s ease;
  941. }
  942.  
  943. .tags-title:hover {
  944. color: {color:Link Hover};
  945. }
  946.  
  947. .tags {
  948. font-size: {select:Uppercase Font Size};
  949. text-transform: uppercase;
  950. }
  951.  
  952. .tags-alternate {
  953. font-size: {select:Uppercase Font Size};
  954. display: inline-block;
  955. text-transform: uppercase;
  956. }
  957.  
  958. ol.notes {
  959. font-size: {select:Uppercase Font Size};
  960. border-top: 1px solid {color:Border};
  961. margin-top: 20px;
  962. padding: 40px;
  963. text-align: left;
  964. text-transform: uppercase;
  965. }
  966.  
  967. ol.notes li {
  968. list-style-type: none;
  969. margin: 10px;
  970. }
  971.  
  972. ol.notes li.note img.avatar {
  973. border-radius: 100px;
  974. vertical-align: -4px;
  975. height: 16px;
  976. margin-right: 10px;
  977. width: 16px;
  978. }
  979.  
  980. .more_notes_link {
  981. background: {color:Main Color};
  982. border-radius: 5px;
  983. color: white;
  984. display: inline-block;
  985. padding: 5px 10px 5px 10px;
  986. text-align: center;
  987. }
  988.  
  989. .pagination {
  990. align-items: baseline;
  991. display: flex;
  992. font-size: {select:Uppercase Font Size};
  993. justify-content: space-between;
  994. text-align: center;
  995. text-transform: uppercase;
  996. background: {color:Post Background};
  997. border-top: 1px solid {color:Border};
  998. padding: 50px;
  999. width: 500px;
  1000. }
  1001.  
  1002. .navigation {
  1003. align-self: baseline;
  1004. display: flex;
  1005. }
  1006.  
  1007. .navigation a {
  1008. background: {color:Main Color};
  1009. border: 1px solid {color:Main Color};
  1010. border-radius: 5px;
  1011. color: {color:Post Background};
  1012. padding: 5px;
  1013. }
  1014.  
  1015. .navigation a:hover {
  1016. background: {color:Post Background};
  1017. color: {color:Main Color};
  1018. }
  1019.  
  1020. .pages {
  1021. align-self: baseline;
  1022. background: {color:Main Color};
  1023. border: 1px solid {color:Main Color};
  1024. border-radius: 5px;
  1025. color: {color:Post Background};
  1026. display: flex;
  1027. padding: 5px;
  1028. }
  1029.  
  1030. #top {
  1031. background: {color:Main Color};
  1032. border: 1px solid {color:Border};
  1033. border-radius: 100px;
  1034. bottom: 66px;
  1035. color: {color:Post Background};
  1036. display: none;
  1037. font-size: 0.9rem;
  1038. font-variant: normal;
  1039. height: 0.9rem;
  1040. line-height: 1;
  1041. padding: 10px;
  1042. position: fixed;
  1043. right: 20px;
  1044. text-rendering: auto;
  1045. width: 0.9rem;
  1046. z-index: 1;
  1047. -webkit-transition: all 0.5s ease;
  1048. -moz-transition: all 0.5s ease;
  1049. -o-transition: all 0.5s ease;
  1050. }
  1051.  
  1052. #top:hover {
  1053. background: {color:Post Background};
  1054. color: {color:Link Hover};
  1055. }
  1056.  
  1057. #credit {
  1058. bottom: 20px;
  1059. font-size: 0.9rem;
  1060. height: 36px;
  1061. position: fixed;
  1062. right: 20px;
  1063. text-transform: uppercase;
  1064. z-index: 1;
  1065. width: auto;
  1066. }
  1067.  
  1068. #credit a {
  1069. background: {color:Main Color};
  1070. border: 1px solid {color:Border};
  1071. border-radius: 100px;
  1072. color: {color:Post Background};
  1073. display: inline-block;
  1074. font-size: 0.9rem;
  1075. font-variant: normal;
  1076. height: 0.9rem;
  1077. line-height: 1;
  1078. padding: 10px;
  1079. width: 0.9rem;
  1080. }
  1081.  
  1082. #credit a:hover  {
  1083. background: {color:Post Background};
  1084. color: {color:Link Hover};
  1085. }
  1086.  
  1087. #credit:hover .credit-name {
  1088. right: 20px;
  1089. opacity: 1;
  1090. }
  1091.  
  1092. .credit-name {
  1093. background: {color:Text};
  1094. border: 1px solid {color:Border};
  1095. border-radius: 100px;
  1096. bottom: 20px;
  1097. color: {color:Post Background};
  1098. display: inline-block;
  1099. font-size: 0.9rem;
  1100. font-variant: normal;
  1101. height: 0.9rem;
  1102. line-height: 1;
  1103. opacity: 0;
  1104. padding: 10px;
  1105. padding-right: 46.8px;
  1106. position: fixed;
  1107. right: -20px;
  1108. text-align: center;
  1109. z-index: -1;
  1110. -webkit-transition: all 0.9s ease;
  1111. -moz-transition: all 0.9s ease;
  1112. -o-transition: all 0.9s ease;
  1113. }
  1114.  
  1115. {CustomCSS}
  1116.    
  1117. </style>
  1118.    
  1119. </head>
  1120.  
  1121. <body>
  1122.  
  1123. <div id="main-container">
  1124.  
  1125. <div id="left">
  1126.  
  1127. <div class="left-content">
  1128.  
  1129. <!-- Start of Search Bar -->
  1130.  
  1131. <div class="search-wrapper"><form action="/search" method="get"><input type="text" name="q" placeholder="Search This Blog" value="{SearchQuery}"/></form></div>
  1132.  
  1133. <!-- End of Search Bar -->
  1134.  
  1135. {block:IfUpdates}
  1136. <div id="box">
  1137.  
  1138. <div class="box-title"><i class="far fa-calendar-alt" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>{text:Updates Title}</div>
  1139.  
  1140. <div class="box-content">
  1141. {block:ifUpdate1}
  1142. <div class="updates">
  1143. <div class="updates-date">{text:Update Date 1}</div>
  1144. <div class="updates-content">{text:Update 1}</div>
  1145. </div>
  1146. {block:ifUpdate1}
  1147.  
  1148. {block:ifUpdate2}
  1149. <div class="updates">
  1150. <div class="updates-date">{text:Update Date 2}</div>
  1151. <div class="updates-content">{text:Update 2}</div>
  1152. </div>
  1153. {block:ifUpdate2}
  1154.  
  1155. {block:ifUpdate3}
  1156. <div class="updates">
  1157. <div class="updates-date">{text:Update Date 3}</div>
  1158. <div class="updates-content">{text:Update 3}</div>
  1159. </div>
  1160. {block:ifUpdate3}
  1161. </div>
  1162.  
  1163. </div>
  1164. {/block:IfUpdates}
  1165.  
  1166. {block:IfNavigation}
  1167. <div id="box">
  1168.  
  1169. <div class="box-title"><i class="fas fa-hashtag" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>{text:Navigation Title}</div>
  1170.  
  1171. <div class="box-content">
  1172.  
  1173. <div class="more-links">
  1174. <a href="/">Link One</a>
  1175. <a href="/">Link Two</a>
  1176. <a href="/">Link Three</a>
  1177. <a href="/">Link Four</a>
  1178. <a href="/">Link Five</a>
  1179. </div>
  1180.  
  1181. </div>
  1182.  
  1183. </div>
  1184. {/block:IfNavigation}
  1185.  
  1186. </div>
  1187.  
  1188. </div>
  1189.  
  1190. <div id="container">
  1191.  
  1192. <div id="border-left"></div>
  1193.  
  1194. <div id="border-right"></div>
  1195.  
  1196. <div id="user-information">
  1197.  
  1198. <div class="header-image"><img src="{image:Header Image}"/></div>
  1199.  
  1200. <div class="aitdil-wrapper">
  1201.  
  1202. <div class="avatar-icon"><img src="{PortraitURL-96}"/></div>
  1203.  
  1204. <div class="title">{text:Title}</div>
  1205.  
  1206. {block:Description}<div class="description">{Description}</div>{/block:Description}
  1207.  
  1208. <div class="info">
  1209. {block:ifLocation}<li><i class="fas fa-map-marker-alt" style="color: {color:Main Color};margin-right: 5px;"></i>{text:Location}</li>{/block:ifLocation}
  1210. {block:ifBirthday}<li><i class="fas fa-birthday-cake" style="color: {color:Main Color};margin-right: 5px;"></i>{text:Birthday}</li>{/block:ifBirthday}
  1211. {block:ifLikes}<li><i class="far fa-heart" style="color: {color:Main Color};margin-right: 5px;"></i>{text:Likes}</li>{block:ifLikes}
  1212. <li><i class="far fa-calendar-alt" style="color: {color:Main Color};margin-right: 5px;"></i>{CopyrightYears}</li>
  1213. </div>
  1214.  
  1215. <div class="links">
  1216. <a href="/">Home</a>
  1217. {block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
  1218. {block:SubmissionsEnabled}{block:ifSubmitLink}<a href="/submit">Submit</a>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1219. {block:ifLink1URL}<a href="{text:Link 1 URL}">{text:Link 1 Name}</a>{/block:ifLink1URL}
  1220. {block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
  1221. {block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
  1222. <a href="/archive">Archive</a>
  1223. </div>
  1224.  
  1225. </div>
  1226.  
  1227. </div>
  1228.  
  1229. <div id="posts">
  1230.  
  1231. {block:Posts}
  1232.  
  1233. <div class="entries" id="{PostID}" post-type="{PostType}">
  1234.  
  1235. <div class="entries-wrapper">
  1236.  
  1237. {block:Date}
  1238. <div class="top-info">
  1239.  
  1240. {block:RebloggedFrom}<div class="csri-wrapper"><div class="cs-image"><img src="{ReblogRootPortraitURL-48}"/></div><div class="reblog-info"><a href="{ReblogRootURL}">{ReblogRootTitle}<font style="margin-left: 5px;"><i class="fas fa-at"></i></font>{ReblogRootName}</a><br><a href="{ReblogParentURL}"><font style="color: {color:Main Color};margin-right: 5px;"><i class="fas fa-retweet"></i></font>{ReblogParentName}</a></div></div>{/block:RebloggedFrom}
  1241.  
  1242. <div class="post-date">
  1243. <a href="{Permalink}"><i class="far fa-clock" style="color: {color:Text};margin-right: 5px;"></i>{Month} {DayOfMonth}</a></div>
  1244.  
  1245. </div>
  1246. {/block:Date}
  1247.  
  1248. {block:Text}
  1249. {block:NotReblog}
  1250. <div class="npf-wrapper">
  1251. {block:Title}
  1252. <h1>{Title}</h1>
  1253. {/block:Title}
  1254. {Body}
  1255. </div>
  1256. {/block:NotReblog}
  1257. {block:RebloggedFrom}
  1258. <div class="text-wrapper">
  1259. {block:Title}
  1260. <h1>{Title}</h1>
  1261. {/block:Title}
  1262. <div class="text">
  1263. {Body}
  1264. </div>
  1265. </div>
  1266. {/block:RebloggedFrom}
  1267. {/block:Text}
  1268.  
  1269. {block:Answer}
  1270. <div class="ask-wrapper">
  1271. <div class="asker-wrapper">
  1272. <div class="asker-name">
  1273. <i class="far fa-question-circle"></i> <a href="{AskerURL}">{Asker}</a> sent a message:
  1274. </div>
  1275. <div class="asker-question">
  1276. {Question}
  1277. </div>
  1278. </div>
  1279. <div class="caption">
  1280. {Answer}
  1281. </div>
  1282. </div>
  1283. {/block:Answer}
  1284.  
  1285. {block:Quote}
  1286. <div class="quote-wrapper">
  1287. <div class="quote">
  1288. "{Quote}</i>"
  1289. {block:Source}
  1290. <br><br>
  1291. <font style="font-family: '{select:Body Font}', sans-serif;font-size: {select:Uppercase Font Size};font-style: normal;font-weight: normal;text-transform: uppercase;">
  1292. {Source}
  1293. </font>
  1294. {/block:Source}
  1295. </div>
  1296. <div class="quote-icon"><i class="far fa-comment-dots" style="vertical-align: top;"></i></div>
  1297. </div>
  1298. {/block:Quote}
  1299.  
  1300. {block:Link}
  1301. {block:Thumbnail}
  1302. <img src="{Thumbnail}" style="border-radius: 5px;margin-bottom: 10px;"/>
  1303. {/block:Thumbnail}
  1304. <div class="website"><i class="fas fa-external-link-alt" style="margin-right: 10px;"></i><a href="{URL}" target="_blank">{Name}<br><br>{block:Excerpt}{Excerpt}{/block:Excerpt}
  1305. </a></div>
  1306. {block:Description}
  1307. <div class="caption">
  1308. {Description}
  1309. </div>
  1310. {/block:Description}
  1311. {/block:Link}
  1312.  
  1313. {block:Chat}
  1314. <div class="chat">
  1315. {block:Title}
  1316. <h1>{Title}</h1>
  1317. {/block:Title}
  1318. {block:Lines}
  1319. <li>{block:Label}{Label}{/block:Label}
  1320. {Line}
  1321. </li>
  1322. {/block:Lines}
  1323. </div>
  1324. {/block:Chat}
  1325.  
  1326. {block:Audio}
  1327. <div class="audio">
  1328. {AudioEmbed}
  1329. </div>
  1330. {block:Caption}
  1331. <div class="caption">{Caption}</div>
  1332. {/block:Caption}
  1333. {/block:Audio}
  1334.  
  1335. {block:Photo}
  1336. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-HighRes}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  1337. {block:Caption}
  1338. <div class="text-wrapper">
  1339. <div class="caption">{Caption}</div>
  1340. </div>
  1341. {/block:Caption}
  1342. {/block:Photo}
  1343.  
  1344. {block:Photoset}
  1345. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1346. {block:Caption}
  1347. <div class="text-wrapper">
  1348. <div class="caption">{Caption}</div>
  1349. </div>
  1350. {/block:Caption}
  1351. {/block:Photoset}
  1352.  
  1353. {block:Video}
  1354. <div class="video">
  1355. {Video-500}
  1356. </div>
  1357. {block:Caption}
  1358. <div class="caption">{Caption}</div>
  1359. {/block:Caption}
  1360. {/block:Video}
  1361.  
  1362. {block:ContentSource}
  1363. <div class="source">
  1364. <i class="fas fa-paper-plane" style="color: {color:Main Color};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  1365. </div>
  1366. {/block:ContentSource}
  1367.  
  1368. {block:Date}
  1369. <div class="pslr">
  1370. {block:PinnedPostLabel}<div class="pinned-post"><i class="fas fa-star"></i></div>{/block:PinnedPostLabel}{block:NoteCount}<i class="fas fa-chart-bar" style="margin-right: 5px;"></i><a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom}<i class="fas fa-sync-alt" style="margin-left: 10px;margin-right: 5px;"></i><a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom}{block:ContentSource}{block:RebloggedFrom}<i class="far fa-folder" style="margin-left: 10px;margin-right: 5px;"></i><a href="{ReblogRootURL}">Source</a></span>{/block:RebloggedFrom}{/block:ContentSource}
  1371. <font style="float: right;">
  1372. <a class="like-b" href="#">{LikeButton}<div class="b"><i class="far fa-heart"></i></div></a>
  1373. <a href="{ReblogURL}" target="_blank"><i class="fas fa-undo-alt"></i></a>
  1374. </font>
  1375. </div>
  1376. {/block:Date}
  1377.  
  1378. {block:Date}
  1379. {block:IfHideTags}
  1380. {block:HasTags}
  1381. <div class="vsdt-wrapper">
  1382. <a class="tags-title"><span><i class="fas fa-angle-right" style="margin-right: 5px;"></i>Show Tags</span></a>
  1383. <div class="tags">
  1384. {block:Tags}
  1385. <span><a href="{TagURL}"><i class="far fa-heart" style="margin-right: 5px;"></i>{Tag}</a></span>
  1386. {/block:Tags}
  1387. </div>
  1388. </div>
  1389. {/block:HasTags}
  1390. {/block:IfHideTags}
  1391. {block:IfShowTags}
  1392. {block:HasTags}
  1393. <div class="vsdt-wrapper">
  1394. <div class="tags-alternate">
  1395. {block:Tags}
  1396. <span><a href="{TagURL}"><i class="far fa-heart" style="margin-right: 5px;"></i>{Tag}</a></span>
  1397. {/block:Tags}
  1398. </div>
  1399. </div>
  1400. {/block:HasTags}
  1401. {/block:IfShowTags}
  1402. {block:Date}
  1403.  
  1404. </div>
  1405.  
  1406. {block:PostNotes}
  1407. {PostNotes}
  1408. {/block:PostNotes}
  1409.  
  1410. </div>
  1411.  
  1412. {/block:Posts}
  1413.  
  1414. {block:Pagination}
  1415. <div class="pagination">
  1416. {block:PreviousPage}
  1417. <div class="navigation">
  1418. <a href="{PreviousPage}"><i class="fas fa-angle-left" style="margin-right: 5px;"></i>Prev</a>
  1419. </div>
  1420. {/block:PreviousPage}
  1421. <div class="pages">
  1422. {CurrentPage} / {TotalPages}
  1423. </div>
  1424. {block:NextPage}
  1425. <div class="navigation">
  1426. <a href="{NextPage}">Next<i class="fas fa-angle-right" style="margin-left: 5px;"></i></a>
  1427. </div>
  1428. {/block:NextPage}
  1429. </div>
  1430. {/block:Pagination}
  1431.  
  1432. </div>
  1433.  
  1434. </div>
  1435.  
  1436. </div>
  1437.  
  1438. {block:IfBackToTop}<div id="top"><i class="fas fa-arrow-circle-up"></i></div>{/block:IfBackToTop}
  1439.  
  1440. <!-- Start of Theme Credit -->
  1441.  
  1442. <div id="credit"><a href="https://vitaminholland.tumblr.com/"><i class="fas fa-feather-alt"></i></a><div class="credit-name">VIT</div></div>
  1443.  
  1444. <!-- End of Theme Credit -->
  1445.  
  1446. </body>
  1447.  
  1448. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement