API tools faq
paste
alydae

tags iv

alydae
Dec 30th, 2017 (edited)
16,694
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS IV
  7. by alydae
  8.  
  9. released: december 30, 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. please read the customisation guide to edit this page!
  17. http://enchantedthemes.tumblr.com/tags4/editing
  18.  
  19. thank you for using!!!
  20.  
  21. -->
  22.  
  23. <title>navigation</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!-- scripts - DO NOT TOUCH -->
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29.  
  30. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:200,
  37. tip_fade_speed:300
  38. }
  39. );
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <!-- custom font -->
  45.  
  46. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  47.  
  48. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  49. <link rel="stylesheet" href="https://static.tumblr.com/p0knose/GQToiq7ub/outicons.css" type="text/css">
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54. @keyframes fadein {
  55. from { opacity:0; }
  56. to { opacity:1; }
  57. }
  58.  
  59. @-moz-keyframes fadein {
  60. from { opacity:0; }
  61. to { opacity:1; }
  62. }
  63.  
  64. @-webkit-keyframes fadein {
  65. from { opacity:0; }
  66. to { opacity:1; }
  67. }
  68.  
  69. @-ms-keyframes fadein {
  70. from { opacity:0; }
  71. to { opacity:1; }
  72. }
  73.  
  74. @-o-keyframes fadein {
  75. from { opacity:0; }
  76. to { opacity:1; }
  77. }
  78.  
  79. /*-- selection --*/
  80.  
  81. ::-moz-selection { background:var(--accent); color:var(--title); }
  82. ::selection { background:var(--accent); color:var(--title); }
  83.  
  84. /*-- scrollbar --*/
  85.  
  86. ::-webkit-scrollbar {
  87. width:1px;
  88. height:2px;
  89. }
  90.  
  91. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  92.  
  93. /*-- tooltips --*/
  94.  
  95. #s-m-t-tooltip {
  96. color:var(--text);
  97. background-color:var(--accent);
  98. font-size:calc(var(--font-size) - 2px);
  99. font-family:'Open Sans', helvetica, sans-serif;
  100. letter-spacing:1px;
  101. text-transform:uppercase;
  102. text-align:center;
  103. position:absolute;
  104. padding:0px 5px 0px 5px;
  105. margin-top:30px;
  106. border:1px solid var(--borders);
  107. z-index:9999;
  108. }
  109.  
  110. /*-- tumblr controls --*/
  111.  
  112. .tmblr-iframe, .iframe-controls–desktop {
  113. display:none!important;
  114. }
  115.  
  116. /*-- hover animation --*/
  117.  
  118. a, a:hover, .tags h1 i, .tags:hover h1 i, ul, ul li {
  119. transition-duration: 0.3s;
  120. -moz-transition-duration: 0.3s;
  121. -webkit-transition-duration: 0.3s;
  122. -o-transition-duration: 0.3s;
  123. }
  124.  
  125. /*-- change all variables here --*/
  126.  
  127. :root {
  128. --background:#fff;
  129. --accent:#fafafa;
  130. --text:#666;
  131. --links:#444;
  132. --links-hover:#bad1e7;
  133. --title:#222;
  134. --borders:#eee;
  135. --font-size:10px;
  136. }
  137.  
  138. /*-- general customisation --*/
  139.  
  140. body {
  141. color:var(--text);
  142. background-color:var(--background);
  143. font-style:normal;
  144. font-family:'Open Sans', helvetica, sans-serif;
  145. font-size:var(--font-size);
  146. font-weight:400;
  147. text-decoration:none;
  148. line-height:180%;
  149. -moz-osx-font-smoothing: grayscale;
  150. -webkit-font-smoothing: antialiased;
  151. font-smoothing: antialiased;
  152. -webkit-animation: fadein 1.5s;
  153. -moz-animation: fadein 1.5s;
  154. -o-animation: fadein 1.5s;
  155. animation: fadein 1.5s;
  156. }
  157.  
  158. a { text-decoration:none; color:var(--links); }
  159. a:hover, .tags:hover h1 i { color:var(--links-hover); cursor:pointer; }
  160.  
  161. b, strong { font-weight:600; color:var(--title); }
  162. i, em { font-style:italic; }
  163.  
  164. /*-- sidebar --*/
  165.  
  166. sidebar {
  167. position:fixed;
  168. top:20px;
  169. left:20px;
  170. width:150px;
  171. }
  172.  
  173. #icon {
  174. float:left;
  175. height:25px;
  176. width:25px;
  177. margin-right:10px;
  178. margin-bottom:10px;
  179. }
  180.  
  181. #icon img { height:25px; width:25px; }
  182.  
  183. #title {
  184. font-size:calc(var(--font-size) + 4px);
  185. font-weight:700;
  186. text-transform:uppercase;
  187. letter-spacing:1px;
  188. color:var(--title);
  189. line-height:25px;
  190. margin-bottom:10px;
  191. }
  192.  
  193. #links { padding-bottom:5px; }
  194. #links a { display:inline; font-style:italic; margin-right:7px; }
  195. #links, .tags h1, .tags a { border-bottom:1px solid var(--borders); }
  196.  
  197. #desc { padding-top:5px; }
  198.  
  199. .sb { max-width:100px; z-index:9999!important; }
  200.  
  201. .sb .search .query {
  202. border:0;
  203. outline:0;
  204. margin-top:10px;
  205. padding:0px;
  206. font-family:inherit;
  207. font-size:inherit;
  208. font-style:italic;
  209. color:inherit;
  210. background-color:transparent;
  211. }
  212.  
  213. ::-webkit-input-placeholder { color:inherit; }
  214. :-moz-placeholder { color:inherit; opacity:1; }
  215. ::-moz-placeholder { color:inherit; opacity:1; }
  216. :-ms-input-placeholder { color:inherit; }
  217. input:focus::-webkit-input-placeholder { color:transparent; }
  218. input:focus:-moz-placeholder { color:transparent; }
  219. input:focus::-moz-placeholder { color:transparent; }
  220. input:focus:-ms-input-placeholder { color:transparent; }
  221.  
  222. /*-- tags body --*/
  223.  
  224. main {
  225. margin:100px auto;
  226. width:calc(4 * (150px + 20px));
  227. /* (number of tags per row * (width of the tag + 2*padding)) */
  228. }
  229.  
  230. .tags {
  231. width:100%;
  232. padding:0;
  233. float:left;
  234. margin-bottom:50px;
  235. }
  236.  
  237. .tags:last-of-type { margin-bottom:100px; }
  238.  
  239. .tags h1 {
  240. margin:0;
  241. line-height:30px;
  242. font-size:calc(var(--font-size) + 2px);
  243. font-weight:700;
  244. text-transform:uppercase;
  245. letter-spacing:0.5px;
  246. color:var(--title);
  247. }
  248.  
  249. .tags h1 i {
  250. padding:9px;
  251. margin-right:9px;
  252. background:var(--accent);
  253. border-top:1px solid var(--borders);
  254. border-left:1px solid var(--borders);
  255. border-right:1px solid var(--borders);
  256. }
  257.  
  258. .tags:hover h1 i { background:var(--background); }
  259.  
  260. .tags a {
  261. position:relative;
  262. display:inline-block;
  263. text-transform:lowercase;
  264. width:150px!important;
  265. padding:10px;
  266. margin-bottom:0px;
  267. margin-right:-3px;
  268. line-height:100%;
  269. float:left;
  270. border-right:1px solid transparent;
  271. }
  272.  
  273. .tags a:hover { background:var(--accent); }
  274.  
  275. ul li {
  276. display:inline-block;
  277. position:relative;
  278. float:left;
  279. border-right:1px solid transparent;
  280. }
  281.  
  282. ul {
  283. z-index:999;
  284. list-style:none;
  285. padding:0;
  286. margin:0;
  287. line-height:89%;
  288. background:var(--accent);
  289. box-shadow:10px 10px 20px var(--borders);
  290. }
  291.  
  292. ul a:hover { background:var(--background)!important; }
  293.  
  294. ul i { margin-right:5px; }
  295.  
  296. li ul { display:none; }
  297. ul li a { display:block; }
  298.  
  299. li:hover > ul { display:block; position:absolute; }
  300. li:hover li { float:none; }
  301.  
  302. .sub { text-transform:uppercase!important; font-style:italic; }
  303. .sub:before { content:'>'; margin-right:7px; }
  304.  
  305. .more {
  306. max-height:calc(7 * 31px); /* if your levelled tags are too long, this will make it scroll. 7 is the number of tags you want to show before scrolling down. */
  307. overflow-Y:scroll;
  308. overflow-X:hidden;
  309. }
  310.  
  311. .more li:last-of-type { margin-bottom:-5px!important; }
  312.  
  313. ul ul { left:0; top:31px; }
  314. ul ul ul { left:170px; top:0; }
  315.  
  316. /*-- credit - DO NOT TOUCH --*/
  317.  
  318. .credit a {
  319. font-size:10px;
  320. bottom:15px;
  321. right:20px;
  322. position:fixed;
  323. text-transform:uppercase;
  324. }
  325.  
  326. </style>
  327. </head>
  328.  
  329.  
  330.  
  331. <body>
  332.  
  333. <sidebar>
  334. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want -->
  335. <div id="icon"><img src="{PortraitURL-128}"/></div>
  336. <div id="title">navigation</div> <!-- title -->
  337. <div id="links">
  338. <!-- feel free to add more! -->
  339. <a href="/">index</a>
  340. <a href="/ask">ask</a>
  341. <a href="/">link</a>
  342. <a href="/archive">archive</a>
  343. </div>
  344. <!-- description and search bar are optional. if you don't want it, just delete the section below -->
  345. <div id="desc">you can have an optional description here.
  346. <div class="sb">
  347. <form class="search" action="javascript:return false">
  348. <input type="text" class="query" placeholder="search tagged posts...">
  349. </form>
  350. </div>
  351. </div>
  352. <!-- up to here -->
  353. </sidebar>
  354.  
  355.  
  356. <main>
  357.  
  358. <!-- INSTRUCTIONS ON CUSTOMISATION
  359.  
  360. as this page has three levels of tags and may get confusing, there's a separate page to explain how to edit it at
  361. http://enchantedthemes.tumblr.com/tags4/editing
  362.  
  363. however, the templates that are needed for new sections have been included below.
  364.  
  365. TEMPLATE FOR NEW TAG SECTIONS:
  366.  
  367. <div class="tags">
  368. <h1><i class="fa fa-star" aria-hidden="true"></i> section title</h1>
  369.  
  370. <a href="/tagged/">tag</a>
  371. <a href="/tagged/">tag</a>
  372. <a href="/tagged/">tag</a>
  373.  
  374. </div>
  375.  
  376. TEMPLATE FOR FIRST-LEVEL SUBTAGS (this goes inside the main tag sections):
  377.  
  378. <ul>
  379. <li><a><i class="fa fa-angle-down" aria-hidden="true"></i>tag</a>
  380. <ul>
  381. <li><a href="/tagged/">first-level subtag</a></li>
  382. <li><a href="/tagged/">first-level subtag</a></li>
  383. <li><a href="/tagged/">first-level subtag</a></li>
  384. </ul>
  385. </li>
  386. </ul>
  387.  
  388. TEMPLATE FOR SECOND-LEVEL SUBTAGS (this goes inside first-level subtags):
  389.  
  390. <li><a class="sub">subtag with second-level</a>
  391. <ul>
  392. <li><a href="/tagged/">second-level subtag</a></li>
  393. <li><a href="/tagged/">second-level subtag</a></li>
  394. <li><a href="/tagged/">second-level subtag</a></li>
  395. </ul>
  396. </li>
  397.  
  398. -->
  399.  
  400. <!-- tag section one -->
  401. <div class="tags">
  402. <h1><i class="fa fa-star" aria-hidden="true"></i> section title</h1>
  403.  
  404. <ul>
  405. <li><a><i class="fa fa-angle-down" aria-hidden="true"></i>tag</a>
  406. <ul>
  407. <li><a href="/tagged/">first-level subtag</a></li>
  408. <li><a href="/tagged/">first-level subtag</a></li>
  409. <li><a href="/tagged/">first-level subtag</a></li>
  410. <li><a class="sub">subtag with second-level</a>
  411. <ul>
  412. <li><a href="/tagged/">second-level subtag</a></li>
  413. <li><a href="/tagged/">second-level subtag</a></li>
  414. <li><a href="/tagged/">second-level subtag</a></li>
  415. </ul>
  416. </li>
  417. </ul>
  418. </li>
  419. </ul>
  420.  
  421. <a href="/tagged/">tag</a>
  422. <a href="/tagged/">tag</a>
  423. <a href="/tagged/">tag</a>
  424.  
  425. </div>
  426. <!-- tag section one end -->
  427.  
  428.  
  429. <!-- tag section two -->
  430. <div class="tags">
  431. <h1><i class="fa fa-star" aria-hidden="true"></i> section title</h1>
  432.  
  433. <ul>
  434. <li><a><i class="fa fa-angle-down" aria-hidden="true"></i>tag</a>
  435. <ul>
  436. <li><a href="/tagged/">first-level subtag</a></li>
  437. <li><a href="/tagged/">first-level subtag</a></li>
  438. <li><a href="/tagged/">first-level subtag</a></li>
  439. </ul>
  440. </li>
  441. </ul>
  442.  
  443. <a href="/tagged/">tag</a>
  444. <a href="/tagged/">tag</a>
  445. <a href="/tagged/">tag</a>
  446.  
  447. </div>
  448. <!-- tag section two end -->
  449.  
  450.  
  451. <!-- tag section three -->
  452. <div class="tags">
  453. <h1><i class="fa fa-star" aria-hidden="true"></i> section title</h1>
  454.  
  455. <a href="/tagged/">tag</a>
  456. <a href="/tagged/">tag</a>
  457. <a href="/tagged/">tag</a>
  458. <a href="/tagged/">tag</a>
  459.  
  460. </div>
  461. <!-- tag section three end -->
  462.  
  463.  
  464. </main>
  465.  
  466.  
  467. <!-- credit - DO NOT TOUCH -->
  468.  
  469. <div class="credit">
  470. <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
  471. </div>
  472.  
  473. <script>
  474. $(document).ready(function(){
  475. $('.search').submit(function(event){
  476. var value = $('input:first').val();
  477. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  478. });
  479. });
  480. </script>
  481.  
  482. </body>
  483. </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!