API tools faq
paste
Advertisement
cvndythemes

Theme #02

cvndythemes
Dec 2nd, 2018
2,141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.83 KB | None | 0 0
raw download clone embed print report
  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 // PERSONAL THEME #002
  17.  
  18. Designed by etherealthemes
  19. etherealthemes.tumblr.com
  20. ⓒ 2016 - 2019
  21.  
  22. >> CREDITS
  23.  
  24. icons by @fontawesome and @ionicons
  25.  
  26. >> THEME HELP
  27.  
  28. Theme - Background, Text, Accent + Accent Grey colors
  29. Multiple font size options
  30. Content Spacing ; space between sidebar and posts
  31.  
  32. Sidebar - Left/Right sidebar
  33. 250/300/350px width options
  34. Sidebar Top Margin ; Space between top of page and sidebar
  35. Show/Hide blog title
  36. Show/Hide sidebar image
  37. Options for single or three random sidebar image
  38. Show/Hide social media icons + customizable extra icons
  39. Auto-fill about
  40. Show/Hide hover updates search "Start Updates" to edit
  41.  
  42. Posts - 250-540px width size options
  43. Post Top Margin ; space between top of page and first post
  44. Post Margin ; space between posts
  45. Photoset Margin ; space between photoset images
  46. Black / White Lightbox ; Screen overlay when clicking on images
  47. Show/Hide Post captions
  48.  
  49. Misc - 6 links + home / ask
  50.  
  51. -->
  52.  
  53.  
  54.  
  55.  
  56. <!-- COLORS -->
  57. <meta name="color:Background" content="#ffffff" />
  58. <meta name="color:Text" content="#000000" />
  59. <meta name="color:Links" content="#929292" />
  60.  
  61. <meta name="color:Accent" content="#d8a0af" />
  62. <meta name="color:Accent Gray" content="#bababa" />
  63.  
  64. <meta name="color:Content" content="#ffffff" />
  65.  
  66. <meta name="color:Social Media Icons" content="#ffffff" />
  67.  
  68.  
  69. <!-- IMAGES -->
  70. <meta name="image:Sidebar Image" content="https://placehold.it/350X150"/>
  71. <meta name="image:Sidebar Image Two" content="https://placehold.it/350X150"/>
  72. <meta name="image:Sidebar Image Three" content="https://placehold.it/350X150"/>
  73.  
  74.  
  75. <!-- SELECT -->
  76. <meta name="select:Font Size" content="9px" title="Small">
  77. <meta name="select:Font Size" content="10px" title="Default">
  78. <meta name="select:Font Size" content="11px" title="Medium">
  79. <meta name="select:Font Size" content="12px" title="Large">
  80.  
  81. <meta name="select:Sidebar Size" content="250px" title="250">
  82. <meta name="select:Sidebar Size" content="300px" title="300">
  83. <meta name="select:Sidebar Size" content="350px" title="350">
  84.  
  85. <meta name="select:Social Media Extra" content="fas fa-bell" title="Bell">
  86. <meta name="select:Social Media Extra" content="fas fa-book" title="Book">
  87. <meta name="select:Social Media Extra" content="fas fa-bookmark" title="Book Mark">
  88. <meta name="select:Social Media Extra" content="fas fa-coffee" title="KoFi">
  89. <meta name="select:Social Media Extra" content="fas fa-gift" title="Gift">
  90. <meta name="select:Social Media Extra" content="fas fa-book-open" title="Open Book">
  91. <meta name="select:Social Media Extra" content="fas fa-calendar-alt" title="Calendar">
  92.  
  93. <meta name="select:Content Spacing" content="100px" title="Small">
  94. <meta name="select:Content Spacing" content="200px" title="Medium">
  95. <meta name="select:Content Spacing" content="250px" title="Large">
  96.  
  97. <meta name="select:Post Top Margin" content="25px" title="Small">
  98. <meta name="select:Post Top Margin" content="50px" title="Medium">
  99. <meta name="select:Post Top Margin" content="75px" title="Large">
  100.  
  101. <meta name="select:Post Size" content="250px" title="250">
  102. <meta name="select:Post Size" content="300px" title="300">
  103. <meta name="select:Post Size" content="350px" title="350">
  104. <meta name="select:Post Size" content="400px" title="400">
  105. <meta name="select:Post Size" content="450px" title="450">
  106. <meta name="select:Post Size" content="500px" title="500">
  107. <meta name="select:Post Size" content="540px" title="540">
  108.  
  109. <meta name="select:Post Margin" content="50px" title="Small">
  110. <meta name="select:Post Margin" content="75px" title="Medium">
  111. <meta name="select:Post Margin" content="125px" title="Large">
  112.  
  113. <meta name="select:Photoset Margin" content="1px" title="Tiny">
  114. <meta name="select:Photoset Margin" content="2px" title="Small">
  115. <meta name="select:Photoset Margin" content="3px" title="Medium">
  116. <meta name="select:Photoset Margin" content="5px" title="Default">
  117.  
  118. <meta name="select:Lightbox" content="0,0,0," title="Black">
  119. <meta name="select:Lightbox" content="255,255,255," title="White">
  120.  
  121.  
  122. <!-- IF -->
  123. <meta name="if:Invert Tumblr Controls" content="1"/>
  124. <meta name="if:Sidebar Left" content="1"/>
  125. <meta name="if:Show Blog Title" content="1"/>
  126. <meta name="if:Sidebar Image" content="1"/>
  127. <meta name="if:Random Sidebar Image" content="0"/>
  128. <meta name="if:Sidebar Image Three" content="0"/>
  129. <meta name="if:Social Media" content="1"/>
  130. <meta name="if:Updates" content="1"/>
  131.  
  132. <meta name="if:Post Captions" content="1"/>
  133.  
  134.  
  135. <!-- TEXT -->
  136. <meta name="text:Sidebar Top Margin" content="100" />
  137. <meta name="text:Twitter URL" content="Twitter URL" />
  138. <meta name="text:Instagram URL" content="Instagram URL" />
  139. <meta name="text:Pinterest URL" content="Pinterest URL" />
  140. <meta name="text:WeHeartIt URL" content="WeHeartIt URL" />
  141.  
  142. <meta name="text:Social Media Extra" content="SM Extra" />
  143. <meta name="text:Social Media Extra URL" content="SM Extra URL" />
  144.  
  145. <meta name="text:Link One" content="" />
  146. <meta name="text:Link One URL" content="" />
  147. <meta name="text:Link Two" content="" />
  148. <meta name="text:Link Two URL" content="" />
  149. <meta name="text:Link Three" content="" />
  150. <meta name="text:Link Three URL" content="" />
  151. <meta name="text:Link Four" content="" />
  152. <meta name="text:Link Four URL" content="" />
  153.  
  154.  
  155. <!-- SCRIPTS -->
  156. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  157. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  158.  
  159. <script>
  160. (function($){
  161. $(document).ready(function(){
  162. $("[title]").style_my_tooltips({
  163. tip_delay_time:200,
  164. tip_fade_speed:300,
  165. tip_follows_cursor:true
  166. }
  167. );
  168. });
  169. })(jQuery);
  170. </script>
  171.  
  172. <script>
  173. $container.infinitescroll({
  174. itemSelector: '.posts',
  175. navSelector: '.pagination',
  176. nextSelector: '.pagination a',
  177. loadingImg: '',
  178. loadingText: '<em></em>',
  179. bufferPx: 2000
  180. },
  181. function( newElements ) {
  182. var $newElems = $(newElements);
  183. var $newElemsIDs = $newElems.map(function(){
  184. return this.id;
  185. }).get();
  186. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  187. });
  188. </script>
  189.  
  190. <script src="https://static.tumblr.com/yzs4yqx/BV3o343ow/smoothscroll.min.js"></script>
  191.  
  192. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  193.  
  194. <script src="https://unpkg.com/ionicons@4.4.8/dist/ionicons.js"></script>
  195.  
  196.  
  197. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i|Merriweather:700,700i' rel='stylesheet' type='text/css'>
  198.  
  199.  
  200. <!-- STYLESHEET -->
  201. <style type="text/css">
  202.  
  203. /* --- TUMBLR TOOLS --- */
  204.  
  205. {block:IndexPage}
  206. iframe.tmblr-iframe {
  207. top:14px!important;
  208. right:5!important;
  209. opacity:0;
  210. padding-right:60px;
  211. z-index:15!important;
  212. transform:scale(0.5);
  213. transform-origin:100% 0;
  214. -webkit-transform:scale(0.5);
  215. -webkit-transform-origin:100% 0;
  216. -o-transform:scale(0.5);
  217. -o-transform-origin:100% 0;
  218. -moz-transform:scale(0.5);
  219. -moz-transform-origin:100% 0;
  220. -ms-transform:scale(0.5);
  221. -ms-transform-origin:100% 0;
  222. transition:0.2s ease-in-out;
  223. -webkit-transition:0.2s ease-in-out;
  224. -moz-transition:0.2s ease-in-out;
  225. {block:IfInvertTumblrControls}
  226. filter:invert(1);
  227. -webkit-filter:invert(1);
  228. -o-filter:invert(1);
  229. -moz-filter:invert(1);
  230. -ms-filter:invert(1);
  231. {/block:IfInvertTumblrControls}
  232. }
  233.  
  234. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  235.  
  236. .tcontrols {
  237. position:fixed;
  238. top:20px;
  239. right:15px;
  240. z-index:14;
  241. }
  242.  
  243. .tcontrols {
  244. color:{color:Topbar Links};
  245. font-size:calc({select:Font Size} + 3px);
  246. font-weight:600;
  247. }
  248. {/block:IndexPage}
  249.  
  250. {block:PermalinkPage}
  251. iframe.tmblr-iframe {
  252. top:14px!important;
  253. right:5!important;
  254. opacity:0.5;
  255. padding-right:20px;
  256. z-index:15!important;
  257. transform:scale(0.5);
  258. transform-origin:100% 0;
  259. -webkit-transform:scale(0.5);
  260. -webkit-transform-origin:100% 0;
  261. -o-transform:scale(0.5);
  262. -o-transform-origin:100% 0;
  263. -moz-transform:scale(0.5);
  264. -moz-transform-origin:100% 0;
  265. -ms-transform:scale(0.5);
  266. -ms-transform-origin:100% 0;
  267. {block:IfInvertTumblrControls}
  268. filter:invert(1);
  269. -webkit-filter:invert(1);
  270. -o-filter:invert(1);
  271. -moz-filter:invert(1);
  272. -ms-filter:invert(1);
  273. {/block:IfInvertTumblrControls}
  274. }
  275. {/block:PermalinkPage}
  276.  
  277. /* --- SELECTION ---*/
  278.  
  279. ::-moz-selection {
  280. color:{color:Content};
  281. background:{color:Accent};
  282. opacity:1;
  283. }
  284.  
  285. ::selection {
  286. color:{color:Content};
  287. background:{color:Accent};
  288. opacity:1;
  289. }
  290.  
  291. /* --- SCROLLBAR ---*/
  292.  
  293. ::-webkit-scrollbar-thumb {border-radius:5px;background-color:{color:Accent};}
  294.  
  295. ::-webkit-scrollbar-button {background-color:{color:Background};height:0px;}
  296.  
  297. ::-webkit-scrollbar {width:5px;background:{color:Background};}
  298.  
  299. /* --- Tooltips ---*/
  300.  
  301. #s-m-t-tooltip {
  302. position:absolute;
  303. margin:15px;
  304. max-width:250px;
  305. border-radius:5px;
  306. background-color:{color:Accent};
  307. text-transform:lowercase;
  308. font-family:'Open Sans', sans-serif;
  309. font-size:calc(10px + 1px);
  310. font-style:italic;
  311. text-decoration:none;
  312. color:{color:Background};
  313. text-align:center;
  314. padding:3px 6px 4px 6px;
  315. z-index:10;
  316. }
  317.  
  318. /* --- BODY --- */
  319.  
  320. body {
  321. background:{color:Background};
  322. margin:0px;
  323. color:{color:Text};
  324. text-transform:lowercase;
  325. font-style:normal;
  326. font-family:'Open Sans', sans-serif;
  327. font-size:{select:Font Size};
  328. text-decoration:none;
  329. line-height:170%;
  330. }
  331.  
  332. a {color:{color:Links};text-decoration:none;transition:0.2s ease-in-out;-webkit-transition:0.2s ease-in-out;-moz-transition:0.2s ease-in-out;}
  333.  
  334. a:hover {color:{color:Accent Gray};}
  335.  
  336. b, bold, strong {color:{color:Text};!important;font-weight:600;}
  337. i, em, italic {color:{color:Text};letter-spacing:0.5px;}
  338. sub, sup {border:0px;{color:Text}}
  339. small {{color:Text}}
  340.  
  341.  
  342. hr.divider, hr, hr.separator {
  343. display:block;
  344. margin-top:0.5em;
  345. margin-bottom:0.5em;
  346. margin-left:auto;
  347. margin-right:auto;
  348. border-style:inset;
  349. border-color:{color:Links};
  350. border-bottom:1px;
  351. }
  352.  
  353. pre {
  354. white-space:pre-wrap;
  355. white-space:-moz-pre-wrap;
  356. white-space:-pre-wrap;
  357. white-space:-o-pre-wrap;
  358. word-wrap:break-word;
  359. }
  360.  
  361. /* --- CONTAINER --- */
  362.  
  363. .container {
  364. margin:0 auto;
  365. width:calc({select:Sidebar Size} + {select:Post Size} + {select:Content Spacing});
  366. /* -- Sidebar + Post + Padding + Middle Margin --- */
  367. background:{color:Background};
  368. }
  369.  
  370. #end {clear:both;text-align:center;}
  371.  
  372. /* --- SIDEBAR --- */
  373.  
  374. .sidebar {
  375. position:fixed;
  376. height:100%;
  377. width:{select:Sidebar Size};
  378.  
  379. {block:IfSidebarLeft}
  380. float:left;
  381. {/block:IfSidebarLeft}
  382.  
  383. {block:IfNotSidebarLeft}
  384. left:calc({select:Content Spacing} + 50% - 20px);
  385. {/block:IfNotSidebarLeft}
  386.  
  387. background:{color:Background};
  388. padding:{text:Sidebar Top Margin}px 10px 10px 10px;
  389. }
  390.  
  391. .sidetitle {
  392. font-family: 'Merriweather', serif;
  393. font-size:calc({select:Font Size} + 3px);
  394. font-style:italic;
  395. color:{color:Accent};
  396. letter-spacing:0.5px;
  397. font-weight:700;
  398. margin-bottom:10px;
  399. text-align:left!important;
  400. }
  401.  
  402. .sideimage, .about, .navigation, .socialmedia, .updates {margin-bottom:10px;}
  403.  
  404. .sideimage img {width:{select:Sidebar Size};height:150px;}
  405.  
  406. ul.navigation {
  407. width:{select:Sidebar Size};
  408. margin-left:-40px;
  409. list-style:none;
  410. overflow:hidden;
  411. text-align:left;
  412. }
  413.  
  414. .navigation li {
  415. display:inline-block;
  416. margin:3px;
  417. width:46%;
  418. }
  419.  
  420. .navigation a {
  421. font-size:calc({select:Font Size} + 1px);
  422. font-style:italic;
  423. color:{color:Text};
  424. padding:0px 4px;
  425. transition:0.2s ease-in-out;
  426. -webkit-transition:0.2s ease-in-out;
  427. -moz-transition:0.2s ease-in-out;
  428. }
  429.  
  430. .navigation a:hover {color:{color:Accent Gray};}
  431.  
  432. .socialmedia {text-align:center;}
  433.  
  434. .socialmedia i {
  435. display:inline-block;
  436. width:13px;
  437. height:13px;
  438. font-size:calc({select:Font Size} + 3px);
  439. color:{color:Social Media Icons};
  440. margin:5px;
  441. padding:5px;
  442. border-radius:50%;
  443. }
  444.  
  445. .updates em {color:{color:Accent};font-weight:700;}
  446.  
  447. .updates img {height:40px;width:40px;}
  448.  
  449. .updates:hover .updateshover {opacity:1;}
  450.  
  451. .updateshover {
  452. opacity:0;
  453. transition:0.4s ease-in-out;
  454. -webkit-transition:0.4s ease-in-out;
  455. -moz-transition:0.4s ease-in-out;
  456. }
  457.  
  458. /* --- POSTS --- */
  459.  
  460. .posts {
  461. {block:IfSidebarLeft}
  462. float:right;
  463. {/block:IfSidebarLeft}
  464.  
  465. {block:IfNotSidebarLeft}
  466. float:left;
  467. {/block:IfNotSidebarLeft}
  468.  
  469. background:{color:Content};
  470. margin:{select:Post Top Margin} 0px 0px 0px;
  471. width:calc({select:Post Size} + 20px);
  472. text-align:left;
  473. text-transform:lowercase;
  474. font-style:normal;
  475. text-decoration:none;
  476. line-height:18px;
  477. animation:fadein 1.5s;
  478. -moz-animation:fadein 1.5s;
  479. -webkit-animation:fadein 1.5s;
  480. -o-animation:fadein 1.5s;
  481. }
  482.  
  483. @keyframes fadein {from {opacity:0;}to {opacity:1;}}
  484.  
  485. @-moz-keyframes fadein { from {opacity:0;}to {opacity:1;}}
  486.  
  487. @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  488.  
  489. @-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}
  490.  
  491. .post {padding:0px;}
  492.  
  493. .iposts {background:{color:Content};min-height:75px;padding:10px;}
  494.  
  495. .ipostpxu {margin-left:5px;width:calc({select:Post Size} - 10px);}
  496.  
  497. .ipostphoto img {width:{select:Post Size};}
  498.  
  499. iframe, img, embed, object, video {max-width:100%;}
  500.  
  501. .textpost img {max-width:100%;height:auto;}
  502.  
  503. img {border:0;max-width:100%;height:auto}
  504.  
  505. .video {overflow:hidden;width:{select:Post Size};}
  506. .vine-embed,#youtube_iframe {width:{select:Post Size};}
  507. .instagram-media {border-radius:0!important;box-shadow:none!important;}
  508. .video {padding-bottom:1px;}
  509. .video {padding:1px;}
  510.  
  511. /* --- POST INFO --- */
  512.  
  513. .postinfo {
  514. background:{color:Content};
  515. padding:10px;
  516. text-align:center;
  517. font-size:{select:Font Size};
  518. color:{color:Text};
  519. }
  520.  
  521. .postinfo a {color:{color:Text};}
  522.  
  523. /* --- POST CONTROL --- */
  524.  
  525. .postcontrol {display:inline-block;color:{color:Text};}
  526.  
  527. .postcontrol i {color:{color:Text};}
  528.  
  529. .postcontrol a {display:inline-block;}
  530.  
  531. .reblog {position:relative;top:1px;}
  532.  
  533. .postcontrol .like .liked + i {
  534. color:{color:Text};
  535. opacity:1;
  536. }
  537.  
  538. .like {
  539. position:relative;
  540. top:0px;
  541. }
  542.  
  543. .like i {
  544. color:{color:Text};
  545. font-size:8px;
  546. transition:0.2s ease-in-out;
  547. -webkit-transition:0.2s ease-in-out;
  548. -moz-transition:0.2s ease-in-out;
  549. }
  550.  
  551. .postcontrol .like .liked + i {
  552. color:#e6577d;
  553. }
  554.  
  555. .postcontrol .like .like_button {
  556. position:relative;
  557. }
  558.  
  559. .postcontrol .like .like_button iframe {
  560. position:absolute;
  561. top:0;
  562. left:0;
  563. bottom:0;
  564. right:0;
  565. z-index:2;
  566. opacity:0.000001;
  567. }
  568.  
  569. /* --- POST TAGS --- */
  570.  
  571. .posttags {
  572. background:{color:Content};
  573. padding:0px 10px 10px 10px;
  574. text-align:center;
  575. letter-spacing:0.5px;
  576. font-size:{select:Font Size};
  577. font-style:italic;
  578. color:{color:Accent Gray};
  579. margin-bottom:{select:Post Margin};
  580. }
  581.  
  582. .posttags a {color:{color:Accent Gray};margin:0px 3px;}
  583.  
  584. /* --- Titles --- */
  585.  
  586. h1, h2 {
  587. text-align:left;
  588. text-transform:lowercase;
  589. font-style:normal;
  590. color:{color:Text};
  591. font-size:calc({select:Font Size} + 3px);
  592. text-decoration:none;
  593. line-height:18px;
  594. padding-bottom:10px;
  595. }
  596.  
  597. /* --- Quote and Link --- */
  598.  
  599. h3 {
  600. text-align:left;
  601. text-transform:lowercase;
  602. font-style:normal;
  603. color:{color:Text};
  604. font-size:calc({select:Font Size} + 3px);
  605. text-decoration:none;
  606. line-height:18px;
  607. padding-bottom:0px;
  608. }
  609.  
  610. /* --- Blockquote --- */
  611.  
  612. blockquote {
  613. color:{color:Text};
  614. border-left:1px solid {color:Accent Gray};
  615. margin-left:15px;
  616. padding-left:10px;
  617. text-align:left;
  618. }
  619.  
  620. blockquote img {
  621. max-width:100%;
  622. display:block;
  623. margin-bottom:5px;
  624. }
  625.  
  626. /* --- AUDIO --- */
  627.  
  628. .player {
  629. position:absolute;
  630. margin-top:-69px;
  631. margin-left:35px;
  632. opacity:0.5;
  633. }
  634.  
  635. .audiop, .player {display:inline-block;}
  636.  
  637. .trackname {
  638. margin-left:120px;
  639. margin-top:-72px;
  640. color:{color:Text};
  641. text-transform:uppercase;
  642. font-weight:600;
  643. }
  644.  
  645. .artist {margin-left:120px;color:{color:Text};}
  646.  
  647. .audiop {
  648. position:absolute;
  649. display:block;
  650. margin-top:4px
  651. margin-top:-109px;
  652. }
  653.  
  654. .audioimg img {
  655. margin-top:10px;
  656. height:100px;
  657. width:100px;
  658. }
  659.  
  660. .tumblr_audio_player {
  661. width:30px;
  662. height:27px;
  663. overflow:hidden;
  664. }
  665.  
  666. .soundcloud_audio_player{padding-top:15px;}
  667.  
  668. /* --- Chat --- */
  669.  
  670. .user_1 .label, .user_3 .label, .user_5 .label, .user_7 .label {font-weight:700;}
  671.  
  672. .user_2 .label, .user_4 .label, .user_6 .label, .user_8 .label {font-weight:normal;}
  673.  
  674. ul.chat {
  675. list-style:none;
  676. margin: 0px 0px 0px 0px;
  677. padding: 0px;
  678. text-align:left;
  679. }
  680.  
  681. .chat li {
  682. list-style: none;
  683. margin: 0px;
  684. padding: 2px;
  685. border: none;
  686. }
  687.  
  688. .chat li:first-child {border: none;}
  689.  
  690. /* --- Lists --- */
  691.  
  692. ul { list-style-type:upper-roman; text-align:left;}
  693. li { list-style-type:square;}
  694.  
  695. /* --- Read More--- */
  696.  
  697. .moretext {
  698. font-weight: 400;
  699. font-size: 10px;
  700. margin: 10px 0px 30px;
  701. padding: 5px;
  702. text-align: center;
  703. }
  704.  
  705. .moretext a {
  706. padding: 3px 4px 3px 6px;
  707. font-size: 12px;
  708. letter-spacing: 1px;
  709. text-align: center;
  710. }
  711.  
  712. .moretext a:hover {font-size: 12px;}
  713.  
  714. /* --- Asks--- */
  715.  
  716. .asker {
  717. font-style:italic;
  718. text-transform:lowercase;
  719. text-decoration:none;
  720. }
  721.  
  722. .asker a {color:{color:Accent Gray};}
  723.  
  724. .asker img {
  725. width:20px;
  726. height:20px;
  727. position:absolute;
  728. margin-top:14px;
  729. margin-left:0px;
  730. }
  731.  
  732. .question {
  733. margin-left:20px;
  734. width:calc({select:Post Size} - 30px);
  735. padding:10px;
  736. text-align:left;
  737. }
  738.  
  739. /* --- PAGINATION ---*/
  740.  
  741. .pagination {
  742. margin:0 0px 70px 0px;
  743. margin-top:calc({select:Post Margin} + 50px);
  744. padding:10px;
  745. text-align:center;
  746. font-style:italic;
  747. background:{color:Background};
  748. }
  749.  
  750. .pagination a {
  751. border-radius:5px;
  752. background-color:{color:Accent};
  753. text-transform:lowercase;
  754. font-style:italic;
  755. text-decoration:none;
  756. color:{color:Background};
  757. font-weight:600;
  758. text-align:center;
  759. padding:2px 4px 2px 4px;
  760. margin:0px 4px;
  761. }
  762.  
  763. /* --- Permalinks --- */
  764.  
  765. ol.notes {
  766. padding:50px 0px 0px 0px;
  767. margin:-125px 0px 25px 0px;
  768. list-style-type: none;
  769. border-bottom: solid 0px;
  770. letter-spacing:1px;
  771. background:{color:Content};
  772. }
  773.  
  774. .notes a {color:{color:Text};}
  775. .notes a:hover {color:{color:Text};}
  776.  
  777. ol.notes li.note {
  778. border-top:solid 1px {color:Accent Gray};
  779. padding:10px;
  780. list-style-type:none!important;
  781. }
  782.  
  783. ol.notes li.note img.avatar {
  784. vertical-align:-4px;
  785. margin-right:10px;
  786. width:15px;
  787. height:15px;
  788. display:inline-block;
  789. }
  790.  
  791. ol.notes li.note span.action {font-weight: normal;}
  792.  
  793. ol.notes li.note .answer_content {font-weight: normal;}
  794.  
  795. ol.notes li.note blockquote {
  796. border-color: {color:Text};
  797. padding: 4px 10px;
  798. margin: 10px 0px 0px 25px;
  799. }
  800.  
  801. ol.notes li.note blockquote a {text-decoration: none;}
  802.  
  803. /* --- SCROLL TO TOP --- */
  804.  
  805. #scrollToTop {
  806. display:none;
  807. position:fixed;
  808. bottom:20px;
  809. right:5px;
  810. }
  811.  
  812. #scrollToTop svg {
  813. width:15px;
  814. fill:{color:Text};
  815. display:inline-block;
  816. padding:5px;
  817. transition: .2s ease-in-out;
  818. -webkit-transition: .2s ease-in-out;
  819. -moz-transition: .2s ease-in-out;
  820. -o-transition: .2s ease-in-out;
  821. }
  822.  
  823. .et {
  824. position:fixed;
  825. bottom:10px;
  826. right:13px;
  827. text-transform:uppercase;
  828. }
  829.  
  830. .et a {color:{color:Text};opacity:0.4;}
  831.  
  832. /* --- LIGHTBOXES ---*/
  833.  
  834. .vignette, #vignette {opacity:0; }
  835.  
  836. .lightbox-image, #tumblr_lightbox img {
  837. box-shadow:none !important;
  838. border-radius:0 !important;
  839. max-width:none;
  840. -moz-box-sizing:border-box;
  841. box-sizing:border-box;
  842. }
  843.  
  844. .tmblr-lightbox, #tumblr_lightbox {
  845. background-color:rgba(255,255,255,.90) !important;
  846. }
  847.  
  848. .lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}
  849.  
  850. {CustomCSS}
  851. </style>
  852. </head>
  853.  
  854.  
  855. <body>
  856.  
  857.  
  858. <!-- START CONTAINER -->
  859. <div class="container">
  860.  
  861.  
  862.  
  863.  
  864. <!-- START SIDEBAR -->
  865. <div class="sidebar">
  866.  
  867.  
  868.  
  869. <!-- Sidebar ; Image -->
  870. {block:IfSidebarImage}
  871. <div class="sideimage">
  872.  
  873. {block:ifShowBlogTitle}<div class="sidetitle">{Title}</div>{/block:ifShowBlogTitle}
  874.  
  875. {block:IfNotRandomSidebarImage}
  876. <img src="{image:Sidebar Image}" />
  877. {/block:IfNotRandomSidebarImage}
  878.  
  879. {block:IfRandomSidebarImage}
  880. <script language="JavaScript">
  881. <!--
  882.  
  883.  
  884.  
  885. function random_imglink(){
  886. var myimages=new Array()
  887. //specify random images below. You can have as many as you wish
  888. myimages[1]="{image:Sidebar Image}"
  889. myimages[2]="{image:Sidebar Image Two}"
  890. {block:ifSidebarImageThree}myimages[3]="{image:Sidebar Image Three}"{/block:ifSidebarImageThree}
  891.  
  892. var ry=Math.floor(Math.random()*myimages.length)
  893. if (ry==0)
  894. ry=1
  895. document.write('<img src="'+myimages[ry]+'" border=0>')
  896. }
  897. random_imglink()
  898. //-->
  899. </script>
  900. {/block:IfRandomSidebarImage}
  901.  
  902. </div>
  903. {/block:IfSidebarImage}
  904.  
  905.  
  906.  
  907.  
  908. <!-- Sidebar ; Social Media -->
  909. {block:IfSocialMedia}
  910. <div class="socialmedia">
  911. <a href="{text:Twitter URL}" title="twitter"><i class="fab fa-twitter"></i></a>
  912.  
  913. <a href="{text:Instagram URL}" title="instagram"><b><i class="fab fa-instagram"></i></b></a>
  914.  
  915. <a href="{text:Pinterest URL}" title="pinterest"><i class="fab fa-pinterest"></i></a>
  916.  
  917. <a href="{text:WeHeartIt URL}" title="weheartit"><i class="fas fa-heart"></i></a>
  918.  
  919. <a href="/" title="{text:Social Media Extra}"><i class="{select:Social Media Extra}"></i></a>
  920.  
  921. </div>
  922. {/block:IfSocialMedia}
  923.  
  924.  
  925.  
  926.  
  927.  
  928. <!-- Sidebar ; About -->
  929. <div class="about">
  930. <div class="sidetitle">About</div>
  931. {Description}
  932. </div>
  933.  
  934.  
  935.  
  936.  
  937.  
  938. <!-- Sidebar ; Navigation -->
  939. <div class="navigation">
  940. <div class="sidetitle">Navigation</div>
  941. <ul class="navigation">
  942. <li><a href="/">index</a></li>
  943. <li><a href="/ask">contact</a></li>
  944. <li><a href="{text:Link One URL}">{text:Link One}</a></li>
  945.  
  946. <li><a href="{text:Link Two URL}">{text:Link Two}</a></li>
  947. <li><a href="{text:Link Three URL}">{text:Link Three}</a></li>
  948. <li><a href="{text:Link Four URL}">{text:Link Four}</a></li>
  949. </ul>
  950. </div>
  951.  
  952.  
  953.  
  954.  
  955.  
  956. <!-- Sidebar ; Updates -->
  957. {block:IfUpdates}
  958. <div class="updates">
  959. <div class="sidetitle">Updates</div>
  960. <div class="updateshover">
  961.  
  962. <em>Date 00.00</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit.
  963. <p>
  964.  
  965. <em>Date 00.00</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit.
  966. <p>
  967.  
  968. <em>Date 00.00</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit.
  969. <p>
  970.  
  971.  
  972.  
  973. </div>
  974. </div>
  975. {/block:IfUpdates}
  976.  
  977.  
  978.  
  979. </div>
  980. <!-- END SIDEBAR -->
  981.  
  982.  
  983.  
  984.  
  985.  
  986.  
  987.  
  988.  
  989.  
  990. <div class="posts"><!-- START POSTS WRAPPER -->
  991.  
  992. <div class="post"><!-- START POSTS -->
  993. {block:Posts}
  994.  
  995.  
  996.  
  997.  
  998. <div class="iposts" id="{PostID}"><!-- Start Individual Posts -->
  999.  
  1000. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1001.  
  1002. {block:Link}<a href="{URL}"><h3>{Name}</h3></a>
  1003. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  1004.  
  1005. {block:Quote}<h3>“{Quote}”</h3><b>{Source}</b>{/block:Quote}
  1006.  
  1007. {block:Photo}<div class="ipostphoto"><center><img src="{PhotoURL-HighRes}"/></center>{block:IfPostCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfPostCaptions}</div>{/block:Photo}
  1008.  
  1009. {block:Photoset}<div class="ipostpxu"><center><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></center>
  1010. {block:IfPostCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfPostCaptions}</div>{/block:Photoset}
  1011.  
  1012. {block:Chat}
  1013. <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  1014. {/block:Chat}
  1015.  
  1016. {block:Video}
  1017. <div class="video">{Video-500}</div>
  1018. {block:IfPostCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfPostCaptions}
  1019. {/block:Video}
  1020.  
  1021. {block:Answer}
  1022. <div class="asker">
  1023. <img src="{AskerPortraitURL-48}"></div>
  1024. <div class="question">{Asker} asked: {Question}</div>
  1025. {Answer}{/block:Answer}
  1026.  
  1027. {block:Audio}
  1028. <div class="caption">
  1029. <div class="audio">{block:AlbumArt}<div class="audioimg"><img src="{AlbumArtURL}" /></div>{block:AlbumArt}{block:AudioPlayer}<div class="player">{AudioPlayerBlack}</div>{/block:AudioPlayer}
  1030. <div class="audiop">{block:TrackName}<div class="trackname">{TrackName}</div>{/block:TrackName}{block:Artist}<div class="artist">by {Artist}</div>{/block:Artist}</div>{block:Caption}{Caption}{/block:Caption}
  1031. </div></div>
  1032. {/block:Audio}
  1033.  
  1034. </div><!-- End Individual Posts -->
  1035.  
  1036.  
  1037.  
  1038.  
  1039. <!-- START POST INFO -->
  1040. <div class="postinfo">
  1041.  
  1042. <a href="{Permalink}">{TimeAgo}</a>{block:NoteCount}&nbsp;/&nbsp;<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom}&nbsp;/&nbsp;<a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>{block:ContentSource}&nbsp;/&nbsp;<a title="{ReblogRootName}" href="{SourceURL}">source</a>{/block:ContentSource}{/block:RebloggedFrom}
  1043.  
  1044. {block:IndexPage}
  1045. <div class="postcontrol">
  1046. &nbsp;/&nbsp;<a href="{ReblogURL}" target="_blank" class="reblog"><span style="font-size:{select:Font Size};"><ion-icon name="repeat"></ion-icon></span>
  1047. </a>&nbsp;/&nbsp;&nbsp;<a href="#" class="like">{LikeButton}<i class="fa fa-heart"></i></a>
  1048. </a>
  1049. </div>
  1050. {/block:IndexPage}
  1051.  
  1052. </div><!-- END POST INFO -->
  1053.  
  1054.  
  1055.  
  1056. <!-- START POST TAGS -->
  1057. <div class="posttags">{block:HasTags}
  1058. {block:Tags}<a href="/tagged/{Tag}">{Tag}</a>&nbsp;{/block:Tags}
  1059. {/block:HasTags}</div>
  1060. <!-- END POST TAGS -->
  1061.  
  1062.  
  1063.  
  1064. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1065.  
  1066. {/block:Posts}
  1067. </div><!-- END POSTS -->
  1068.  
  1069.  
  1070.  
  1071.  
  1072. <!-- START PAGINATION -->
  1073. <div class="pagination">
  1074. {block:Pagination}
  1075. {block:PreviousPage}<a href="{PreviousPage}">Back</a>{/block:PreviousPage}
  1076. page {CurrentPage} of {TotalPages}
  1077. {block:NextPage}<a href="{NextPage}">Forth</a>{/block:NextPage}
  1078. {/block:Pagination}
  1079. </div>
  1080. <!-- END PAGINATION -->
  1081.  
  1082.  
  1083.  
  1084.  
  1085. </div><!-- END POSTS WRAPPER -->
  1086.  
  1087.  
  1088.  
  1089.  
  1090.  
  1091. <div id="end"></div>
  1092. </div></div><!-- END CONTAINER -->
  1093.  
  1094.  
  1095.  
  1096.  
  1097. {block:IndexPage}
  1098. <div class="tcontrols">+</div>
  1099. {/block:IndexPage}
  1100.  
  1101.  
  1102.  
  1103.  
  1104. <!-- ADDITIONAL SCRIPTS -->
  1105. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1106. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1107. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1108.  
  1109. <script>
  1110. $(document).ready(function(){
  1111. $('.photo-slideshow').pxuPhotoset({
  1112. lightbox: true,
  1113. rounded: false,
  1114. gutter: '{select:Photoset Margin}',
  1115. borderRadius: '0px',
  1116. photoset: '.photo-slideshow',
  1117. photoWrap: '.photo-data',
  1118. photo: '.pxu-photo'
  1119. });
  1120. });
  1121. </script>
  1122.  
  1123. <div class="et"><a href="https://ethereal-themes.tumblr.com">et</a></div>
  1124.  
  1125. {block:IndexPage}
  1126. <script>
  1127. $(function(){$window=$(window);$link=$("#scrollToTop");$link.click(function(){$("html, body").animate({scrollTop:0},"slow")});$window.scroll(function(){if($window.scrollTop()<=1000){$link.fadeOut("fast")}else{$link.fadeIn("fast")}})});
  1128. </script>
  1129.  
  1130. <a href="javascript:;" id="scrollToTop" rel="nofollow"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M43.2,137.3c2.1,2.5,5.9,2.9,8.5,0.7L108,90.4l56.4,47.5c1.1,0.9,2.5,1.4,3.9,1.4c1.7,0,3.4-0.7,4.6-2.1 c2.1-2.5,1.8-6.3-0.7-8.5L111.9,78c-2.2-1.9-5.5-1.9-7.7,0l-60.3,50.8C41.3,130.9,41,134.7,43.2,137.3z"/></svg></a>
  1131. {/block:IndexPage}
  1132.  
  1133.  
  1134. </body>
  1135. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!