Advertisement
cvndythemes

zcilovs_theme

May 21st, 2020
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.49 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{favicon}">
  8.  
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13.  
  14. <!--
  15.  
  16. >> ETHEREAL THEMES // CUSTOM THEME for @zcilovs
  17.  
  18. Designed by etherealthemes
  19. etherealthemes.tumblr.com
  20. ⓒ 2016 - 2020
  21. //
  22.  
  23.  
  24. Background Image by Ahmed Sharyaan @sharyaan at unsplash.com
  25. Fonts by Google Fonts
  26. Icons by Jam Icons @ jam-icons.com
  27. Tumblr controls styling by cyantists @ cyantists.tumblr.com
  28. PXU Photosets by chloethemes @ bychloethemes.tumblr.com
  29.  
  30. >> TIPS AND HOW TO'S
  31.  
  32. PLEASE CHOOSE YOUR POST SIZE FIRST AND TURN ON THE RELATED ON/OFF FOR YOUR CHOSEN POST SIZE // To turn off the offset posts, turn off all POST SIZE ON/OFF options
  33.  
  34. THE PAGINATION AND NAVIGATION ICONS will look messed up due to the tumblr varialbes. They will look fine on your actual page
  35.  
  36. The images are preloaded, but if they don't show up, they are below under IMAGES
  37.  
  38. To edit the updates, search:
  39.  
  40. START UPDATES
  41.  
  42. To edit the tags, search:
  43.  
  44. START NAVIGATION TAGS
  45.  
  46. Please feel free to contact me for any questions or help
  47.  
  48. -->
  49.  
  50.  
  51.  
  52.  
  53. <!-- COLORS -->
  54. <meta name="color:Background" content="#000000" />
  55. <meta name="color:Text" content="#000000" />
  56. <meta name="color:Links" content="#000000" />
  57. <meta name="color:Accent One" content="#94d3e0" />
  58. <meta name="color:Accent Two" content="#1d7898" />
  59. <meta name="color:Accent Gray" content="#cccccc" />
  60.  
  61. <meta name="color:Content" content="#ffffff" />
  62.  
  63.  
  64. <!-- IMAGES -->
  65. <meta name="image:Background" content="https://static.tumblr.com/zvesamf/6mFq9kgzl/background.jpg" />
  66.  
  67. <meta name="image:Header" content="https://placehold.it/860X200" />
  68.  
  69.  
  70. <!-- SELECT -->
  71. <meta name="select:Body Font Size" content="10.5pt" title="Default">
  72. <meta name="select:Body Font Size" content="9.5pt" title="Small">
  73. <meta name="select:Body Font Size" content="10pt" title="Large">
  74.  
  75. <meta name="select:Post Size" content="450px" title="450">
  76. <meta name="select:Post Size" content="500px" title="500">
  77. <meta name="select:Post Size" content="540px" title="540">
  78.  
  79. <meta name="select:Lightbox" content="0,0,0," title="Black">
  80. <meta name="select:Lightbox" content="255,255,255," title="White">
  81.  
  82.  
  83. <!-- IF -->
  84. <meta name="if:Invert Tumblr Controls" content="0"/>
  85.  
  86. <meta name="if:Posts 450" content="0"/>
  87. <meta name="if:Posts 500" content="0"/>
  88. <meta name="if:Posts 540" content="0"/>
  89.  
  90.  
  91.  
  92.  
  93. <!-- TEXT -->
  94. <meta name="text:Blog Title Print" content="written in">
  95. <meta name="text:Blog Title Script" content="ink">
  96.  
  97. <meta name="text:Ask URL" content="/ask">
  98. <meta name="text:User Icon URL" content="/tagged/">
  99.  
  100. <meta name="text:PSA URL" content="https://">
  101. <meta name="text:Promotion URL" content="https://">
  102. <meta name="text:Memes URL" content="https://">
  103. <meta name="text:Keepsake URL" content="https://">
  104. <meta name="text:Bucket List URL" content="https://">
  105. <meta name="text:Open Starter URL" content="https://">
  106. <meta name="text:Pretty Faces URL" content="https://">
  107. <meta name="text:Mun URL" content="https://">
  108. <meta name="text:Resources URL" content="https://">
  109.  
  110.  
  111. <!-- SCRIPTS -->
  112.  
  113. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  114.  
  115. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  116.  
  117. <script>
  118. (function($){
  119. $(document).ready(function(){
  120. $("[title]").style_my_tooltips({
  121. tip_delay_time:200,
  122. tip_fade_speed:300,
  123. tip_follows_cursor:true
  124. }
  125. );
  126. });
  127. })(jQuery);
  128. </script>
  129.  
  130. <script>
  131. $container.infinitescroll({
  132. itemSelector: '.posts',
  133. navSelector: '.pagination',
  134. nextSelector: '.pagination a',
  135. loadingImg: '',
  136. loadingText: '<em></em>',
  137. bufferPx: 2000
  138. },
  139. function( newElements ) {
  140. var $newElems = $(newElements);
  141. var $newElemsIDs = $newElems.map(function(){
  142. return this.id;
  143. }).get();
  144. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  145. });
  146. </script>
  147.  
  148. <!-- TIPPY JS -->
  149. <script src="https://unpkg.com/popper.js@1"></script>
  150. <script src="https://unpkg.com/tippy.js@5"></script>
  151. <script>
  152. $(document).ready(function(){
  153. tippy('[title]', {
  154. arrow: false,
  155. placement: 'top',
  156. delay: 5,
  157. distance: 10,
  158. maxWidth: 300,
  159.  
  160. followCursor: true,
  161. allowHTML: true,
  162. theme: 'custom',
  163. ignoreAttributes: true,
  164. content(reference) {
  165. const title = reference.getAttribute('title');
  166. reference.removeAttribute('title');
  167. return title;
  168. },
  169. });
  170. });
  171. </script>
  172.  
  173. <script src="https://static.tumblr.com/yzs4yqx/BV3o343ow/smoothscroll.min.js"></script>
  174.  
  175. <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
  176.  
  177. <link href="https://fonts.googleapis.com/css?family=DM+Serif+Text|Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184. <!-- STYLESHEET -->
  185. <style type="text/css">
  186.  
  187. @font-face { font-family: "redstockscript"; src: url('https://dl.dropboxusercontent.com/s/sf70f80r3vdtxr2/redstockscript-wf.ttf'); }
  188.  
  189. /* --- SELECTION ---*/
  190.  
  191. ::-moz-selection {
  192. color:{color:Content};
  193. background:{color:Accent Two};
  194. opacity:1;
  195. }
  196.  
  197. ::selection {
  198. color:{color:Content};
  199. background:{color:Accent Two};
  200. opacity:1;
  201. }
  202.  
  203. /* --- TOOLTIPS ---*/
  204.  
  205. .tippy-tooltip.custom-theme {
  206. $tooltipBg:{color:Accent Two};
  207. background-color:{color:Accent Two};
  208. color:{color:Content};
  209. border-radius:5%;
  210. font-size:10pt;
  211. margin-left:15px;
  212. }
  213.  
  214. .tippy-content {padding:4px 5px 4px 5px!important;}
  215.  
  216. /* --- SCROLLBAR ---*/
  217.  
  218. ::-webkit-scrollbar {width:0px;}
  219.  
  220. ::-webkit-scrollbar-track {width:0px;}
  221.  
  222. ::-webkit-scrollbar-thumb {width:0px;}
  223.  
  224. /* --- TUMBLR TOOLS --- */
  225.  
  226. iframe.tmblr-iframe {
  227. top:16px!important;
  228. right:25!important;
  229. opacity:0.7;
  230. padding:0px;
  231. z-index:4!important;
  232. transform:scale(0.5);
  233. transform-origin:100% 0;
  234. -webkit-transform:scale(0.5);
  235. -webkit-transform-origin:100% 0;
  236. -o-transform:scale(0.5);
  237. -o-transform-origin:100% 0;
  238. -moz-transform:scale(0.5);
  239. -moz-transform-origin:100% 0;
  240. -ms-transform:scale(0.5);
  241. -ms-transform-origin:100% 0;
  242. transition:0.2s ease-in-out;
  243. -webkit-transition:0.2s ease-in-out;
  244. -moz-transition:0.2s ease-in-out;
  245. {block:IfInvertTumblrControls}
  246. filter:invert(1);
  247. -webkit-filter:invert(1);
  248. -o-filter:invert(1);
  249. -moz-filter:invert(1);
  250. -ms-filter:invert(1);
  251. {/block:IfInvertTumblrControls}
  252. }
  253.  
  254. /* --- BODY --- */
  255.  
  256. body {
  257. background-color:{color:Background};
  258. margin:0px;
  259. color:{color:Text};
  260. text-transform:normal;
  261. font-style:normal;
  262. font-weight:400;
  263. font-family: 'Karla', sans-serif;
  264. font-size:{select:Body Font Size};
  265. text-decoration:none;
  266. line-height:160%;
  267. }
  268.  
  269.  
  270. .cover {
  271. position:fixed;
  272. top:0px;
  273. left:0px;
  274. margin:0px;
  275. height:100%;
  276. width:100%;
  277. background-image:url('{image:Background}');
  278. background-position:bottom center;
  279. -webkit-background-size: cover;
  280. -moz-background-size: cover;
  281. -o-background-size: cover;
  282. background-size: cover;
  283. z-index:-1;
  284. }
  285.  
  286.  
  287. a {color:{color:Links};text-decoration:none;transition:0.3s ease-in-out;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;}
  288.  
  289. b, bold, strong {color:{color:Text};!important;font-weight:700;}
  290. i, em, italic {color:{color:Text};letter-spacing:0.5px;}
  291. sub, sup {border:0px;{color:Text}}
  292. small {font-size:{select:Body Font Size};color:{color:Text};}
  293.  
  294.  
  295. hr.divider, hr, hr.separator {
  296. display:block;
  297. margin-top:0.5em;
  298. margin-bottom:0.5em;
  299. margin-left:auto;
  300. margin-right:auto;
  301. border-style:inset;
  302. border-color:{color:Links};
  303. border-bottom:1px;
  304. }
  305.  
  306. pre {
  307. white-space:pre-wrap;
  308. white-space:-moz-pre-wrap;
  309. white-space:-pre-wrap;
  310. white-space:-o-pre-wrap;
  311. word-wrap:break-word;
  312. }
  313.  
  314. /* --- CONTAINER --- */
  315.  
  316. .container {
  317. position:fixed;
  318. top:50%;
  319. left:50%;
  320. transform: translate(-50%, -50%);
  321. width:860px;
  322. height:700px;
  323. background:rgba(255,255,255,0.65);
  324. }
  325.  
  326. /* --- HEADER --- */
  327.  
  328. .header {
  329. float:left;
  330. width:860px;
  331. height:200px;
  332. background-image:url('{image:Header}');
  333. background-position:center;
  334. background-repeat:no-repeat;
  335. margin:0px 0px 0px 0px;
  336. }
  337.  
  338. .header img {width:860px;height:200px;}
  339.  
  340. /* --- SIDEBAR --- */
  341.  
  342. .sidebar {
  343. position:relative;
  344. top:-10px;
  345. left:10px;
  346. float:right;
  347. width:300px;
  348. height:495px;
  349. margin:0px;
  350. background:{color:Accent One};
  351. }
  352.  
  353. .side_container {
  354. width:240px;
  355. height:340px;
  356. text-align:center;
  357. margin:-115px 0px 0px 30px;
  358. padding:25px 0px 0px 0px;
  359. background:{color:Content};
  360. }
  361.  
  362. .title_print {
  363. position:relative;
  364. top:-35px;
  365. left:-170px;
  366. width:400px;
  367. line-height:50pt;
  368. text-align:right;
  369. font-family: 'DM Serif Text', serif;
  370. color:{color:Text};
  371. font-size:50pt;
  372. z-index:6;
  373. }
  374.  
  375. .title_print h1 {
  376. position:relative;
  377. left:50px;
  378. text-align:right;
  379. margin:-75px 0px 0px 20px;
  380. font-family: redstockscript;
  381. color:{color:Accent Two};
  382. font-size:132pt;
  383. line-height:132pt;
  384. z-index:4;
  385. }
  386.  
  387. .side_icon {text-align:center;height:170px;width:200px;margin:0px 0px 20px 20px;}
  388.  
  389. .side_icon img {height:170px;width:200px;margin-top:-5px;}
  390.  
  391. .side_description {
  392. overflow:scroll;
  393. margin:-15px 0px 0px 20px;
  394. height:135px;
  395. width:180px;
  396. font-size:calc({select:Body Font Size} - 1pt);
  397. line-height:calc({select:Body Font Size} + 2pt);
  398. padding:10px;
  399. }
  400.  
  401. .pagination {
  402. position:relative;
  403. top:-15px;
  404. left:30px;
  405. width:240px;
  406. height:32px;
  407. margin:0px;
  408. text-align:center;
  409. z-index:1;
  410. }
  411.  
  412. .pagination a {
  413. display:inline-block;
  414. padding:5px 10px;
  415. margin:0px 8px;
  416. text-align:center;
  417. font-family: 'DM Serif Text', serif;
  418. color:{color:Content};
  419. font-size:13pt;
  420. background:{color:Accent Two};
  421. }
  422.  
  423. .side_icons {
  424. position:relative;
  425. top:-43px;
  426. left:0px;
  427. width:269px;
  428. height:55px;
  429. text-align:center;
  430. border-bottom:1px solid {color:Content};
  431. border-right:1px solid {color:Content};
  432. }
  433.  
  434. .icons {position:relative;top:38px;left:-7px;width:320px;}
  435.  
  436. .icons a {
  437. display:inline-block;
  438. height:36px;
  439. width:36px;
  440. line-height:36px;
  441. vertical-align:middle;
  442. border-radius:50%;
  443. color:{color:Text};
  444. background:{color:Content};
  445. font-size:14pt;
  446. margin:0px 9px 0px 10px;
  447. }
  448.  
  449. .icons span {position:relative;top:0px;}
  450.  
  451. /* --- UPDATES --- */
  452.  
  453. #updater {
  454. position:relative;
  455. top:-443px;
  456. left:30px;
  457. width:240px;
  458. height:330px;
  459. padding:0px 0px 0px 0px;
  460. overflow:scroll;
  461. background-color:{color:Content};
  462. z-index:6;
  463. }
  464.  
  465. .updates {text-align:center;margin:0px 0px 0px 0px;padding:20px 20px;}
  466.  
  467. .individual_update {
  468. margin:10px 0px 30px 0px;
  469. padding:5px;
  470. color:{color:Content};
  471. background:{color:Accent One};
  472. }
  473.  
  474. .individual_update:last-of-type {margin-bottom:0px;}
  475.  
  476. .individual_update b {
  477. position:relative;
  478. top:-17px;
  479. left:0px;
  480. margin-bottom:-10px;
  481. display:block;
  482. font-family: 'DM Serif Text', serif;
  483. color:{color:Text};
  484. font-weight:400;
  485. text-align:left;
  486. font-size:15pt;
  487. }
  488.  
  489. /* --- NAVIGATION TAGS --- */
  490.  
  491. #navigational {
  492. position:relative;
  493. top:-490px;
  494. left:9px;
  495. width:511px;
  496. height:450px;
  497. padding:20px;
  498. overflow:hidden;
  499. background:{color:Content};
  500. z-index:5;
  501. }
  502.  
  503. .navigational_tags {padding:30px;background:{color:Content};}
  504.  
  505. .navigation_scroll {
  506. position:relative;
  507. top:-40px;
  508. left:-35px;
  509. height:355px;
  510. width:500px;
  511. padding:30px 10px 10px 10px;
  512. overflow:scroll;
  513. background:{color:Content};
  514.  
  515. }
  516.  
  517. .navigational_tags h1 {
  518. position:relative;
  519. top:0px;
  520. left:0px;
  521. display:inline-block;
  522. margin-bottom:30px;
  523. text-transform:lowercase;
  524. border-bottom:10px solid {color:Accent One};
  525. font-family: 'DM Serif Text', serif;
  526. color:{color:Text};
  527. font-weight:400;
  528. text-align:left;
  529. font-size:15pt;
  530. line-height:5pt;
  531. padding:0px 35px 0px 5px;
  532. }
  533.  
  534. .navi_tag {
  535. width:510px;
  536. margin:-40px 0px 0px -40px;
  537. padding:10px;
  538. text-align:center;
  539. background:{color:Content};
  540. margin-bottom:50px;
  541.  
  542. }
  543.  
  544. .navi_tag:last-of-type {margin-bottom:0px!important;}
  545.  
  546. .navi_tag a {margin:0px 6px;}
  547.  
  548. .navi_tag a:hover {opacity:0.8;}
  549.  
  550. .navitags a {
  551. display:inline-block;
  552. height:15px;
  553. width:15px;
  554. line-height:15px;
  555. padding:10px;
  556. vertical-align:middle;
  557. border-radius:50%;
  558. color:{color:Content};
  559. background:{color:Accent Two};
  560. font-size:10pt;
  561. margin:0px 7px;
  562. }
  563.  
  564. .navitags span {position:relative;top:0px;text-align:center;}
  565.  
  566. .faq, .rules {padding:10px;background:{color:Accent One};color:{color:Text};}
  567.  
  568. .rules {margin-bottom:70px;}
  569.  
  570. .faq b, .rules b {
  571. position:relative;
  572. top:-23px;
  573. left:0px;
  574. margin-bottom:-18px;
  575. display:block;
  576. font-family: 'DM Serif Text', serif;
  577. color:{color:Text};
  578. font-weight:400;
  579.  
  580. font-size:15pt;
  581. }
  582.  
  583. .faq b {text-align:right;}
  584.  
  585. .rules b {text-align:left;}
  586.  
  587.  
  588. /* --- POSTS --- */
  589.  
  590. .posts {
  591. float:left;
  592. width:560px;
  593. height:485px;
  594. padding:0px;
  595. margin:5px 0px 0px 0px;
  596. overflow-x:hidden;
  597. overflow-y:scroll;
  598. }
  599.  
  600. .postcontainer {
  601. margin:0 auto;
  602. width:calc({select:Post Size} - 2px);
  603. background:{color:Content};
  604. margin-bottom:50px;
  605. }
  606.  
  607. {block:IndexPage}
  608.  
  609. {block:IfPosts450}
  610. .postcontainer:nth-of-type(odd) {margin-left:60px;}
  611. .postcontainer:nth-of-type(even) {margin-left:80px;}
  612. {/block:IfPosts450}
  613.  
  614. {block:IfPosts500}
  615. .postcontainer:nth-of-type(odd) {margin-left:15px;}
  616. .postcontainer:nth-of-type(even) {margin-left:54px;}
  617. {/block:IfPosts500}
  618.  
  619. {block:IfPosts540}
  620. .postcontainer:nth-of-type(odd) {margin-left:9px;}
  621. .postcontainer:nth-of-type(even) {margin-left:22px;}
  622. {/block:IfPosts540}
  623.  
  624. {/block:IndexPage}
  625.  
  626. .postcontainer::last-child {margin-bottom:0px;}
  627.  
  628. .iposts {padding:8px 10px 10px 10px;min-height:50px;background:{color:Content Background};}
  629.  
  630. .ipostpxu {width:calc({select:Post Size} - 2px);}
  631.  
  632. .caption {padding:10px 10px 5px 10px;}
  633.  
  634. .stphoto img {max-width:100%;}
  635.  
  636. iframe, img, embed, object, video {max-width:100%;}
  637.  
  638. .textpost img {max-width:100%;height:auto;}
  639.  
  640. img {border:0;max-width:100%;height:auto}
  641.  
  642. .video {overflow:hidden;width:{select:Post Size};margin:-10px!important;padding:10px 0px 5px 0px;}
  643.  
  644. .vine-embed,#youtube_iframe {width:calc({select:Post Size} - 30px);margin:0px 0px 10px 0px;}
  645.  
  646. .instagram-media {border-radius:0!important;box-shadow:none!important;}
  647.  
  648. /* --- POST CONTROL --- */
  649.  
  650. .postcontrol {
  651. position:relative;
  652. float:right;
  653. display:inline-block;
  654. padding:8px;
  655. margin:0px 0px 0px 0px;
  656. text-align:center;
  657. }
  658.  
  659. .postcontrol i {
  660. padding:2px 1px 1px 3px;
  661. display:block;
  662. overflow:hidden;
  663. font-style:normal;
  664. font-size:9.5pt;
  665. color:{color:Text};
  666. }
  667.  
  668. .postcontrol a {display:inline-block;}
  669.  
  670. .postcontrol .reblog {display:inline-block;font-size:9pt;}
  671.  
  672. .postcontrol .like .liked + i {opacity:1;}
  673.  
  674. .postcontrol .like .liked + i {color:#fb6988;}
  675.  
  676. .like {
  677. position:relative;
  678. color:{color:Text};
  679. display:inline-block;
  680. top:1px;
  681. height:1em;
  682. line-height:1em;
  683. overflow:hidden;
  684. margin-bottom:-1px;
  685. }
  686.  
  687. .like .like_button iframe {position:absolute;top:0;left:0;bottom:0;right:0;z-index:5;opacity:0.000001;}
  688.  
  689. /* --- POST INFO --- */
  690.  
  691. .postinfo {
  692. padding:5px;
  693. text-align:center;
  694. font-size:10pt;
  695. margin-bottom:-15px;
  696. }
  697.  
  698. .postinfo a {
  699. display:inline-block;
  700. font-family: 'DM Serif Text', serif;
  701. font-size:12pt;
  702. margin:0px 5px;
  703. }
  704.  
  705. /* --- POST TAGS --- */
  706.  
  707. .posttags {padding:15px;text-align:center;background:{color:Accent One};}
  708.  
  709. .posttags a {
  710. display:inline-block;
  711. color:{color:Content};
  712. font-size:9pt;
  713. font-weight:400;
  714. margin:0px 8px;
  715. }
  716.  
  717. /* --- Titles --- */
  718.  
  719. h1, h2 {
  720. text-align:left;
  721. font-style:normal;
  722. color:{color:Text};
  723. font-family: 'DM Serif Text', serif;
  724. font-size:calc({select:Body Font Size} + 4pt);
  725. font-weight:400;
  726. margin:20px 0px;
  727. text-decoration:none;
  728.  
  729. }
  730.  
  731. /* --- Quote and Link --- */
  732.  
  733. .quote_post {text-align:center!important;font-size:calc({select:Body Font Size} + 3pt);padding:30px 0px 0px 0px;}
  734.  
  735. .quote_post h3 {
  736. text-align:center;
  737. font-style:normal;
  738. color:{color:Text};
  739. font-weight:400;
  740. font-size:calc({select:Body Font Size} + 4pt);
  741. text-decoration:none;
  742. line-height:135%;
  743. padding-bottom:0px;
  744. margin-bottom:5px;
  745. }
  746.  
  747. .quote_post b {font-weight:400;text-transform:uppercase;font-size:calc({select:Body Font Size} - 1pt);display:inline-block;padding-bottom:17px;}
  748.  
  749. /* --- Blockquote --- */
  750.  
  751. blockquote {
  752. color:{color:Text};
  753. border-left:1px solid {color:Accent Gray};
  754. margin-left:15px;
  755. padding-left:10px;
  756. text-align:left;
  757. }
  758.  
  759. blockquote img {
  760. max-width:100%;
  761. display:block;
  762. margin-bottom:5px;
  763. }
  764.  
  765. /* --- Chat --- */
  766.  
  767. .user_1 .label, .user_3 .label, .user_5 .label, .user_7 .label {font-weight:700;color:{color:Text};position:relative;top:-28px;}
  768.  
  769. .user_2 .label, .user_4 .label, .user_6 .label, .user_8 .label {font-weight:700;color:{color:Text};position:relative;top:-28px;}
  770.  
  771. ul.chat {
  772. list-style:none;
  773. margin:30px 0px 0px 0px;
  774. padding:0px;
  775. text-align:left;
  776. }
  777.  
  778. .chat li {
  779. list-style:none;
  780. margin:0px 0px 40px 0px;
  781. padding:5px;
  782. border-radius:5px;
  783. border:none;
  784. color:{color:Content}!important;
  785. }
  786.  
  787. .chat i {position:relative;top:-13px;color:{color:Content}!important;}
  788.  
  789. .chat li:nth-of-type(odd) {background:{color:Accent One};text-align:left;padding-left:10px;}
  790. .chat li:nth-of-type(even) {background:{color:Accent Two};text-align:right;padding-right:13px;}
  791.  
  792. .chat li:first-child {margin-top:10px;border:none;}
  793.  
  794. /* --- Lists --- */
  795.  
  796. ul {text-align:left;}
  797. li {text-align:left;}
  798.  
  799. /* --- AUDIO POSTS --- */
  800.  
  801. .audio {
  802. margin-top:25px;
  803. height:70px;
  804. padding:21px 10px 0px 10px;
  805. }
  806.  
  807. .button {
  808. position:relative;
  809. width:30px;
  810. height:30px;
  811. overflow:hidden;
  812. margin:10px 9px 8px 8px;
  813. z-index:4;
  814. }
  815.  
  816. .audiobox {
  817. float:left;
  818. margin:0px;
  819. border-radius:50%;
  820. background-color:#f2f2f2;
  821. z-index:3;
  822. }
  823.  
  824. .audioinfo {width:calc(100% - 100px - 91px);display:inline-block;text-transform:lowercase;padding:7px 0px 0px 30px;color:{color:Text};}
  825.  
  826. .audioinfo h1 {font-size:calc({select:Body Font Size} + 2pt);font-weight:bold;margin:0px 0px -35px 0px;padding-bottom:10px;}
  827.  
  828. .albumart {float:right;position:relative;top:-10px;}
  829.  
  830. .albumart img {height:71px;width:71px;}
  831.  
  832. .spotify_audio_player {height:80px!important;}
  833.  
  834. /* --- QUESTIONS ---*/
  835.  
  836. .asker {margin-top:20px;position:relative;top:10px;left:0px;}
  837.  
  838. .askeravatar {height:45px;width:45px;display:inline-block;margin:4px 10px 0px 0px;}
  839.  
  840. .askeravatar img {height:45px;width:45px;}
  841.  
  842. .askername {
  843. position:relative;
  844. top:-55px;
  845. width:300px;
  846. left:60px;
  847. text-align:left;
  848. margin-bottom:-35px;
  849. }
  850.  
  851. .askername h1 {
  852. position:relative;
  853. left:0px;
  854. top:3px;
  855. text-align:left;
  856. margin:0px 0px 10px 0px;
  857. padding:0px!important;
  858. text-transform:uppercase;
  859. font-size:calc({select:Body Font Size} + 2pt);
  860. font-weight:400;
  861. padding-bottom:10px;
  862. }
  863.  
  864. .askername em {
  865. position:relative;
  866. left:0px;
  867. text-align:left;
  868. display:block;
  869. margin:0px;
  870. font-style:normal;
  871. }
  872.  
  873. .question {margin:10px 0px 5px 0px;text-align:left;padding:10px;background:{color:Accent Two};color:{color:Content};}
  874.  
  875. /* --- LIGHTBOXES ---*/
  876.  
  877. .vignette, #vignette {opacity:0;}
  878.  
  879. .lightbox-image, #tumblr_lightbox img {box-shadow:none !important;border-radius:0 !important;max-width:none;-moz-box-sizing:border-box;box-sizing:border-box;}
  880.  
  881. .tmblr-lightbox, #tumblr_lightbox {background-color:rgba({select:Lightbox}.90) !important;}
  882.  
  883. .lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}
  884.  
  885. /* --- Permalinks --- */
  886.  
  887. ol.notes {
  888. padding:40px 0px 0px 0px;
  889. margin:0px 0px 25px 0px;
  890. list-style-type: none;
  891. border-bottom: solid 0px;
  892. letter-spacing:1px;
  893. background:{color:Content Background};
  894. width:{select:Post Size};
  895. }
  896.  
  897. .notes a {color:{color:Text};}
  898. .notes a:hover {color:{color:Text};}
  899.  
  900. ol.notes li.note {
  901. display:block;
  902. padding:10px;
  903. list-style-type:none!important;
  904. }
  905.  
  906. ol.notes li.note img.avatar {
  907. vertical-align:-4px;
  908. margin-right:10px;
  909. width:15px;
  910. height:15px;
  911. display:inline-block;
  912. }
  913.  
  914. ol.notes li.note span.action {font-weight: normal;}
  915.  
  916. ol.notes li.note .answer_content {font-weight: normal;}
  917.  
  918. ol.notes li.note blockquote {
  919. border-color: {color:Text};
  920. padding: 4px 10px;
  921. margin: 10px 0px 0px 25px;
  922. }
  923.  
  924. ol.notes li.note blockquote a {text-decoration: none;}
  925.  
  926. {CustomCSS}
  927. </style>
  928. </head>
  929.  
  930.  
  931. <body>
  932.  
  933. <div class="cover"></div>
  934.  
  935.  
  936.  
  937. <!-- START CONTAINER -->
  938. <div class="container">
  939.  
  940.  
  941.  
  942. <!-- START HEADER -->
  943. <div class="header"></div>
  944. <!-- END HEADER -->
  945.  
  946.  
  947.  
  948.  
  949.  
  950. <!-- START SIDEBAR -->
  951.  
  952.  
  953. <div class="sidebar">
  954.  
  955. <div class="title_print">
  956. {text:Blog Title Print}
  957. <h1>{text:Blog Title Script}</h1>
  958. </div>
  959.  
  960.  
  961. <div class="side_container">
  962. <div class="side_icon"><img src="https://placehold.it/200X170" /></div>
  963. <div class="side_description">{Description}</div>
  964. </div>
  965.  
  966.  
  967. <div class="pagination">
  968. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  969. </div>
  970.  
  971. <div class="side_icons"><div class="icons">
  972.  
  973. <a title="home" href="/"><span class="jam jam-home"></span></a>
  974.  
  975. <a title="contact" href="{text:Ask URL}"><span class="jam jam-envelope"></span></a>
  976.  
  977. <a href="javascript:showhide('navigational')" title="tags"><span class="jam jam-tag"></span></a>
  978.  
  979. <a title="user hover" href="{text:User Icon URL}"><span class="jam jam-user"></span></a>
  980.  
  981. <a href="javascript:showhide('updater')" title="updates"><span class="jam jam-calendar-alt"></span></a>
  982.  
  983. </div></div>
  984.  
  985.  
  986.  
  987. <!-- START UPDATES -->
  988. <div id="updater" style="display:none;">
  989. <div class="updates">
  990.  
  991. <!----------------------------------------------
  992.  
  993. ------------------------------------------------
  994.  
  995. START UPDATES BELOW:
  996.  
  997. COPY FROM "START UPDATE" TO "END UPDATE" TO ADD MORE
  998.  
  999. ------------------------------------------------
  1000.  
  1001. ----------------------------------------------->
  1002.  
  1003.  
  1004.  
  1005. <!------- Start Update --------->
  1006. <div class="individual_update">
  1007. <b>update one</b>
  1008. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum.
  1009. </div>
  1010. <!------- End Update --------->
  1011.  
  1012.  
  1013.  
  1014. <!------- Start Update --------->
  1015. <div class="individual_update">
  1016. <b>update two</b>
  1017. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum.
  1018. </div>
  1019. <!------- End Update --------->
  1020.  
  1021.  
  1022.  
  1023. <!------- Start Update --------->
  1024. <div class="individual_update">
  1025. <b>update three</b>
  1026. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum.
  1027. </div>
  1028. <!------- End Update --------->
  1029.  
  1030.  
  1031.  
  1032.  
  1033. </div>
  1034. </div><!-- END UPDATES-->
  1035.  
  1036. </div>
  1037. <!-- END SIDEBAR-->
  1038.  
  1039.  
  1040.  
  1041.  
  1042.  
  1043.  
  1044.  
  1045.  
  1046. <!-- START POSTS-->
  1047. <div class="posts">
  1048.  
  1049.  
  1050. <!-- START POSTS -->
  1051. <div class="posts">
  1052. {block:Posts}
  1053. <div class="postcontainer">
  1054.  
  1055.  
  1056.  
  1057.  
  1058. <!-- START POST INFO -->
  1059. <div class="postcontroller">
  1060. {block:IndexPage}
  1061. <div class="postcontrol">
  1062. <a href="{ReblogURL}" target="_blank" class="reblog"><span class="jam jam-refresh"></span</a><a class="like" href="#">{LikeButton}<i><span class="jam jam-heart-f"></span></i></a></div>
  1063. {/block:IndexPage}
  1064. </div>
  1065. <!-- END POST INFO -->
  1066.  
  1067.  
  1068.  
  1069. <!-- Post Styles Start -->
  1070. <div class="iposts" id="{PostID}">
  1071. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1072.  
  1073. {block:Link}
  1074. <div class="linkpost">
  1075. {block:Thumbnail}<div class="linkthumb"><img src="{Thumbnail-HighRes}" /></div>{/block:Thumbnail}
  1076. <div class="caption">
  1077. {block:Host}<div class="link_host">{Host}</div>{/block:Host}<a href="{URL}">{Name}{block:Excerpt}<p><i>―{Excerpt}</i>{/block:Excerpt}</a> {block:Description}{Description}{/block:Description} </div>
  1078. </div>
  1079. {/block:Link}
  1080.  
  1081. {block:Quote}<div class="quote_post"><h3>"{Quote}"</h3></b>{Source}</div>{/block:Quote}
  1082.  
  1083. {block:Photo}<center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1084. </center>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  1085.  
  1086. {block:Photoset}<div class="set"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  1087. <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></center>
  1088. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}</div>{/block:Photoset}
  1089.  
  1090. {block:Chat}
  1091. <div class="caption"><ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}<br><i>{Line}</i></li>{/block:Lines}</ul></div>
  1092. {/block:Chat}
  1093.  
  1094. {block:Audio}
  1095. <div class="audio"><div class="audiobox"><div class="button">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div><div class="audioinfo">{block:Artist}<h1>{Artist}</h1>{/block:Artist}<br>{block:TrackName}{TrackName}{/block:TrackName}</div>{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  1096.  
  1097. {block:Video}<div class="video"><center>{Video-500}</center>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}</div>{/block:Video}
  1098.  
  1099. {block:Answer}<div class="asker"><div class="askeravatar"><img src="{AskerPortraitURL-64}" /></div><div class="askername"><h1>{Asker}</h1> <em>asked a question:</em></div></div><div class="question">{Question}</div>{Answer}{/block:Answer}
  1100.  
  1101. </div>
  1102. <!-- POST STYLES END -->
  1103.  
  1104.  
  1105.  
  1106.  
  1107. <!-- START POST INFO -->
  1108. <div class="postinfo">
  1109. {block:Date}<a href="{Permalink}">posted {TimeAgo}</a>{/block:Date}{block:NoteCount} • <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom} • <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>/{block:ContentSource}<a title="{ReblogRootName}" href="{SourceURL}">src</a>{/block:ContentSource}{block:IndexPage}{/block:IndexPage}{/block:RebloggedFrom}
  1110. </div>
  1111. <!-- END POST INFO -->
  1112.  
  1113.  
  1114. <!-- START POST TAGS -->
  1115. {block:HasTags}
  1116. <div class="posttags">
  1117. <div class="tags_box"><span>
  1118. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1119. </span></div>
  1120. </div>
  1121. {/block:HasTags}
  1122. <!-- END POST TAGS -->
  1123.  
  1124.  
  1125.  
  1126.  
  1127. <!-- PERMALINK NOTES -->
  1128. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1129.  
  1130. </div>
  1131. {/block:Posts}
  1132. </div></div>
  1133. <!-- END POSTS -->
  1134.  
  1135.  
  1136.  
  1137.  
  1138.  
  1139.  
  1140.  
  1141.  
  1142.  
  1143. <!-- START UPDATES -->
  1144. <div id="navigational" style="display:none;">
  1145. <div class="navigational_tags">
  1146.  
  1147. <!----------------------------------------------
  1148.  
  1149. ------------------------------------------------
  1150.  
  1151. START NAVIGATION TAGS BELOW:
  1152.  
  1153. ------------------------------------------------
  1154.  
  1155. ----------------------------------------------->
  1156.  
  1157.  
  1158. <!-- START NAVIGATION TAG SECTION -->
  1159. <div class="navi_tag">
  1160. <div class="navitags">
  1161.  
  1162. <!------- To change the icons, go to jam-icons.com and find the icon of your chose, simply click on the icon to copy and paste AFTER the
  1163.  
  1164. jam jam-
  1165.  
  1166. So if you want the home icon you'd replace this
  1167.  
  1168. jam jam-user
  1169.  
  1170. for
  1171.  
  1172. jam jam-home
  1173.  
  1174. --------->
  1175.  
  1176. <a title="PSA" href="{text:PSA URL}"><span class="jam jam-alert"></span></a>
  1177.  
  1178. <a title="Promotion" href="{text:Promotion URL}"><span class="jam jam-bookmark"></span></a>
  1179.  
  1180. <a title="Memes" href="{text:Memes URL}"><span class="jam jam-search-folder"></span></a>
  1181.  
  1182. <a title="Keepsake" href="{text:Keepsake URL}"><span class="jam jam-star"></span></a>
  1183.  
  1184. <a title="Bucket list" href="{text:Bucket List URL}"><span class="jam jam-task-list"></span></a>
  1185.  
  1186. <a title="Open Starter" href="{text:Open Starter URL}"><span class="jam jam-write"></span></a>
  1187.  
  1188. <a title="Pretty faces" href="{text:Pretty Faces URL}"><span class="jam jam-user-plus"></span></a>
  1189.  
  1190. <a title="Mun" href="{text:Mun URL}"><span class="jam jam-fingerprint"></span></a>
  1191.  
  1192. <a title="Resources" href="{text:Resources URL}"><span class="jam jam-database "></span></a>
  1193.  
  1194. </div>
  1195. </div>
  1196. <!-- END TAG SECTION -->
  1197.  
  1198.  
  1199.  
  1200. <div class="navigation_scroll">
  1201.  
  1202.  
  1203.  
  1204. <!-- START FAQ -->
  1205. <div class="rules">
  1206.  
  1207. <b>Rules</b>
  1208.  
  1209. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
  1210.  
  1211. </div>
  1212. <!-- END FAQ -->
  1213.  
  1214.  
  1215.  
  1216.  
  1217.  
  1218. <!-- START FAQ -->
  1219. <div class="faq">
  1220.  
  1221. <b>frequently asked questions</b>
  1222.  
  1223. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
  1224.  
  1225. </div>
  1226. <!-- END FAQ -->
  1227.  
  1228.  
  1229.  
  1230.  
  1231.  
  1232. </div>
  1233. </div>
  1234. </div><!-- END NAVIGATION TAGS -->
  1235.  
  1236.  
  1237.  
  1238.  
  1239.  
  1240. </div>
  1241. <!-- END CONTAINER -->
  1242.  
  1243.  
  1244.  
  1245.  
  1246.  
  1247.  
  1248.  
  1249.  
  1250.  
  1251.  
  1252. <!-- ADDITIONAL SCRIPTS -->
  1253.  
  1254. <!-- Photosets -->
  1255.  
  1256. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1257. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1258.  
  1259. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  1260.  
  1261. <script>
  1262. $(document).ready(function(){
  1263. $('.photo-slideshow').pxuPhotoset({
  1264. lightbox: true,
  1265. rounded: false,
  1266. gutter: '0px',
  1267. borderRadius: '0px',
  1268. photoset: '.photo-slideshow',
  1269. photoWrap: '.photo-data',
  1270. photo: '.pxu-photo'
  1271. });
  1272. });
  1273. </script>
  1274.  
  1275. <script>
  1276. function showhide(id) {
  1277. var e = document.getElementById(id);
  1278. e.style.display = (e.style.display == 'block') ? 'none' : 'block';
  1279. }
  1280. </script>
  1281.  
  1282. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement