themesbyces

Theme — Offset

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