API tools faq
paste
Advertisement
chillinobrien

Tags 03

chillinobrien
Mar 15th, 2015
9,153
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.50 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.  
  3. <!-----------------------------------------------------------------------
  4.  
  5. * TAGS #03 by saaraa @ cyantists.tumblr.com
  6.  
  7. - terms of use: http://cyantists.tumblr.com/terms
  8.  
  9. - I am no longer offering support for this theme
  10.  
  11. - enjoy!
  12.  
  13. ------------------------------------------------------------------------>
  14.  
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  17.  
  18. <title>navigation</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script><script>
  22. (function($){$(document).ready(function(){$("[title]").style_my_tooltips({
  23. tip_follows_cursor:true,
  24. tip_delay_time:50,
  25. tip_fade_speed:300
  26. });});})(jQuery);
  27. </script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script src="http://static.tumblr.com/w3dcevg/3ZWnfb9dt/list.js"></script><script src="http://static.tumblr.com/w3dcevg/PoXnfb9um/list.fuzzysearch.js"></script>
  28.  
  29. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  30.  
  31. </head><style style="text/css">
  32.  
  33. /**************** ACCENT COLOUR ****************/
  34. a:hover, .top .title:hover, li .title {
  35. color:#6cc0f1;}
  36. ::-webkit-scrollbar, ::-webkit-scrollbar-thumb:vertical, a:before, a:after, #s-m-t-tooltip {
  37. background:#6cc0f1;}
  38.  
  39. /**************** OTHER COLOURS ****************/
  40. /** background colour **/
  41. body {background:#f9f9f9;}
  42. /** search box background colour **/
  43. input {background:#f9f9f9;}
  44. /** title, links and search box font colour **/
  45. a, .top .title, .fuzzy-search, .search {color:#919191;}
  46. /** container border colour **/
  47. #filter, .credit a {border:1px solid #e3e3e3;}
  48. /** container background colour **/
  49. #filter, .credit a {background:#fff;}
  50. ::-webkit-scrollbar {border:2px solid #fff;}
  51.  
  52. /***********************************************/
  53.  
  54. *, *:hover, *:before, *:hover:before, *:after, *:hover:after {
  55. transition:all 0.4s ease-in-out;
  56. -webkit-transition:all 0.4s ease-in-out;
  57. -o-transition:all 0.4s ease-in-out;
  58. -moz-transition:all 0.4s ease-in-out;
  59. -mt-transition:all 0.4s ease-in-out;}
  60.  
  61. body {margin:0px; font-size:10px;
  62. font-family:'Montserrat', Trebuchet MS, sans-serif;}
  63.  
  64. html {overflow-y:hidden;}
  65.  
  66. #s-m-t-tooltip {margin-top:20px; margin-left:16px; padding:6px; color:#fff;
  67. display:inline-block; text-align:center; position:absolute; font-size:8px;
  68. font-family:Trebuchet MS; text-transform:uppercase; z-index:9999999999;
  69. letter-spacing:1px; font-weight:bold;}
  70.  
  71. a {text-decoration:none; display:inline-block; margin:0px 4px;
  72. padding:3px 0px; position:relative;}
  73.  
  74. .links a {width:32px;}
  75.  
  76. a:before, a:after {width:0; height:1px; position:absolute; top:0; left:0;
  77. right:0; margin:0px auto; content:''; z-index:10;}
  78.  
  79. a:after {margin-top:19px;}
  80.  
  81. li a:hover:before, li a:hover:after {width:100%;}
  82. .links a:hover:before, .links a:hover:after {width:32px;}
  83.  
  84. .links {width:500px; position:absolute; top:0; bottom:0; left:0; right:0;
  85. margin:auto auto; height:18px; text-align:center; padding-top:510px;
  86. z-index:1;}
  87.  
  88. #filter {width:525px; position:absolute; top:0; bottom:0; left:0; right:0;
  89. margin:auto auto; height:400px; padding:30px 28px 30px 30px; z-index:2;}
  90.  
  91. .top {width:525px; height:20px; display:block;}
  92.  
  93. .top .title {font:bold 28px 'Montserrat', Trebuchet MS, sans-serif;
  94. text-transform:uppercase; margin-top:-7px; width:200px; position:absolute;
  95. margin-left:30px;}
  96.  
  97. input {border:none; padding:6px; font-size:10px; letter-spacing:1px;
  98. font-family:'Montserrat', Trebuchet MS, sans-serif; width:136px;}
  99.  
  100. input:focus {outline:none;}
  101.  
  102. .fuzzy-search, .search {outline:none; padding:5px 8px; position:absolute;
  103. letter-spacing:1px; width:124px; z-index:99999; border-radius:0px;
  104. margin-left:353px;}
  105.  
  106. ::-webkit-input-placeholder {color:#bbb;}
  107. ::-moz-placeholder {color:#bbb;}
  108. ::-moz-placeholder {color:#bbb;}
  109. ::-ms-input-placeholder {color:#bbb;}
  110.  
  111. .container {margin-top:30px; width:490px; height:350px; padding-left:15px;
  112. overflow-y:scroll; padding-right:20px;}
  113.  
  114. ::-webkit-scrollbar {width:5px;}
  115. ::-webkit-scrollbar-thumb:vertical {width:5px;}
  116.  
  117. .list {margin:0; padding:0; z-index:9;}
  118. li {display:inline-block;}
  119.  
  120. .tagslist {display:none;}
  121.  
  122. li .title {margin-top:20px; text-transform:uppercase; letter-spacing:1px;
  123. display:block; font:bold 12px 'Montserrat', Trebuchet MS, sans-serif;
  124. width:495px; margin-left:-10px; margin-bottom:2px;}
  125.  
  126. /** PLEASE DO NOT ALTER OR REMOVE **/
  127. .credit {position:fixed; bottom:8px; right:8px; font-size:10px; z-index:9999;}
  128. .credit a {padding:2px 4px; font-weight:bold; width:7px; overflow:hidden; border-left:none; border-right:none; display:block;
  129. padding:3px 3px; font-family:Trebuchet MS; position:relative; z-index:9;}
  130. .credit a:hover {width:66px;}
  131. /** THANK YOU **/
  132.  
  133. </style><body>
  134.  
  135. <div class="links">
  136. <a href="/">back</a>
  137. <a href="/ask">ask</a>
  138. <a href="/">link</a>
  139. </div>
  140.  
  141. <div id="filter"><span class="top">
  142.  
  143. <!------- PAGE TITLE -------><div class="title">navigation</div>
  144.  
  145. <input class="search" placeholder="filter tags" /></span>
  146. <div class="container"><ul class="list">
  147.  
  148. <!------------------------------------------------------------------------------------------------------------- EXAMPLE ----------------------------------------------------------------------------------------------------------------->
  149.  
  150. <!-- START TITLE --><li>
  151. <div class="title" style="margin-top:0px;">(example) franchises:</div>
  152. <!---------------
  153. !!! you only have to fill in the part below if you want the title to
  154. stay on the page when the tags are filtered, e.g. someone writes
  155. 'disney' and you want the tag and the heading (franchises) to appear
  156.  
  157. if so, then this is where you put the names of all the tags in this
  158. section, plus and relevant search terms, eg. for the hunger games
  159. I've added 'the hunger games', 'thg' 'catching fire' and 'mockingjay'
  160. you don't have to be that thorough, just go with what you want.
  161.  
  162. !!! note: no need for quotation marks, I only used them to make my
  163. explanation easier to understand
  164. --------------->
  165. <span class="tagslist">franchises disney divergent firefly & serenity whedonverse harry potter the hunger games thg kill bill the maze runner tmr shadowhunters tmi tid tda star trek star wars tolkien lotr the hobbit</span>
  166. </li><!-- END TITLE -->
  167.  
  168. <!-- START TAG --><li>
  169. <a href="/tagged/f:-disney">disney</a>
  170. <!---------------
  171. this is where you put the title of the section and the name of the tag
  172. and, if you want to, any other relevent search terms you think people
  173. might look for.
  174. eg. for tolkien you could a 'franchises', 'tolkien', 'lord of the rings'
  175. 'lotr', 'the bobbit' and whatever else, or you could just write
  176. 'franchise' and 'tolkien'
  177.  
  178. !!! note: no need for quotation marks, I only used them to make
  179. my explanation easier to understand
  180. --------------->
  181. <span class="tagslist">franchises disney</span>
  182. </li><!-- END TAG -->
  183. <!-- START TAG --><li>
  184. <a href="/tagged/f:-divergent">divergent</a>
  185. <span class="tagslist">franchises divergent</span></li>
  186. <!-- START TAG --><li>
  187. <a href="/tagged/f:-firefly">firefly & serenity</a>
  188. <span class="tagslist">franchises firefly serenity whedonverse</span></li>
  189. <!-- START TAG --><li>
  190. <a href="/tagged/f:-harry-potter">harry potter</a>
  191. <span class="tagslist">franchises harry potter</span></li>
  192. <!-- START TAG --><li>
  193. <a href="/tagged/f:-the-hunger-games">the hunger games</a>
  194. <span class="tagslist">franchises the hunger games thg</span></li>
  195. <!-- START TAG --><li>
  196. <a href="/tagged/f:-kill-bill">kill bill</a>
  197. <span class="tagslist">franchises kill bill</span></li>
  198. <!-- START TAG --><li>
  199. <a href="/tagged/f:-the maze runner">the maze runner</a>
  200. <span class="tagslist">franchises the maze runner tmr</span></li>
  201. <!-- START TAG --><li>
  202. <a href="/tagged/f:-photography">shadowhunters</a>
  203. <span class="tagslist">franchises shadowhunters tmi tid tda</span></li>
  204. <!-- START TAG --><li>
  205. <a href="/tagged/f:-star-trek">star trek</a>
  206. <span class="tagslist">franchises star trek</span></li>
  207. <!-- START TAG --><li>
  208. <a href="/tagged/f:-star-wars">star wars</a>
  209. <span class="tagslist">franchises star wars</span></li>
  210. <!-- START TAG --><li>
  211. <a href="/tagged/f:-tolkien">tolkien</a>
  212. <span class="tagslist">franchises tolkien lotr the hobbit</span></li>
  213.  
  214. <!----------------------------------------------------------------------------
  215. ---------------------------- TEMPLATE ----------------------------
  216. ----------------------------------------------------------------------------->
  217.  
  218. <!-- START TITLE --><li>
  219. <div class="title">title:</div>
  220. <span class="tagslist">relevant filters</span>
  221.  
  222. <!-- START TAG --><li>
  223. <a href="/tagged/tag">tag name</a>
  224. <span class="tagslist">relevant filters</span></li>
  225. <!-- START TAG --><li>
  226. <a href="/tagged/tag">tag name</a>
  227. <span class="tagslist">relevant filters</span></li>
  228. <!-- START TAG --><li>
  229. <a href="/tagged/tag">tag name</a>
  230. <span class="tagslist">relevant filters</span></li>
  231. <!-- START TAG --><li>
  232. <a href="/tagged/tag">tag name</a>
  233. <span class="tagslist">relevant filters</span></li>
  234. <!-- START TAG --><li>
  235. <a href="/tagged/tag">tag name</a>
  236. <span class="tagslist">relevant filters</span></li>
  237. <!-- START TAG --><li>
  238. <a href="/tagged/tag">tag name</a>
  239. <span class="tagslist">relevant filters</span></li>
  240. <!-- START TAG --><li>
  241. <a href="/tagged/tag">tag name</a>
  242. <span class="tagslist">relevant filters</span></li>
  243. <!-- START TAG --><li>
  244. <a href="/tagged/tag">tag name</a>
  245. <span class="tagslist">relevant filters</span></li>
  246.  
  247. <!--------------------------------------------------------------------------->
  248.  
  249.  
  250.  
  251. </ul></div></div>
  252.  
  253. <!--- PLEASE DO NOT ALTER OR REMOVE --->
  254. <div class="credit"><a href="http://cyantists.tumblr.com">&copy;&nbsp;cyantists</a></div>
  255. <!------------- THANK YOU ------------->
  256.  
  257. <script>var options = {valueNames: [ 'title', 'tagslist' ]};var userList = new List('filter', options);</script>
  258.  
  259. </body></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!