Advertisement
themesbyces

Theme — Wildflowers (Full Screen)

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