Advertisement
themesbyces

Theme — Fly High

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