themesbyces

Theme — The Heartbreak Prince

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