themesbyces

Theme — Viper

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