Advertisement
vitaminholland

Theme — Invisible String

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