API tools faq
paste
Advertisement
oflothlorien

Tags/Navigation theme two

oflothlorien
Mar 20th, 2014
3,433
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.16 KB | None | 0 0
raw download clone embed print report
  1. <!-- This is Oflothlorien's TAGS THEME TWO
  2. RULES:
  3. - Do not remove the credit
  4. - Do not use as a base
  5. - Do not claim as your own
  6.  
  7. If you have any queries, go to oflothlorien.tumblr.com/asksubmit -->
  8.  
  9. <html>
  10.  
  11.  
  12. <head>
  13. <title>Tags/Navigation</title> <!-- This is the title that appears on the tab -->
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <style>
  16.  
  17. a:link {color:#9fc8d7;} /* unvisited link */
  18. a:visited {color:#9fc8d7;} /* visited link */
  19. a:hover {color:#938989;} /* mouse over link */
  20. a:active {color:#938989;} /* selected link */
  21. a:link {text-decoration:none;}
  22. a:visited {text-decoration:none;}
  23. a:hover {text-decoration:none;}
  24. a:active {text-decoration:none;}
  25.  
  26.  
  27.  
  28. iframe#tumblr_controls{
  29. position:fixed !important;
  30. right:0px !important;
  31. z-index:999;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb:vertical {
  35. background-color: #d6d5d5; /*Change colour of scroll bar*/
  36. height:5px;
  37. }
  38. ::-webkit-scrollbar-corner {
  39. background-color: transparent;
  40. }
  41. ::-webkit-scrollbar-thumb:horizontal {
  42. background-color: #d6d5d5; /*Change colour of scroll bar*/
  43. height:5px!important;
  44. }
  45.  
  46. body {
  47. background-color: #fff; /* change the background colour here*/
  48. background-image: url('url here'); /* insert a background image, just put the url where the green text is, but I suggest that no image is used */
  49. background-repeat: no-repeat;
  50. background-position: center;
  51. position: fixed;
  52. }
  53.  
  54. h1 {
  55. background-color: #f1f1f1; /* Change the background colour for the title boxes */
  56. width: 300px;
  57. font-family: cambria;
  58. font-size: 16px;
  59. color: #656363; /* Change the colour for the text of the title boxes */
  60. text-transform: lowercase;
  61. text-align: center;
  62. border-radius: 2px;
  63. }
  64.  
  65. #image {
  66. margin-top: 10px;
  67. margin-left: 570px;
  68. position: fixed;
  69. }
  70.  
  71. #title {
  72. width: 300px;
  73. margin-left: 455px;
  74. margin-top: 100px;
  75. font-family: cambria;
  76. font-size: 26px;
  77. color: #938989; /* Change the colour of the title text */
  78. background-color: #fff;
  79. text-align: center;
  80. text-transform:lowercase;
  81. }
  82.  
  83. #mainlinks {
  84. width: 300px;
  85. margin-left: 455px;
  86. margin-top: 0px;
  87. background-color: #fff
  88. font-family: cambria;
  89. font-size: 10px;
  90. text-transform: lowercase;
  91. text-align: center;
  92. word-spacing: 10px;
  93. -o-transition: all 0.5s ease-in;
  94. -webkit-transition: all 0.5s ease-in;
  95. -moz-transition: all 0.5s ease-in;
  96. }
  97.  
  98. #mainlinks:hover {
  99. letter-spacing: 3px;
  100. -o-transition: all 0.5s ease-out;
  101. -webkit-transition: all 0.5s ease-out;
  102. -moz-transition: all 0.5s ease-out;
  103. }
  104.  
  105. #navione {
  106. height:25px;
  107. width:300px;
  108. margin-left: 455px;
  109. margin-top:10px;
  110. text-align:center;
  111. overflow:hidden;
  112. border-bottom:1px solid #efefef;
  113. text-transform:none;
  114. letter-spacing:1px;
  115. font-size:12px;
  116. line-height:110%;
  117. z-index:999999999999999999999;
  118. -webkit-transition: all 0.5s ease-in-out;
  119. -moz-transition: all 0.5s ease-in-out;
  120. -o-transition: all 0.5s ease-in-out;
  121. }
  122.  
  123. #navione:hover{
  124. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  125. -webkit-transition: all 0.5s ease-in-out;
  126. -moz-transition: all 0.5s ease-in-out;
  127. -o-transition: all 0.5s ease-in-out;
  128. }
  129.  
  130. #navitwo {
  131. height:25px;
  132. width:300px;
  133. margin-left: 455px;
  134. margin-top:0px;
  135. text-align:center;
  136. overflow:hidden;
  137. border-bottom:1px solid #efefef;
  138. text-transform:none;
  139. letter-spacing:1px;
  140. font-size:12px;
  141. line-height:110%;
  142. z-index:999999999999999999999;
  143. -webkit-transition: all 0.5s ease-in-out;
  144. -moz-transition: all 0.5s ease-in-out;
  145. -o-transition: all 0.5s ease-in-out;
  146. }
  147.  
  148. #navitwo:hover{
  149. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  150. -webkit-transition: all 0.5s ease-in-out;
  151. -moz-transition: all 0.5s ease-in-out;
  152. -o-transition: all 0.5s ease-in-out;
  153. }
  154.  
  155. #navithree {
  156. height:25px;
  157. width:300px;
  158. margin-left: 455px;
  159. margin-top:0px;
  160. text-align:center;
  161. overflow:hidden;
  162. border-bottom:1px solid #efefef;
  163. text-transform:none;
  164. letter-spacing:1px;
  165. font-size:12px;
  166. line-height:110%;
  167. z-index:999999999999999999999;
  168. -webkit-transition: all 0.5s ease-in-out;
  169. -moz-transition: all 0.5s ease-in-out;
  170. -o-transition: all 0.5s ease-in-out;
  171. }
  172.  
  173. #navithree:hover{
  174. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  175. -webkit-transition: all 0.5s ease-in-out;
  176. -moz-transition: all 0.5s ease-in-out;
  177. -o-transition: all 0.5s ease-in-out;
  178. }
  179.  
  180. #navifour {
  181. height:25px;
  182. width:300px;
  183. margin-left: 455px;
  184. margin-top:0px;
  185. text-align:center;
  186. overflow:hidden;
  187. border-bottom:1px solid #efefef;
  188. text-transform:none;
  189. letter-spacing:1px;
  190. font-size:12px;
  191. line-height:110%;
  192. z-index:999999999999999999999;
  193. -webkit-transition: all 0.5s ease-in-out;
  194. -moz-transition: all 0.5s ease-in-out;
  195. -o-transition: all 0.5s ease-in-out;
  196. }
  197.  
  198. #navifour:hover{
  199. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  200. -webkit-transition: all 0.5s ease-in-out;
  201. -moz-transition: all 0.5s ease-in-out;
  202. -o-transition: all 0.5s ease-in-out;
  203. }
  204.  
  205. #navifive {
  206. height:25px;
  207. width:300px;
  208. margin-left: 455px;
  209. margin-top:0px;
  210. text-align:center;
  211. overflow:hidden;
  212. border-bottom:1px solid #efefef;
  213. text-transform:none;
  214. letter-spacing:1px;
  215. font-size:12px;
  216. line-height:110%;
  217. z-index:999999999999999999999;
  218. -webkit-transition: all 0.5s ease-in-out;
  219. -moz-transition: all 0.5s ease-in-out;
  220. -o-transition: all 0.5s ease-in-out;
  221. }
  222.  
  223. #navifive:hover{
  224. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  225. -webkit-transition: all 0.5s ease-in-out;
  226. -moz-transition: all 0.5s ease-in-out;
  227. -o-transition: all 0.5s ease-in-out;
  228. }
  229.  
  230. #navisix {
  231. height:25px;
  232. width:300px;
  233. margin-left: 455px;
  234. margin-top:0px;
  235. text-align:center;
  236. overflow:hidden;
  237. border-bottom:1px solid #efefef;
  238. text-transform:none;
  239. letter-spacing:1px;
  240. font-size:12px;
  241. line-height:110%;
  242. z-index:999999999999999999999;
  243. -webkit-transition: all 0.5s ease-in-out;
  244. -moz-transition: all 0.5s ease-in-out;
  245. -o-transition: all 0.5s ease-in-out;
  246. }
  247.  
  248. #navisix:hover{
  249. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  250. -webkit-transition: all 0.5s ease-in-out;
  251. -moz-transition: all 0.5s ease-in-out;
  252. -o-transition: all 0.5s ease-in-out;
  253. }
  254.  
  255. #naviseven {
  256. height:25px;
  257. width:300px;
  258. margin-left: 455px;
  259. margin-top:0px;
  260. text-align:center;
  261. overflow:hidden;
  262. border-bottom:1px solid #efefef;
  263. text-transform:none;
  264. letter-spacing:1px;
  265. font-size:12px;
  266. line-height:110%;
  267. z-index:999999999999999999999;
  268. -webkit-transition: all 0.5s ease-in-out;
  269. -moz-transition: all 0.5s ease-in-out;
  270. -o-transition: all 0.5s ease-in-out;
  271. }
  272.  
  273. #naviseven:hover{
  274. height:180px; /* This is where you change the height of the hover, if you add more links, you will need to make this number bigger. Try 200px or even 250 if 200 is not big enough */
  275. -webkit-transition: all 0.5s ease-in-out;
  276. -moz-transition: all 0.5s ease-in-out;
  277. -o-transition: all 0.5s ease-in-out;
  278. }
  279.  
  280. </style>
  281. </head>
  282.  
  283. <body>
  284.  
  285. <div id="image"><img src="http://4.bp.blogspot.com/-I7LIZQ8wzfM/UoBJDyQxeGI/AAAAAAAANPE/VLaO8BBS7PI/s1600/1_%2Bfree%2Bvintage%2Bprintable_butterfly%2Bimage.jpg" height="80px" width="80px"></div> <!-- this is the image above the title, any image will do -->
  286.  
  287. <div id="title">Navigation and Tags</div> <!-- Title here -->
  288. <div id="mainlinks"> <!-- links here -->
  289. <a href="/">home</a>
  290. <a href="/ask">ask</a>
  291. <a href="/about">about</a>
  292. <a href="http://oflothlorien.tumblr.com/">credit</a> <!-- DO NOT REMOVE THE CREDIT!!! -->
  293. </div>
  294.  
  295. <div id="navione">
  296. <h1>Television</h1> <!-- This is the title for the section -->
  297. <a href="/link">link</a><br>
  298. <a href="/link">link</a><br>
  299. <a href="/link">link</a><br>
  300. <a href="/link">link</a><br>
  301. <a href="/link">link</a><br>
  302. <a href="/link">link</a><br>
  303. <a href="/link">link</a><br>
  304. <a href="/link">link</a><br>
  305. <a href="/link">link</a><br>
  306. <a href="/link">link</a><br>
  307. <a href="/link">link</a><br>
  308. <!-- Add as many links as you want but don't forget to change the size of the hover box bit -->
  309. </div>
  310.  
  311. <div id="navitwo">
  312. <h1>Films</h1>
  313. <a href="/link">link</a><br>
  314. <a href="/link">link</a><br>
  315. <a href="/link">link</a><br>
  316. <a href="/link">link</a><br>
  317. <a href="/link">link</a><br>
  318. <a href="/link">link</a><br>
  319. <a href="/link">link</a><br>
  320. <a href="/link">link</a><br>
  321. <a href="/link">link</a><br>
  322. <a href="/link">link</a><br>
  323. <a href="/link">link</a><br>
  324. </div>
  325.  
  326. <div id="navithree">
  327. <h1>people</h1>
  328. <a href="/link">link</a><br>
  329. <a href="/link">link</a><br>
  330. <a href="/link">link</a><br>
  331. <a href="/link">link</a><br>
  332. <a href="/link">link</a><br>
  333. <a href="/link">link</a><br>
  334. <a href="/link">link</a><br>
  335. <a href="/link">link</a><br>
  336. <a href="/link">link</a><br>
  337. <a href="/link">link</a><br>
  338. <a href="/link">link</a><br>
  339. </div>
  340.  
  341. <div id="navifour">
  342. <h1>elephants</h1>
  343. <a href="/link">link</a><br>
  344. <a href="/link">link</a><br>
  345. <a href="/link">link</a><br>
  346. <a href="/link">link</a><br>
  347. <a href="/link">link</a><br>
  348. <a href="/link">link</a><br>
  349. <a href="/link">link</a><br>
  350. <a href="/link">link</a><br>
  351. <a href="/link">link</a><br>
  352. <a href="/link">link</a><br>
  353. <a href="/link">link</a><br>
  354. </div>
  355.  
  356. <div id="navifive">
  357. <h1>fish</h1>
  358. <a href="/link">link</a><br>
  359. <a href="/link">link</a><br>
  360. <a href="/link">link</a><br>
  361. <a href="/link">link</a><br>
  362. <a href="/link">link</a><br>
  363. <a href="/link">link</a><br>
  364. <a href="/link">link</a><br>
  365. <a href="/link">link</a><br>
  366. <a href="/link">link</a><br>
  367. <a href="/link">link</a><br>
  368. <a href="/link">link</a><br>
  369. </div>
  370.  
  371. <div id="navisix">
  372. <h1>fleas</h1>
  373. <a href="/link">link</a><br>
  374. <a href="/link">link</a><br>
  375. <a href="/link">link</a><br>
  376. <a href="/link">link</a><br>
  377. <a href="/link">link</a><br>
  378. <a href="/link">link</a><br>
  379. <a href="/link">link</a><br>
  380. <a href="/link">link</a><br>
  381. <a href="/link">link</a><br>
  382. <a href="/link">link</a><br>
  383. <a href="/link">link</a><br>
  384. </div>
  385.  
  386. <div id="naviseven">
  387. <h1>whales</h1>
  388. <a href="/link">link</a><br>
  389. <a href="/link">link</a><br>
  390. <a href="/link">link</a><br>
  391. <a href="/link">link</a><br>
  392. <a href="/link">link</a><br>
  393. <a href="/link">link</a><br>
  394. <a href="/link">link</a><br>
  395. <a href="/link">link</a><br>
  396. <a href="/link">link</a><br>
  397. <a href="/link">link</a><br>
  398. <a href="/link">link</a><br>
  399. </div>
  400.  
  401.  
  402. </body>
  403. </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!