API tools faq
paste
Advertisement
cvndythemes

diana_character_theme

cvndythemes
May 23rd, 2020
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!--
  9.  
  10. >> ETHEREAL THEMES // DIANA - CHARACTER PAGE
  11.  
  12. Designed by etherealthemes
  13. etherealthemes.tumblr.com
  14. ⓒ 2016 - 2020
  15. Header Image ⓒ Olena Shmahalo via uunsplash @theoperatingsystem
  16.  
  17. >> TERMS OF USE
  18.  
  19. Do NOT remove the credit
  20. Do NOT claim as your own
  21.  
  22. *You can move the credit, but leave it visible
  23. *Edit as much as you'd like
  24. *Feel free to ask about basic customization
  25. *Page suggestions always welcomed
  26.  
  27. >> PAGE HELP
  28.  
  29. TO ADD CHARACTERS:
  30. To add characters, search:
  31. CHARACTER START
  32. and copy the block from CHARACTER START to CHARACTER END
  33. then paste after the last character block
  34.  
  35. Each character from START to END has one image, search:
  36. CHARACTER PORTRAIT
  37. to change the character image
  38.  
  39. MISC:
  40. All info in scroll box to keep page tidy.
  41. Page auto-centers
  42. Auto-fills all page sizes ; drag your window size to preview
  43.  
  44. TO DISABLE HEADER AUTO PAGE FILL SEARCH:
  45. Auto Fill
  46. and delete from AUTO FILL START to AUTO FILL END
  47.  
  48. TO ADD A CONTAINER BACKGROUND SEARCH
  49. .container
  50. And replace TRANSPARENT with a hex color code
  51.  
  52.  
  53. -->
  54.  
  55.  
  56. <!-- COLORS -->
  57. <meta name="color:Background" content="#ffffff" />
  58. <meta name="color:Text" content="#000000" />
  59.  
  60. <meta name="color:Blog Title Text" content="#ffffff" />
  61.  
  62. <meta name="color:Welcome Container" content="#ffffff" />
  63. <meta name="color:Welcome Text" content="#000000" />
  64. <meta name="color:Welcome Links" content="#000000" />
  65.  
  66. <meta name="color:Accent One" content="#2f4729" />
  67. <meta name="color:Accent Two" content="#686b5f" />
  68.  
  69. <meta name="color:Character Border" content="#ffffff" />
  70. <meta name="color:Character Info Background" content="#ffffff" />
  71. <meta name="color:Character Links" content="#ffffff" />
  72.  
  73.  
  74. <!-- IMAGES -->
  75. <meta name="image:Header" content="https://placehold.it/1500X1200"/>
  76.  
  77.  
  78.  
  79. <!-- TEXT -->
  80. <meta name="text:Blog Title" content="Blog Title"/>
  81. <meta name="text:Blog Title Background" content="255,255,255,0.4"/>
  82.  
  83.  
  84. <meta name="text:Container Background" content="transparent"/>
  85.  
  86.  
  87. <meta name="text:Link One" content="Link"/>
  88. <meta name="text:Link One URL" content="https://"/>
  89. <meta name="text:Link Two" content="Link"/>
  90. <meta name="text:Link Two URL" content="https://"/>
  91. <meta name="text:Link Three" content="Link"/>
  92. <meta name="text:Link Three URL" content="https://"/>
  93. <meta name="text:Link Four" content="Link"/>
  94. <meta name="text:Link Four URL" content="https://"/>
  95.  
  96.  
  97. <!-- IF -->
  98. <meta name="if:Invert Tumblr Controls" content="1"/>
  99. <meta name="if:Growing Header" content="1"/>
  100.  
  101.  
  102. <!-- SELECT -->
  103. <meta name="select:Blog Title Style" content="normal" title="Normal">
  104. <meta name="select:Blog Title Style" content="italic" title="Italic">
  105. <meta name="select:Character Name Style" content="normal" title="Normal">
  106. <meta name="select:Character Name Style" content="italic" title="Italic">
  107.  
  108.  
  109. <!-- SCRIPTS-->
  110. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  111.  
  112. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700|Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  113.  
  114. <!-- STYLESHEET-->
  115. <style type="text/css">
  116.  
  117. /* --- SCROLLBAR --- */
  118.  
  119. ::-webkit-scrollbar-thumb {background:{color:Accent One};border:4px solid {color:Background};}
  120.  
  121. ::-webkit-scrollbar {width:11px;border:5px solid {color:Background};border-right:5px solid {color:Background};background:{color:Background};}
  122.  
  123. /* --- CHARACTER CONTAINER SCROLLBAR --- */
  124.  
  125. .character_bio::-webkit-scrollbar-thumb {background:{color:Accent One};border:2px solid {color:Character Info Background};border-left:5px solid {color:Character Info Background};}
  126.  
  127. .character_bio::-webkit-scrollbar {width:10px;border:2px solid {color:Character Info Background};background:{color:Character Info Background};}
  128.  
  129. /* --- SELECTION ---*/
  130.  
  131. ::-moz-selection {color:{color:Background};background:{color:Accent One};opacity:1;}
  132.  
  133. ::selection {color{color:Background};background:{color:Accent One};opacity:1;}
  134.  
  135. /* --- TUMBLR TOOLS --- */
  136.  
  137. iframe.tmblr-iframe {
  138. position:fixed;
  139. z-index:10!important;
  140. top:3px!important;
  141. right:0px!important;
  142. opacity:0;
  143. padding-right:60px;
  144. transform:scale(0.5);
  145. transform-origin:100% 0;
  146. -webkit-transform:scale(0.5);
  147. -webkit-transform-origin:100% 0;
  148. -o-transform:scale(0.5);
  149. -o-transform-origin:100% 0;
  150. -moz-transform:scale(0.5);
  151. -moz-transform-origin:100% 0;
  152. -ms-transform:scale(0.5);
  153. -ms-transform-origin:100% 0;
  154. transition:.2s ease-in-out;
  155. -webkit-transition:.2s ease-in-out;
  156. -moz-transition:.2s ease-in-out;
  157. {block:IfInvertTumblrControls}
  158. filter:invert(1);
  159. -webkit-filter:invert(1);
  160. -o-filter:invert(1);
  161. -moz-filter:invert(1);
  162. -ms-filter:invert(1);
  163. {/block:IfInvertTumblrControls}
  164. }
  165.  
  166. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  167.  
  168. .tcontrols {
  169. position:fixed;
  170. top:10px;
  171. right:15px;
  172. z-index:9;
  173. transition:.2s ease-in-out;
  174. -webkit-transition:.2s ease-in-out;
  175. -moz-transition:.2s ease-in-out;
  176. }
  177.  
  178. .tcontrols {color:{color:Text};font-size:14px;}
  179.  
  180. /* --- BODY --- */
  181.  
  182. body {
  183. margin: 0px;
  184. padding: 0px;
  185. font-family: 'Karla', sans-serif;
  186. color:{color:Text};
  187. font-size:10pt;
  188. line-height:145%;
  189. font-weight:normal;
  190. word-wrap:normal;
  191. text-align:left;
  192. background-color:{color:Background};
  193. }
  194.  
  195. a {
  196. color:{color:Text};
  197. text-decoration:none;
  198. border:0;
  199. opacity:0.6;
  200. transition:0.2s ease-in-out;
  201. -webkit-transition:0.2s ease-in-out;
  202. -moz-transition:0.2s ease-in-out;
  203. }
  204.  
  205. a:hover {opacity:1.0;}
  206.  
  207. b,strong {font-weight:700;}
  208.  
  209. .et {position:fixed;color:{color:Text};right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc(10px - 0.5px);z-index:10;}
  210.  
  211. /* --- HEADER --- */
  212.  
  213. #header {
  214. position:fixed;
  215. top:0;
  216. left:0;
  217. margin-top:35px;
  218. width:100%;
  219. height:450px;
  220. background-image:url('{image:Header}');/* --- CHANGE HEADER HERE--- */
  221. background-position:top center;
  222. background-repeat:no-repeat;
  223. z-index:-2;
  224. }
  225.  
  226. #header, .header-scroll {transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;}
  227.  
  228. .header-scroll {width:100%!important;height:100%!important;}
  229.  
  230. .headertitle {
  231. position:fixed;
  232. top:230px;
  233. margin:0 auto;
  234. width:100%;
  235. text-align:center;
  236. z-index:-1;
  237. }
  238.  
  239. .title {
  240. display:inline-block;
  241. text-align:center;
  242. padding:20px 40px;
  243. color:{color:Blog Title Text};
  244. font-family: 'Playfair Display', serif;
  245. font-size:20pt;
  246. font-weight:700;
  247. font-style:{select:Blog Title Style};
  248. text-transform:lowercase;
  249. outline:1px solid rgba({text:Blog Title Background});
  250. outline-offset:10px;
  251. background:rgba({text:Blog Title Background});
  252. }
  253.  
  254. /* --- CONTAINER --- */
  255.  
  256. .container {
  257. margin:0 auto;
  258. width:calc(100% - 100px);
  259. min-width:740px;
  260. padding:20px;
  261. margin-top:440px;
  262. background:{text:Container Background};
  263. }
  264.  
  265. .block_top, .block_bottom {position:fixed;background:{color:Background};height:35px;width:100%;z-index:8;}
  266.  
  267. .block_top {top:0px;left:0px;}
  268.  
  269. .block_bottom {bottom:0px;left:0px;}
  270.  
  271.  
  272. /* --- SIDEBAR --- */
  273.  
  274. .sidebar {
  275. margin:0 auto;
  276. padding:30px 20px 20px 20px;
  277. width:700px;
  278. font-size:9.5pt;
  279. text-align:center;
  280. color:{color:Welcome Text};
  281. background:{color:Welcome Container};
  282. }
  283.  
  284. .navigation {text-align:center;margin:25px 0px 15px 0px;}
  285.  
  286. .navigation a {
  287. display:inline-block;
  288. color:{color:Welcome Links};
  289. margin:0px 18px;
  290. text-decoration:none;
  291. border-bottom:5px solid {color:Welcome Container};
  292. padding:0px 5px ;
  293. font-size:9.5pt;
  294. text-transform:lowercase;
  295. line-height:5pt;
  296. opacity:1;
  297. }
  298.  
  299. .navigation a:hover {border-bottom:5px solid {color:Accent Two};}
  300.  
  301. /* --- CHARACTERS --- */
  302.  
  303. .character_cont {margin:0 auto;min-width:700px;padding:50px 0px;text-align:center;}
  304.  
  305. .character {display:inline-block;width:350px;height:300px;margin:15px 11px;border:15px solid {color:Character Border};}
  306.  
  307. .character img {width:350px;height:300px;}
  308.  
  309. .character_info {
  310. position:absolute;
  311. margin-top:-285px;
  312. margin-left:15px;
  313. width:280px;
  314. height:230px;
  315. padding:20px;
  316. font-size:9pt;
  317. background:{color:Character Info Background};
  318. opacity:0;
  319. transition:0.2s ease-in-out;
  320. -webkit-transition:0.2s ease-in-out;
  321. -moz-transition:0.2s ease-in-out;
  322. }
  323.  
  324. .character:hover .character_info {opacity:1;}
  325.  
  326. .character_info h1 {
  327. margin:0px 0px 15px 0px;
  328. font-family: 'Playfair Display', serif;
  329. font-size:16pt;
  330. color:{color:Accent One};
  331. font-weight:700;
  332. font-style:{select:Character Name Style};
  333. text-transform:lowercase;
  334. }
  335.  
  336. .character_bio {
  337. width:260px;
  338. height:140px;
  339. padding:0px 10px;
  340. margin:14px 0px 0px 0px;
  341. overflow-x:hidden;
  342. overflow-y:scroll;
  343. }
  344.  
  345. .character_links {margin:0 auto;text-align:center;margin:5px 0px 0px 0px;padding:7px 0px 10px 0px;}
  346.  
  347. .character_links a {
  348. display:inline-block;
  349. color:{color:Character Links};
  350. margin:0px 8px;
  351. text-decoration:none;
  352. text-transform:lowercase;
  353. padding:1px 6px 0px 6px;
  354. font-size:9pt;
  355. background:{color:Accent Two};
  356. opacity:1;
  357. }
  358.  
  359. </style>
  360. <body>
  361.  
  362.  
  363.  
  364.  
  365. <!-- DO NOT EDIT -->
  366. <div class="tcontrols">+</div><div class="block_top"></div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
  367.  
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375.  
  376. <!-- START HEADER AND HEADER TITLE -->
  377. <div id="header"></div>
  378.  
  379.  
  380. <div class="headertitle">
  381. <div class="title">
  382. {text:Blog Title}
  383. </div>
  384. </div>
  385.  
  386. <!-- END HEADER AND HEADER TITLE -->
  387.  
  388.  
  389.  
  390.  
  391.  
  392.  
  393.  
  394.  
  395.  
  396. <!-- START CONTAINER -->
  397. <div class="container">
  398.  
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405. <!-- START SIDEBAR -->
  406. <div class="sidebar">
  407. <!--------------- START SIDEBAR BELOW --------------->
  408.  
  409. {Description}
  410.  
  411. <div class="navigation">
  412. <a href="/">home</a>
  413. <a href="/ask">contact</a>
  414. <a href="text:Link One URL">{text:Link One}</a>
  415. <a href="{text:Link Two URL}">{text:Link Two}</a>
  416. <a href="{text:Link Three URL}">{text:Link Three}</a>
  417. <a href="{text:Link Four URL}">{text:Link Four}</a>
  418. </div>
  419.  
  420. </div>
  421. <!-- END SIDEBAR -->
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431. <!----------------------------------------
  432.  
  433.  
  434. START CHARACTERS
  435.  
  436.  
  437. ----------------------------------------->
  438. <div class="character_cont">
  439.  
  440.  
  441.  
  442.  
  443.  
  444.  
  445. <!-----------------------------
  446.  
  447. CHARACTER START: COPY THIS SECTION TO ADD A NEW CHARACTER BLOCK
  448.  
  449. ------------------------------>
  450. <div class="character">
  451. <!-- Character Portrait --><img src="https://static.tumblr.com/zvesamf/eRuqaq5r4/character_1.jpg" />
  452.  
  453. <div class="character_info">
  454. <!-- Character Name ----><h1>Paul</h1>
  455. <!-- Personality ------->personality type ; age ; gender
  456.  
  457. <div class="character_bio">
  458. <!-- Character Bio ----->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.
  459. <p>
  460. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam. Nam id nisl vel enim efficitur egestas quis in metus. Donec cursus nibh in ultricies finibus. Ut et mi enim. Nullam fermentum bibendum justo, eu ultricies enim scelerisque porta. Nulla vitae nibh dignissim, tempus nisl nec, finibus diam. Mauris et luctus nisi, imperdiet consectetur enim. Suspendisse rutrum malesuada orci.
  461. </div>
  462.  
  463. <!-- Character Links Start -->
  464. <div class="character_links">
  465. <a href="#">Link</a>
  466. <a href="#">Link</a>
  467. <a href="#">Link</a>
  468. <a href="#">Link</a>
  469. </div>
  470. <!-- Character Links End -->
  471. </div>
  472. </div>
  473. <!-----------------------------
  474.  
  475. CHARACTER END
  476.  
  477. ------------------------------>
  478.  
  479.  
  480.  
  481.  
  482.  
  483.  
  484.  
  485.  
  486.  
  487. <!-----------------------------
  488.  
  489. CHARACTER START: COPY THIS SECTION TO ADD A NEW CHARACTER BLOCK
  490.  
  491. ------------------------------>
  492. <div class="character">
  493. <!-- Character Portrait --><img src="https://placehold.it/350X300" />
  494.  
  495. <div class="character_info">
  496. <!-- Character Name ----><h1>Character Name</h1>
  497. <!-- Personality ------->personality type ; age ; gender
  498.  
  499. <div class="character_bio">
  500. <!-- Character Bio ----->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.
  501. <p>
  502. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam. Nam id nisl vel enim efficitur egestas quis in metus. Donec cursus nibh in ultricies finibus. Ut et mi enim. Nullam fermentum bibendum justo, eu ultricies enim scelerisque porta. Nulla vitae nibh dignissim, tempus nisl nec, finibus diam. Mauris et luctus nisi, imperdiet consectetur enim. Suspendisse rutrum malesuada orci.
  503. </div>
  504.  
  505. <!-- Character Links Start -->
  506. <div class="character_links">
  507. <a href="#">Link</a>
  508. <a href="#">Link</a>
  509. <a href="#">Link</a>
  510. <a href="#">Link</a>
  511. </div>
  512. <!-- Character Links End -->
  513. </div>
  514. </div>
  515. <!-----------------------------
  516.  
  517. CHARACTER END
  518.  
  519. ------------------------------>
  520.  
  521.  
  522.  
  523.  
  524.  
  525.  
  526.  
  527.  
  528.  
  529. </div>
  530. <!-- END CHARACTERS -->
  531.  
  532. </div>
  533. <!-- END CONTAINER -->
  534.  
  535.  
  536.  
  537.  
  538.  
  539.  
  540.  
  541.  
  542. <!-- ADDITIONAL SCRIPTS -->
  543.  
  544. <!-- Auto Fill Start -->
  545. {block:IfGrowingHeader}
  546. <script>
  547. $(document).ready(function(){
  548. var scrollTop = 0;
  549. $(window).scroll(function(){
  550. scrollTop = $(window).scrollTop();
  551. $('.counter').html(scrollTop);
  552. if (scrollTop >= 5) {
  553. $('#header').addClass('header-scroll');
  554. } else if (scrollTop < 5) {
  555. $('#header').removeClass('header-scroll');
  556. }
  557. });
  558. });
  559. </script>
  560. {/block:IfGrowingHeader}
  561. <!-- Auto Fill End -->
  562.  
  563.  
  564. <script>
  565. $(window).scroll(function(){
  566. $(".headertitle").css("opacity", 1 - $(window).scrollTop() / 300);
  567. });
  568. </script>
  569.  
  570.  
  571. </body>
  572. </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!