API tools faq
paste
Advertisement
wcrmtails

Navigation/Tags Page 01

wcrmtails
Oct 1st, 2018 (edited)
1,755
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-----page by arithemes/darthvcder
  7.  
  8. CREDITS
  9.  
  10. icons by themehive
  11. filter tutorial by cyantists
  12.  
  13. ----->
  14.  
  15. <head>
  16.  
  17.  
  18.  
  19. <title>navigation</title> <!-----change the title on the tab here----->
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  24. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  28. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  29.  
  30. <script>$(document).ready(function(){
  31. var $grid = $(".container"); $grid.imagesLoaded(function() {
  32. $grid.masonry({
  33. itemSelector: ".group",
  34. columnWidth: 100
  35. });
  36. });
  37. $(".button").click(function(){
  38. $(this).addClass("selected");
  39. $(".button").not($(this)).removeClass("selected");
  40. var ssf = $(this).attr("filter");
  41. $(".group." + ssf).show();
  42. $(".group").not("." + ssf).hide();
  43. $grid.masonry();
  44. });
  45. });</script>
  46.  
  47.  
  48. <style type="text/css">
  49.  
  50.  
  51. ::-webkit-scrollbar-thumb {
  52. background-color: #eeeeee; /*change the scrollbar*/
  53. height:auto;
  54. border-bottom:none;
  55. }
  56. ::-webkit-scrollbar {
  57. height:9px;
  58. width:5px;
  59. background-color: transparent;
  60.  
  61. }
  62.  
  63. ::selection {
  64. background-color: #e3394d; /*selection bg*/
  65. color: #fcfcfc; /*selection text*/
  66. }
  67.  
  68. body {
  69. background-color: #fcfcfc; /*background color*/
  70. background-image: url(/); /*background image url if you want one*/
  71. background-repeat: repeat;
  72. font-family: 'Karla', sans-serif;
  73. line-height: 110%;
  74. font-size: 11px;
  75. color: #9c9c9c; /*tag/categories color*/
  76. }
  77.  
  78.  
  79. #sidebar {
  80. width: 170px;
  81. height: 100%;
  82. margin-left: 0px;
  83. background: linear-gradient(#e36f39, #e3394d);
  84. /*sidebar background gradient colors. to make it solid, delete the above line and replace it with:
  85.  
  86. background-color: #e36f39;
  87. */
  88. padding: 20px;
  89. margin-top: -30px;
  90. position: fixed;
  91. }
  92.  
  93. #title {
  94. font-size: 15px;
  95. color: #fff; /*page title color*/
  96. text-transform: uppercase;
  97. letter-spacing: 5px;
  98. font-weight: bold;
  99. margin-top: 300px;
  100. }
  101.  
  102. #nav {
  103. font-size: 13px;
  104. margin-top: 10px;
  105. }
  106.  
  107. #nav a {
  108. height: relative;
  109. color: #fcfcfc; /*home/ask/archive links color*/
  110. padding-right: 2px;
  111. padding-left: 2px;
  112. letter-spacing: 1px;
  113. text-decoration: none;
  114. }
  115.  
  116. #nav a:hover {
  117. color: #4c4c4c; /*home/ask/archive links hover color*/
  118. }
  119.  
  120. .button{
  121. color: #fcfcfc; /*filter text color*/
  122. cursor: help;
  123. font-size: 12px;
  124. display: block;
  125. margin-top: 10px;
  126. letter-spacing: 1px;
  127. }
  128.  
  129. .button.selected {
  130. color: #fcfcfc; /*selected filter color*/
  131. text-decoration: underline;
  132. }
  133.  
  134. .container {
  135. width: 900px;
  136. height: auto;
  137. margin-left: 260px;
  138. margin-bottom: 20px;
  139. margin-top: 30px;
  140. }
  141.  
  142. .group {
  143. width: 200px;
  144. height: relative;
  145. background-color: white; /*tag group bg color*/
  146. padding: 10px;
  147. border: 1px solid #eeeeee; /*tag group border color*/
  148. border-radius: 5px;
  149. margin-top: 20px;
  150. margin-left: 20px;
  151. }
  152.  
  153.  
  154.  
  155. .title {
  156. font-size: 15px;
  157. display: inline-block;
  158. padding: 6px;
  159. font-weight: bold;
  160. border-bottom: 1px solid #eee; /*tag group title border*/
  161. background: -webkit-linear-gradient(#e36f39, #e3394d);
  162. -webkit-background-clip: text;
  163. -webkit-text-fill-color: transparent;
  164.  
  165. /*tag group title gradient. to just have it a solid color, delete the three lines above this comment & replace them with:
  166.  
  167. color: #e3394d;
  168.  
  169. */
  170. }
  171.  
  172.  
  173.  
  174. .tags a {
  175. color: #9c9c9c;
  176. background-color: #fcfcfc; /*tags bg*/
  177. padding: 6px;
  178. font-size: 10px;
  179. text-align: left;
  180. margin-top: 5px;
  181. letter-spacing: 1px;
  182. display: block;
  183. border: 1px solid #eeeeee; /*tags border*/
  184. border-radius: 5px;
  185. text-decoration: none;
  186. }
  187.  
  188. .tags a:hover {
  189. color: white;
  190. background: linear-gradient(to right, #e36f39, #e3394d);
  191. /*tag hover gradient. to use solid instead, replace the above line with:
  192.  
  193. background-color: #e36f39;
  194.  
  195. */
  196. border: 1px solid white; /*tags hover border*/
  197.  
  198. }
  199.  
  200. </style>
  201. </head>
  202.  
  203. <body>
  204.  
  205.  
  206.  
  207. <div id="sidebar">
  208.  
  209. <div id="title">
  210. navigation <!--page title-->
  211. </div>
  212.  
  213. <div id="nav">
  214. <a href="/" class="th th-home" title="home"></a> <!--home link-->
  215. <a href="/ask" class="th th-paper-plane" title="ask"></a> <!--ask link-->
  216. <a href="/archive" class="th th-calendar-2" title="archive"></a> <!--archive link-->
  217. </div>
  218.  
  219.  
  220. <div class="button selected" filter="group">all categories</div> <!--all categories. only change the name "all categories"-->
  221. <div class="button" filter="cat1">category 1</div>
  222. <div class="button" filter="cat2">category 2</div>
  223. <div class="button" filter="cat3">category 3</div>
  224. <div class="button" filter="cat4">category 4</div>
  225. <div class="button" filter="cat5">category 5</div>
  226. <div class="button" filter="cat6">category 6</div>
  227.  
  228. <!--to edit the above, replace "cat1" "cat2" etc with the category labels you would like to use. for example, i use things like "fandom" or "marvel" on mine. then replace "category 1" "category 2" etc with the label you want to give those things.-->
  229.  
  230. </div>
  231.  
  232.  
  233. <div class="container">
  234.  
  235.  
  236.  
  237. <!--tags 1-->
  238. <div class="group cat1 cat6"> <!--here replace "cat1" and "cat6" with whatever labels you created above for your groups. i.e i'd put "fandom" for mine. no quotation marks, commas, or periods are needed-->
  239.  
  240. <div class="title">
  241. Tag Group 1 <!--title of your first tag group-->
  242. </div>
  243.  
  244.  
  245. <div class="tags">
  246. <a href="/tagged/yourtag">tag one</a>
  247. <a href="/tagged/yourtag">tag two</a>
  248. <a href="/tagged/yourtag">tag three</a>
  249. <a href="/tagged/yourtag">tag four</a>
  250. <a href="/tagged/yourtag">tag five</a>
  251. <a href="/tagged/yourtag">tag six</a>
  252. </div>
  253.  
  254. <!--replace "yourtag" with whatever your tag is. to add more tags in a category, just keep pasting this:
  255.  
  256. <a href="/tagged/yourtag">tag</a>
  257.  
  258. -->
  259.  
  260.  
  261. </div>
  262. <!--end tags 1
  263.  
  264. repeat the above for every tag group
  265.  
  266. -->
  267.  
  268. <!--tags 2-->
  269. <div class="group cat2 cat5">
  270.  
  271. <div class="title">
  272. Tag Group 2
  273. </div>
  274.  
  275.  
  276. <div class="tags">
  277. <a href="/tagged/yourtag">tag one</a>
  278. <a href="/tagged/yourtag">tag two</a>
  279. <a href="/tagged/yourtag">tag three</a>
  280. <a href="/tagged/yourtag">tag four</a>
  281. <a href="/tagged/yourtag">tag five</a>
  282. <a href="/tagged/yourtag">tag six</a>
  283. </div>
  284.  
  285. </div>
  286. <!--end tags 2-->
  287.  
  288. <!--tags 3-->
  289. <div class="group cat3 cat4">
  290.  
  291. <div class="title">
  292. Tag Group 3
  293. </div>
  294.  
  295.  
  296. <div class="tags">
  297. <a href="/tagged/yourtag">tag one</a>
  298. <a href="/tagged/yourtag">tag two</a>
  299. <a href="/tagged/yourtag">tag three</a>
  300. <a href="/tagged/yourtag">tag four</a>
  301. <a href="/tagged/yourtag">tag five</a>
  302. <a href="/tagged/yourtag">tag six</a>
  303. <a href="/tagged/yourtag">tag seven</a>
  304. <a href="/tagged/yourtag">tag eight</a>
  305. </div>
  306.  
  307. </div>
  308. <!--end tags 3-->
  309.  
  310. <!--tags 4-->
  311. <div class="group cat2 cat3">
  312.  
  313. <div class="title">
  314. Tag Group 4
  315. </div>
  316.  
  317.  
  318. <div class="tags">
  319. <a href="/tagged/yourtag">tag one</a>
  320. <a href="/tagged/yourtag">tag two</a>
  321. <a href="/tagged/yourtag">tag three</a>
  322. <a href="/tagged/yourtag">tag four</a>
  323. <a href="/tagged/yourtag">tag five</a>
  324. </div>
  325.  
  326. </div>
  327. <!--end tags 4-->
  328.  
  329. <!--tags 5-->
  330. <div class="group cat5 cat2">
  331.  
  332. <div class="title">
  333. Tag Group 5
  334. </div>
  335.  
  336.  
  337. <div class="tags">
  338. <a href="/tagged/yourtag">tag one</a>
  339. <a href="/tagged/yourtag">tag two</a>
  340. <a href="/tagged/yourtag">tag three</a>
  341. <a href="/tagged/yourtag">tag four</a>
  342. <a href="/tagged/yourtag">tag five</a>
  343. <a href="/tagged/yourtag">tag six</a>
  344. <a href="/tagged/yourtag">tag seven</a>
  345. </div>
  346.  
  347. </div>
  348. <!--end tags 5-->
  349.  
  350. <!--tags 6-->
  351. <div class="group cat6 cat1">
  352.  
  353. <div class="title">
  354. Tag Group 6
  355. </div>
  356.  
  357.  
  358. <div class="tags">
  359. <a href="/tagged/yourtag">tag one</a>
  360. <a href="/tagged/yourtag">tag two</a>
  361. <a href="/tagged/yourtag">tag three</a>
  362. <a href="/tagged/yourtag">tag four</a>
  363. <a href="/tagged/yourtag">tag five</a>
  364. <a href="/tagged/yourtag">tag six</a>
  365. <a href="/tagged/yourtag">tag seven</a>
  366. <a href="/tagged/yourtag">tag eight</a>
  367. <a href="/tagged/yourtag">tag nine</a>
  368. <a href="/tagged/yourtag">tag ten</a>
  369. </div>
  370.  
  371. </div>
  372. <!--end tags 6-->
  373.  
  374. <!--to add more paste the following under the end tags 6 note:
  375.  
  376. <div class="group cat6 cat1">
  377.  
  378. <div class="title">
  379. Tag Group
  380. </div>
  381.  
  382.  
  383. <div class="tags">
  384. <a href="/tagged/yourtag">tag one</a>
  385. <a href="/tagged/yourtag">tag two</a>
  386. <a href="/tagged/yourtag">tag three</a>
  387. <a href="/tagged/yourtag">tag four</a>
  388. <a href="/tagged/yourtag">tag five</a>
  389. <a href="/tagged/yourtag">tag six</a>
  390. <a href="/tagged/yourtag">tag seven</a>
  391. <a href="/tagged/yourtag">tag eight</a>
  392. <a href="/tagged/yourtag">tag nine</a>
  393. <a href="/tagged/yourtag">tag ten</a>
  394. </div>
  395.  
  396. </div>
  397.  
  398. -->
  399. </div>
  400.  
  401. <!--DON'T TOUCH ANYTHING HERE EXCEPT FOR #e3394d TO CHANGE LINK COLOR-->
  402.  
  403. <div style="position:fixed; bottom:8px; right:15px; font-size: 15px;"><a style="color:#e3394d; text-decoration:none; font-weight: bold" class= "th th-stars" href="http://arithemes.tumblr.com/"></a></center></div>
  404.  
  405. </body>
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!