themesbyces

Theme — Love Yourself

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