API tools faq
paste
alydae

tags ii

alydae
Sep 24th, 2016 (edited)
20,176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS II
  7. by alydae
  8.  
  9. released: september 26, 2016
  10. last updated: september 10, 2023
  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. - tabs tutorial by @phoenixthemes
  16.  
  17. thank you for using!!!
  18.  
  19. -->
  20.  
  21. <title>navigation</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <!-- scripts - DO NOT TOUCH -->
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27.  
  28. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:200,
  35. tip_fade_speed:300
  36. }
  37. );
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <!-- custom font -->
  43.  
  44. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  45.  
  46.  
  47. <style type="text/css">
  48.  
  49. @keyframes fadein {
  50. from { opacity:0; }
  51. to { opacity:1; }
  52. }
  53.  
  54. @-moz-keyframes fadein {
  55. from { opacity:0; }
  56. to { opacity:1; }
  57. }
  58.  
  59. @-webkit-keyframes fadein {
  60. from { opacity:0; }
  61. to { opacity:1; }
  62. }
  63.  
  64. @-ms-keyframes fadein {
  65. from { opacity:0; }
  66. to { opacity:1; }
  67. }
  68.  
  69. @-o-keyframes fadein {
  70. from { opacity:0; }
  71. to { opacity:1; }
  72. }
  73.  
  74. /*-- selection --*/
  75.  
  76. ::-moz-selection { background:var(--accent); color:var(--title); }
  77. ::selection { background:var(--accent); color:var(--title); }
  78.  
  79. /*-- scrollbar --*/
  80.  
  81. ::-webkit-scrollbar {
  82. width:1px;
  83. height:2px;
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  87.  
  88. /*-- tooltips --*/
  89.  
  90. #s-m-t-tooltip {
  91. color:var(--text);
  92. background-color:var(--background);
  93. font-size:calc(var(--font-size) - 2px);
  94. font-family:'Open Sans', helvetica, sans-serif;
  95. letter-spacing:1px;
  96. text-transform:uppercase;
  97. text-align:center;
  98. position:absolute;
  99. padding:0px 5px 0px 5px;
  100. border:1px solid var(--borders);
  101. margin-top:30px;
  102. z-index:9999;
  103. }
  104.  
  105. /*-- tumblr controls --*/
  106.  
  107. .tmblr-iframe, .iframe-controls–desktop {
  108. display:none!important;
  109. }
  110.  
  111. /*-- change all variables here --*/
  112.  
  113. :root {
  114. --background:#fff;
  115. --accent:#fafafa;
  116. --text:#666;
  117. --links:#444;
  118. --links-hover:#bad1e7;
  119. --title:#222;
  120. --borders:#eee;
  121. --font-size:10px;
  122. }
  123.  
  124. /*-- general customisation --*/
  125.  
  126. body {
  127. color:var(--text);
  128. background-color:var(--accent);
  129. font-style:normal;
  130. font-family:'Open Sans', helvetica, sans-serif;
  131. font-size:var(--font-size);
  132. font-weight:400;
  133. text-decoration:none;
  134. line-height:180%;
  135. -moz-osx-font-smoothing: grayscale;
  136. -webkit-font-smoothing: antialiased;
  137. font-smoothing: antialiased;
  138. -webkit-animation: fadein 1.5s;
  139. -moz-animation: fadein 1.5s;
  140. -o-animation: fadein 1.5s;
  141. animation: fadein 1.5s;
  142. }
  143.  
  144. a {
  145. text-decoration:none;
  146. color:var(--links);
  147. transition-duration: 0.6s;
  148. -moz-transition-duration: 0.6s;
  149. -webkit-transition-duration: 0.6s;
  150. -o-transition-duration: 0.6s
  151. }
  152.  
  153. a:hover, .tab label:hover {
  154. color:var(--links-hover);
  155. cursor:pointer;
  156. transition-duration: 0.6s;
  157. -moz-transition-duration: 0.6s;
  158. -webkit-transition-duration: 0.6s;
  159. -o-transition-duration: 0.6s
  160. }
  161.  
  162. b, strong { font-weight:700; color:var(--title); }
  163. i, em { font-style:italic; }
  164.  
  165. /*-- header --*/
  166.  
  167. #header {
  168. position:relative;
  169. margin:100px auto 75px auto;
  170. padding:10px 0 10px 0;
  171. width:330px;
  172. }
  173.  
  174. .icon {
  175. top:50%;
  176. transform:translateY(-46%);
  177. position:absolute;
  178. }
  179.  
  180. .icon img {
  181. height:50px;
  182. width:50px;
  183. border-radius:100%;
  184. }
  185.  
  186. .title {
  187. position:relative;
  188. margin-left:80px;
  189. text-transform:uppercase;
  190. font-size:calc(var(--font-size) + 4px);
  191. font-weight:700;
  192. letter-spacing:1px;
  193. color:var(--title);
  194. }
  195.  
  196. .desc {
  197. margin:15px 0px 15px 80px;
  198. width:230px;
  199. padding:10px;
  200. background-color:var(--background);
  201. border:1px solid var(--borders);
  202. }
  203.  
  204. .links { margin:5px 0px 0px 80px; }
  205.  
  206. .links a {
  207. margin-right:10px;
  208. letter-spacing:0.5px;
  209. text-transform:uppercase;
  210. }
  211.  
  212. /*-- tags --*/
  213.  
  214. .content {
  215. position:relative;
  216. margin:0px auto;
  217. width:785px;
  218. }
  219.  
  220. .tab label {
  221. width:150px;
  222. padding:20px 25px 20px 20px;
  223. background-color:var(--background);
  224. border-left:1px solid var(--borders);
  225. border-bottom:1px solid var(--borders);
  226. font-size:calc(var(--font-size) + 1px);
  227. font-weight:600;
  228. letter-spacing:0.5px;
  229. text-align:right;
  230. text-transform:uppercase;
  231. display:block;
  232. cursor:pointer;
  233. color:var(--title);
  234. transition-duration: 0.6s;
  235. -moz-transition-duration: 0.6s;
  236. -webkit-transition-duration: 0.6s;
  237. -o-transition-duration: 0.6s
  238. }
  239.  
  240. .tab label:first-of-type { border-top:1px solid var(--borders); }
  241.  
  242. .tags {
  243. position:absolute;
  244. width:550px;
  245. height:260px;
  246. /* if you want the height of the tab labels to match the height of the main tag body, replace height:300px; with the line below
  247. height:calc((58px * 5) - 26px);
  248. change the 5 according to how many tabs you have. this only works if your tab labels are one line. */
  249. top:0px;
  250. margin:0px 0px 100px 195px;
  251. padding:15px;
  252. padding-left:25px;
  253. overflow-y:scroll;
  254. border:1px solid var(--borders);
  255. background-color:var(--background); /* tags section background colour */
  256. }
  257.  
  258. .tags a:before { content:'#'; padding-right:5px; }
  259.  
  260. .tags a {
  261. width:calc(501px / 3); /* change the 3 for the number of columns */
  262. display:inline-block;
  263. padding:5px 10px 5px 0px;
  264. text-transform:lowercase;
  265. white-space:nowrap;
  266. overflow:hidden;
  267. text-overflow:ellipsis;
  268. }
  269.  
  270. .tags h8 {
  271. color:var(--title);
  272. font-size:calc(var(--font-size) + 0.5px);
  273. font-weight:600;
  274. letter-spacing:0.5px;
  275. text-transform:uppercase;
  276. display:block;
  277. margin-top:20px;
  278. margin-bottom:5px;
  279. }
  280.  
  281. [type=radio]:checked ~ label {
  282. z-index:2;
  283. color:var(--links-hover);
  284. background-color:var(--accent);
  285. }
  286.  
  287. [type=radio]:checked ~ label ~ .tags { z-index:1; }
  288.  
  289. .tab [type=radio] { display:none; }
  290.  
  291. /*-- credit - DO NOT TOUCH --*/
  292.  
  293. .credit a {
  294. font-size:10px;
  295. bottom:15px;
  296. right:20px;
  297. position:fixed;
  298. text-transform:uppercase;
  299. }
  300.  
  301. </style>
  302. </head>
  303.  
  304.  
  305. <body>
  306.  
  307.  
  308. <div id="header">
  309. <!-- 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. -->
  310. <div class="icon"><img src="{PortraitURL-128}"/></div>
  311. <div class="title">navigation</div> <!-- title -->
  312. <div class="desc"> <!-- optional description -->
  313. this is where a short optional description can go. there is no limit but I suggest keeping it short. if you don't want it, you can delete it.
  314. </div>
  315. <div class="links">
  316. <!-- this is where your header links are. feel free to add more. -->
  317. <a href="/">home</a>
  318. <a href="/ask">inbox</a>
  319. <a href="/">link</a>
  320. <!-- do not remove this one!!! -->
  321. <a href="https://enchantedthemes.tumblr.com">credit</a>
  322. </div>
  323. </div>
  324.  
  325.  
  326. <div class="content">
  327.  
  328. <!-- INSTRUCTIONS ON ADDING MORE TABS
  329.  
  330. 1. copy the template below
  331.  
  332. <div class="tab">
  333. <input type="radio" id="tab-1" name="tab-group-1">
  334. <label for="tab-1">tab title</label>
  335. <div class="tags">
  336. <a href="/tagged/">tag name</a>
  337. <h8>optional subtitle</h8>
  338. <a href="/tagged/">tag name</a>
  339. </div>
  340. </div>
  341.  
  342. 2. once you have done that, you need to change the number after the tab in id="tab-1" and label for="tab-1" - so if you were copying your third tab, it would be id="tab-3" and label for="tab-3".
  343. DO NOT TOUCH THE name="tab-group-1".
  344.  
  345. -->
  346.  
  347. <div class="tab">
  348. <input type="radio" id="tab-1" name="tab-group-1" checked>
  349. <label for="tab-1">tab title</label>
  350. <div class="tags">
  351. <a href="/tagged/">tag name</a>
  352. <a href="/tagged/">tag name</a>
  353. <a href="/tagged/">tag name</a>
  354. <a href="/tagged/">tag name</a>
  355. <h8>optional subtitle</h8>
  356. <a href="/tagged/">tag name</a>
  357. </div>
  358. </div>
  359.  
  360. <div class="tab">
  361. <input type="radio" id="tab-2" name="tab-group-1">
  362. <label for="tab-2">tab title</label>
  363. <div class="tags">
  364. <a href="/tagged/">tag name</a>
  365. <a href="/tagged/">tag name</a>
  366. <a href="/tagged/">tag name</a>
  367. <a href="/tagged/">tag name</a>
  368. <h8>optional subtitle</h8>
  369. <a href="/tagged/">tag name</a>
  370. </div>
  371. </div>
  372.  
  373. <div class="tab">
  374. <input type="radio" id="tab-3" name="tab-group-1">
  375. <label for="tab-3">tab title</label>
  376. <div class="tags">
  377. <a href="/tagged/">tag name</a>
  378. <a href="/tagged/">tag name</a>
  379. <a href="/tagged/">tag name</a>
  380. <a href="/tagged/">tag name</a>
  381. <h8>optional subtitle</h8>
  382. <a href="/tagged/">tag name</a>
  383. </div>
  384. </div>
  385.  
  386.  
  387. </div>
  388.  
  389.  
  390. <!-- credit - DO NOT TOUCH -->
  391.  
  392. <div class="credit">
  393. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  394. </div>
  395.  
  396.  
  397. </body>
  398. </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!