API tools faq
paste
alydae

all-in-one: nepenthe

alydae
Jun 25th, 2017 (edited)
6,750
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ALL-IN-ONE: NEPENTHE
  7. by alydae
  8.  
  9. released: june 25, 2017
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. if you only want an individual page of a particular section, links to the codes of them are available on the theme post.
  17.  
  18. thank you for using!!!
  19.  
  20. -->
  21.  
  22. <title>explore</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <!-- custom font -->
  26.  
  27. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  28.  
  29. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  30. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  31. <link rel="stylesheet" href="https://static.tumblr.com/z8dfaik/0QOory6g1/nepenthe.css" type="text/css">
  32.  
  33. <style type="text/css">
  34.  
  35. /*-- selection --*/
  36.  
  37. ::-moz-selection { background:var(--accent); color:var(--title); }
  38. ::selection { background:var(--accent); color:var(--title); }
  39.  
  40. /*-- scrollbar --*/
  41.  
  42. ::-webkit-scrollbar {
  43. width:1px;
  44. height:2px;
  45. }
  46.  
  47. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  48.  
  49. /*-- tooltips --*/
  50.  
  51. #s-m-t-tooltip {
  52. color:var(--text);
  53. background-color:var(--background);
  54. font-size:calc(var(--font-size) - 2px);
  55. font-family:'Open Sans', helvetica, sans-serif;
  56. letter-spacing:1px;
  57. text-transform:uppercase;
  58. text-align:center;
  59. position:absolute;
  60. padding:0px 5px 0px 5px;
  61. margin-top:30px;
  62. border:1px solid var(--borders);
  63. z-index:9999;
  64. }
  65.  
  66. /*-- tumblr controls --*/
  67.  
  68. .tmblr-iframe, .iframe-controls–desktop {
  69. display:none!important;
  70. }
  71.  
  72. /*-- change all variables here --*/
  73.  
  74. :root {
  75. --background:#fff;
  76. --accent:#fafafa;
  77. --text:#666;
  78. --links:#444;
  79. --links-hover:#bad1e7;
  80. --title:#222;
  81. --borders:#eee;
  82. --font-size:10px;
  83. }
  84.  
  85. /*-- common --*/
  86.  
  87. #sidebar, div.tab button, .tabcontent, .facts h2, .blogs a, .media i, .question i, .q, .an, .tbox, .tags a, .blog {
  88. border:1px solid var(--borders)
  89. }
  90.  
  91. blockquote { border-left:1px solid var(--borders); }
  92. .t, #sidebar img, h1, .facts, .box { border-bottom:1px solid var(--borders); }
  93. .facts, .info { border-right:1px solid var(--borders); }
  94.  
  95. /*-- general customisation --*/
  96.  
  97. body {
  98. color:var(--text);
  99. background-color:var(--accent);
  100. font-family:'Open Sans', helvetica, sans-serif;
  101. font-size:var(--font-size);
  102. }
  103.  
  104. a { color:var(--links); }
  105. a:hover { color:var(--links-hover); }
  106.  
  107. b, strong { font-weight:700; var(--title); }
  108. h1 { color:var(--title); }
  109.  
  110. /*-- sidebar --*/
  111.  
  112. #sidebar { background:var(--background); }
  113.  
  114. /*-- tabs --*/
  115.  
  116. div.tab button { background:var(--background); }
  117.  
  118. div.tab button:hover {
  119. background-color:var(--accent); /* tabs hover background colour */
  120. color:var(--links-hover); /* tabs hover text colour */
  121. }
  122.  
  123. div.tab button.active {
  124. background-color:var(--accent); /* selected tab background colour */
  125. color:var(--links-hover); /* selected tab text colour */
  126. }
  127.  
  128.  
  129. /*-- ABOUT --*/
  130.  
  131. .about { background:var(--background);
  132.  
  133. h3 { color:var(--title); }
  134.  
  135. .facts h2 { background:var(--accent); }
  136.  
  137. .blogs a {
  138. background:var(--accent);
  139. white-space:nowrap;
  140. overflow:hidden;
  141. text-overflow:ellipsis;
  142. }
  143.  
  144. .blogs a:hover, .media i:hover { background:var(--background); }
  145.  
  146. .media i { background:var(--accent); }
  147.  
  148.  
  149. /*-- FAQ + MESSAGE --*/
  150.  
  151. .faq { background:var(--background); }
  152.  
  153. .question i {
  154. width:calc(var(--font-size) + 4px);
  155. text-align:center;
  156. font-size:calc(var(--font-size) + 4px);
  157. font-weight:700;
  158. padding:8px;
  159. margin-top:0px;
  160. float:left;
  161. background:var(--accent);
  162. }
  163.  
  164. .q { background:var(--accent); }
  165.  
  166.  
  167. /*-- TAGS --*/
  168.  
  169. .navigation { background:var(--background); }
  170.  
  171. .t { color:var(--title); }
  172.  
  173. .tbox {
  174. height:380px!important; /* if you don't want them to all be the same height, change this to height:auto; */
  175. width:33.1%!important;
  176. margin-top:-1px;
  177. margin-left:-1px;
  178. margin-bottom:-1px;
  179. }
  180.  
  181. .tbox:hover .t {
  182. color:var(--links-hover);
  183. background:var(--accent);
  184. }
  185.  
  186. .tags a {
  187. background:var(--accent);
  188. padding-right:5px;
  189. white-space:nowrap;
  190. overflow:hidden;
  191. text-overflow:ellipsis;
  192. }
  193.  
  194. .tags a:hover { background:var(--background); }
  195. .tags a:last-of-type { margin-bottom:0px!important; }
  196.  
  197.  
  198. /*-- BLOGROLL --*/
  199.  
  200. .blogroll { border:none; }
  201.  
  202. .blog {
  203. background:var(--background);
  204. width:calc(33.3% - 12px - 10px);
  205. padding-right:10px;
  206. white-space:nowrap;
  207. overflow:hidden;
  208. text-overflow:ellipsis;
  209. }
  210.  
  211. .blog:hover { background:var(--accent); }
  212.  
  213.  
  214. /*-- credit - DO NOT TOUCH --*/
  215.  
  216. .credit a {
  217. font-size:10px;
  218. bottom:15px;
  219. right:20px;
  220. position:fixed;
  221. text-transform:uppercase;
  222. }
  223.  
  224. </style>
  225. </head>
  226.  
  227.  
  228.  
  229. <body>
  230.  
  231.  
  232. <content>
  233.  
  234. <div id="sidebar">
  235. <h1>explore</h1><!-- page name -->
  236. <img src="{PortraitURL-128}"/>
  237. <!-- if you want to change the names of the tabs, change the word right before </button> -->
  238. <div class="tab">
  239. <button class="tablinks" onclick="openContent(event, 'about')" id="defaultOpen">about</button>
  240. <button class="tablinks" onclick="openContent(event, 'faq')">faq</button>
  241. <button class="tablinks" onclick="openContent(event, 'tags')">tags</button>
  242. <button class="tablinks" onclick="openContent(event, 'blogroll')">blogroll</button>
  243. </div>
  244. <div class="links">
  245. <!-- this is where your sidebar links are. feel free to add more. -->
  246. <a href="/">home</a>
  247. <a href="/ask">inbox</a>
  248. <a href="/">creations</a>
  249. <!-- do not remove this one!!! -->
  250. <a href="http://enchantedthemes.tumblr.com">credit</a>
  251. </div>
  252. </div>
  253.  
  254.  
  255. <div id="main">
  256.  
  257. <!---------------------------------------------------------------
  258. ABOUT
  259. ---------------------------------------------------------------->
  260.  
  261. <div id="about" class="tabcontent about">
  262.  
  263. <div class="facts">
  264. <!-- template: <div class="i"><h2>title</h2> info</div> -->
  265. <div class="i"><h2>title</h2> info</div>
  266. <div class="i"><h2>title</h2> info</div>
  267. <div class="i"><h2>title</h2> info</div>
  268. <div class="i"><h2>title</h2> info</div>
  269. <div class="i"><h2>title</h2> info</div>
  270. <div class="i"><h2>title</h2> info</div>
  271. </div><!-- end facts -->
  272.  
  273.  
  274. <div class="info">
  275. <!-- this is where your about text goes -->
  276.  
  277. this is where you put the body of your about. you can use <b>bold</b>, <i>italics</i>, <big>big</big>, <small>small</small>, <s>strikethroughs</s>, <a href="/">links</a> as well as
  278. <blockquote>blockquotes</blockquote>
  279.  
  280. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  281.  
  282. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac consequat odio, sagittis ultricies dolor. Praesent molestie et tortor eu rhoncus. Sed tristique, sapien eu posuere vulputate, metus nisl aliquam diam, id vulputate ipsum velit quis nisi. Sed nec eros risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a diam faucibus, tincidunt libero nec, tincidunt mauris. Maecenas semper in dui ac dapibus. Nunc et mollis diam, eget porttitor felis. Suspendisse interdum porta pretium. Nulla facilisi. Curabitur sagittis, massa id ultricies euismod, purus sapien pellentesque leo, quis ultricies mauris dolor et urna. Quisque malesuada ante nec vestibulum tempor. Quisque lobortis est ac finibus pretium. Maecenas quis hendrerit quam, bibendum finibus sem. Integer imperdiet odio eu elementum interdum.</p>
  283.  
  284. </div><!-- end about text -->
  285.  
  286.  
  287. <div class="box">
  288. <h3>blogs</h3>
  289. <div class="blogs">
  290. <!-- you can use this section for friends or your own personal blogs -->
  291. <a href="/">blog</a>
  292. <a href="/">blog</a>
  293. <a href="/">blog</a>
  294. <a href="/">blog</a>
  295. <a href="/">blog</a>
  296. <a href="/">blog</a>
  297. </div>
  298. </div><!-- end other blogs -->
  299.  
  300.  
  301. <div class="box" style="top:127px;">
  302. <div class="quote">
  303. "Lorem ipsum dolor sit amet" short quote here
  304. </div>
  305. </div><!-- end quote -->
  306.  
  307.  
  308. <div class="box" style="top:253px;">
  309. <h3>social media</h3>
  310. <div class="media">
  311. <!--
  312. between the "" is where you put a link to your account. to change the icon, go to https://fontawesome.com/icons. leave the 'fa-fw' there.
  313. replace the LINK in title="LINK" for what you want it to show on hover
  314.  
  315. template:
  316. <a href="" title="LINK">
  317. [ICON CODE]
  318. </a>
  319. -->
  320. <a href="" title="LINK">
  321. <i class="fab fa-twitter"></i>
  322. </a>
  323. <a href="" title="LINK">
  324. <i class="fab fa-instagram"></i>
  325. </a>
  326. <a href="" title="LINK">
  327. <i class="fab fa-snapchat-ghost"></i>
  328. </a>
  329. <a href="" title="LINK">
  330. <i class="fab fa-goodreads-g"></i>
  331. </a>
  332. <a href="" title="LINK">
  333. <i class="fab fa-pinterest-p"></i>
  334. </a>
  335. <a href="" title="LINK">
  336. <i class="fab fa-discord"></i>
  337. </a>
  338. </div>
  339. </div><!-- end social media -->
  340.  
  341. </div>
  342.  
  343. <!-- END ABOUT -->
  344.  
  345.  
  346. <!---------------------------------------------------------------
  347. FAQ + MESSAGE
  348. ---------------------------------------------------------------->
  349.  
  350. <div id="faq" class="tabcontent faq">
  351.  
  352. <!-- if you don't have any faqs and only want the ask box and the text, remove everything up to the ask box at the bottom.
  353.  
  354. template:
  355. <div class="question">
  356. <i class="fas fa-question"></i>
  357. <div class="q">question</div>
  358. <i class="far fa-comment" style="background:#fff;"></i>
  359. <div class="an">here's the answer</div>
  360. </div>
  361. -->
  362.  
  363. <div class="question">
  364. <i class="fas fa-question"></i>
  365. <div class="q">question</div>
  366. <i class="far fa-comment" style="background:#fff;"></i>
  367. <div class="an">here's the answer</div>
  368. </div>
  369.  
  370.  
  371. <div class="question">
  372. <i class="fas fa-question"></i>
  373. <div class="q">question</div>
  374. <i class="far fa-comment" style="background:#fff;"></i>
  375. <div class="an">here's the answer</div>
  376. </div>
  377.  
  378.  
  379. <div class="question">
  380. <i class="fas fa-question"></i>
  381. <div class="q">question</div>
  382. <i class="far fa-comment" style="background:#fff;"></i>
  383. <div class="an">here's the answer</div>
  384. </div>
  385.  
  386.  
  387. <div class="question">
  388. <i class="fas fa-question"></i>
  389. <div class="q">question</div>
  390. <i class="far fa-comment" style="background:#fff;"></i>
  391. <div class="an">here's the answer</div>
  392. </div>
  393.  
  394.  
  395. <!-- if you don't want the ask box, delete this section below -->
  396. <!-- optional text. delete this if you don't want any -->
  397. <p style="margin-left:15px;">If you have any more questions, feel free to message me!</p>
  398. <!-- end optional text -->
  399. <iframe frameborder="0" border="0" scrolling="no" width="530px" height="190" allowtransparency="true" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden; margin:15px;"></iframe>
  400. <!-- delete up to here -->
  401.  
  402. </div>
  403.  
  404. <!-- END FAQ + MESSAGE -->
  405.  
  406.  
  407. <!---------------------------------------------------------------
  408. TAGS
  409. ---------------------------------------------------------------->
  410.  
  411. <div id="tags" class="tabcontent navigation">
  412.  
  413. <!-- template:
  414.  
  415. <div class="box">
  416. <div class="t">subtitle</div>
  417. <div class="tags">
  418. <a href="/tagged/">tag name</a>
  419. <a href="/tagged/">tag name</a>
  420. <a href="/tagged/">tag name</a>
  421. <a href="/tagged/">tag name</a>
  422. <a href="/tagged/">tag name</a>
  423. <a href="/tagged/">tag name</a>
  424. <a href="/tagged/">tag name</a>
  425. </div>
  426. </div>
  427.  
  428. -->
  429.  
  430. <div class="tbox">
  431. <div class="t">subtitle</div>
  432. <div class="tags">
  433. <a href="/tagged/">tag name</a>
  434. <a href="/tagged/">tag name</a>
  435. <a href="/tagged/">tag name</a>
  436. <a href="/tagged/">tag name</a>
  437. <a href="/tagged/">tag name</a>
  438. <a href="/tagged/">tag name</a>
  439. <a href="/tagged/">tag name</a>
  440. <a href="/tagged/">tag name</a>
  441. <a href="/tagged/">tag name</a>
  442. <a href="/tagged/">tag name</a>
  443. <a href="/tagged/">tag name</a>
  444. <a href="/tagged/">tag name</a>
  445. <a href="/tagged/">tag name</a>
  446. <a href="/tagged/">tag name</a>
  447. </div><!-- end tags -->
  448. </div><!-- end box 1 -->
  449.  
  450.  
  451. <div class="tbox">
  452. <div class="t">subtitle</div>
  453. <div class="tags">
  454. <a href="/tagged/">tag name</a>
  455. <a href="/tagged/">tag name</a>
  456. <a href="/tagged/">tag name</a>
  457. <a href="/tagged/">tag name</a>
  458. <a href="/tagged/">tag name</a>
  459. <a href="/tagged/">tag name</a>
  460. </div><!-- end tags -->
  461. </div><!-- end box 2 -->
  462.  
  463.  
  464. <div class="tbox">
  465. <div class="t">subtitle</div>
  466. <div class="tags">
  467. <a href="/tagged/">tag name</a>
  468. <a href="/tagged/">tag name</a>
  469. <a href="/tagged/">tag name</a>
  470. <a href="/tagged/">tag name</a>
  471. <a href="/tagged/">tag name</a>
  472. </div><!-- end tags -->
  473. </div><!-- end box 3-->
  474.  
  475.  
  476. <div class="tbox">
  477. <div class="t">subtitle</div>
  478. <div class="tags">
  479. <a href="/tagged/">tag name</a>
  480. <a href="/tagged/">tag name</a>
  481. <a href="/tagged/">tag name</a>
  482. <a href="/tagged/">tag name</a>
  483. <a href="/tagged/">tag name</a>
  484. </div><!-- end tags -->
  485. </div><!-- end box 4 -->
  486.  
  487.  
  488. <div class="tbox">
  489. <div class="t">subtitle</div>
  490. <div class="tags">
  491. <a href="/tagged/">tag name</a>
  492. <a href="/tagged/">tag name</a>
  493. <a href="/tagged/">tag name</a>
  494. <a href="/tagged/">tag name</a>
  495. <a href="/tagged/">tag name</a>
  496. <a href="/tagged/">tag name</a>
  497. </div><!-- end tags -->
  498. </div><!-- end box 5 -->
  499.  
  500. </div>
  501.  
  502. <!-- END TAGS -->
  503.  
  504.  
  505. <!---------------------------------------------------------------
  506. BLOGROLL
  507. ---------------------------------------------------------------->
  508.  
  509. <div id="blogroll" class="tabcontent blogroll">
  510. {block:Following}{block:Followed}
  511. <div class="blog">
  512. <img src="{FollowedPortraitURL-128}">
  513. <a href="{FollowedURL}">{FollowedName}</a>
  514. </div>
  515. {/block:Followed}{/block:Following}
  516. </div>
  517.  
  518. <!-- END BLOGROLL -->
  519.  
  520.  
  521. </div> <!-- end main -->
  522.  
  523. </content>
  524.  
  525.  
  526. <!---------------------------------------------------------------
  527. DO NOT TOUCH BELOW
  528. ---------------------------------------------------------------->
  529.  
  530. <!-- credit - DO NOT TOUCH -->
  531.  
  532. <div class="credit">
  533. <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
  534. </div>
  535.  
  536.  
  537. <!-- scripts - DO NOT TOUCH -->
  538.  
  539. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  540.  
  541. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  542. <script>
  543. (function($){
  544. $(document).ready(function(){
  545. $("[title]").style_my_tooltips({
  546. tip_follows_cursor:true,
  547. tip_delay_time:200,
  548. tip_fade_speed:300
  549. }
  550. );
  551. });
  552. })(jQuery);
  553. </script>
  554.  
  555. <script>
  556. function openContent(evt, contentName) {
  557. var i, tabcontent, tablinks;
  558. tabcontent = document.getElementsByClassName("tabcontent");
  559. for (i = 0; i < tabcontent.length; i++) {
  560. tabcontent[i].style.display = "none";
  561. }
  562. tablinks = document.getElementsByClassName("tablinks");
  563. for (i = 0; i < tablinks.length; i++) {
  564. tablinks[i].className = tablinks[i].className.replace(" active", "");
  565. }
  566. document.getElementById(contentName).style.display = "block";
  567. evt.currentTarget.className += " active";
  568. }
  569. document.getElementById("defaultOpen").click();
  570. </script>
  571.  
  572.  
  573. </body>
  574. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!