API tools faq
paste
Advertisement
topshopandtea

Navigation Theme #1

topshopandtea
Jul 28th, 2013
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.80 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. Navigation theme by HOGWAT
  5.  
  6. FOLLOW THE RULES OR I WILL STEAL YOUR WIFI OKAY?
  7. -->
  8.  
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10.  
  11.  
  12. <head>
  13.  
  14. <link href='http://fonts.googleapis.com/css?family=Poly' rel='stylesheet' type='text/css'>
  15.  
  16. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Lato:400,100italic,300italic,400italic' rel='stylesheet' type='text/css'>
  19.  
  20.  
  21. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  22. <title>{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23. <link rel="shortcut icon" href="{Favicon}" />
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  25.  
  26. <style type="text/css">
  27.  
  28.  
  29. a {
  30. color:{color:link};
  31. text-decoration:none;
  32. -moz-transition-duration:0.5s;
  33. -webkit-transition-duration:0.5s;
  34. -o-transition-duration:0.5s;
  35. }
  36.  
  37. a:hover {
  38. color:{color:hover};
  39. text-decoration:none;
  40. -moz-transition-duration:0.5s;
  41. -webkit-transition-duration:0.5s;
  42. -o-transition-duration:0.5s;
  43. }
  44.  
  45.  
  46. ::-webkit-scrollbar {background-color:{color:bg}; height:8px; width:8px}
  47. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  48. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}
  49.  
  50. body {
  51. background-color:{color:bg};
  52. font-family:Cambria;
  53. font-weight:normal;
  54. }
  55.  
  56.  
  57.  
  58.  
  59. h1 {
  60. font-weight:normal;
  61. font-size:11px;
  62. text-align:center;
  63. font-style:italic;
  64. line-height:50%;
  65. letter-spacing:1px;
  66. text-transform:lowercase;
  67. color:{color:text};
  68. }
  69.  
  70. h2 {
  71. font-size:10px;
  72. text-align:center;
  73. line-height:100%;
  74. letter-spacing:-0.5px;
  75. color:{color:text};
  76. font-weight:bold;
  77. text-transform:uppercase;
  78. padding:5px;
  79. padding-bottom:2px;
  80. }
  81.  
  82.  
  83. blockquote {
  84. border-left:2px solid {color:text};
  85. padding-left:5px;
  86. margin:5px;
  87. }
  88.  
  89. /*--DONT TOUCH--*/
  90.  
  91. /*--TOOL TIPS CREDIT TO MEEM--*/
  92.  
  93. #s-m-t-tooltip {
  94.  
  95. max-width:300px;
  96.  
  97. padding:3px 4px 5px 4px;
  98.  
  99. margin:20px 0px 0px 20px;
  100.  
  101. background-color:#fff; /* change the background color */
  102.  
  103. border:1px solid #4eb19d; /* change the border color */
  104.  
  105. font-family:calibri; /* change the font */
  106.  
  107. font-size:9px; /* change the font size */
  108.  
  109. letter-spacing:2px; /* change the letter spacing */
  110.  
  111. text-transform:uppercase; /* can be uppercase, lowercase, none*/
  112.  
  113. color:#4eb19d; /* change the text color */
  114.  
  115. z-index:999999999999999999999999999999999999;
  116.  
  117. }
  118.  
  119.  
  120.  
  121. #goback {
  122. width:150px;
  123. color:#4eb19d;
  124. top:15;
  125. left:0px;
  126. float:left;
  127. text-align:center;
  128. border-left:4px solid;
  129. }
  130.  
  131. #goback a{
  132. display:block;
  133. width:40px;
  134. font-size:9px;
  135. font-family:calibri;
  136. color:#4eb19d;
  137. padding:1px;
  138. margin-bottom:10px;
  139. }
  140.  
  141. #title{
  142. font-family:baskerville;
  143. font-size:34px;
  144. font-style:italic;
  145. color:#fff;
  146. background:#4eb19d;
  147. padding:10px;
  148. width:500px;
  149. text-align:center;
  150. margin-top:20px;
  151. margin-left:351px;
  152. border:#4eb19d solid;
  153. }
  154.  
  155. #header{
  156. width:525px;
  157. height:25px;
  158. margin-top:-2px;
  159. margin-left:350px;
  160. text-align:right;
  161. color:#fff;
  162. padding:1px;
  163. border:1px solid;
  164. background:#4eb19d;
  165. font-family:baskerville;
  166. font-size:24px;
  167. font-style:italic;
  168. }
  169.  
  170. /*--THEME BY HOGWAT--*/
  171.  
  172. #links{
  173. font-family:calibri;
  174. text-transform:uppercase;
  175. font-size:11px;
  176. width:550px;
  177. color:#4eb19d;
  178. margin-left:345px;
  179. margin-top:-5px;
  180. }
  181.  
  182. #links a {
  183. display:inline-block;
  184. width:165px;
  185. padding:2px;
  186. text-align:center;
  187. margin-left:5px;
  188. margin-top:10px;
  189. margin-bottom:10px;
  190. border:1px solid #4eb19d; /*-- MAKE SURE TO MAKE THIS THE SAME COLOR AS THE TITLE AND HEADER --*/
  191. font-family:calibri;
  192. text-transform:uppercase;
  193. color:#4eb19d;
  194. }
  195.  
  196. #links a:hover{
  197. background:#b9e4d6;
  198. color:#fff;
  199. }
  200.  
  201. #mini{
  202. width:525px;
  203. height:15px;
  204. margin-top:1px;
  205. margin-left:350px;
  206. text-align:right;
  207. color:#fff;
  208. padding:2px;
  209. border:1px solid;
  210. background:#b9e4d6; /*-- MAKE SURE TO MAKE THIS A LIGHTER COLOR THAN THE HEADER AND TITLE COLOR --*/
  211. font-family:georgia;
  212. font-size:14px;
  213. font-style:italic;
  214. }
  215.  
  216.  
  217. #credit{
  218. position:fixed;
  219. float:right;
  220. bottom:10px;
  221. }
  222.  
  223. #credit a{
  224. font-family:calibri;
  225. text-transform:uppercase;
  226. width:100px;
  227. padding:3px;
  228. font-size:9px;
  229. color:#1eccc1;
  230. border:1px solid;
  231. }
  232.  
  233. #credit a:hover{
  234. background-color:#1eccc1;
  235. color:#fff;
  236. }
  237.  
  238.  
  239.  
  240. </style>
  241. </head>
  242.  
  243. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  244.  
  245. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  246.  
  247. <script>
  248.  
  249. (function($){
  250.  
  251. $(document).ready(function(){
  252.  
  253. $("a[title]").style_my_tooltips({
  254.  
  255. tip_follows_cursor:true,
  256.  
  257. tip_delay_time:90,
  258.  
  259. tip_fade_speed:600,
  260.  
  261. attribute:"title"
  262.  
  263. });
  264.  
  265. });
  266.  
  267. })(jQuery);
  268.  
  269. </script>
  270.  
  271. <body>
  272.  
  273. <div id="goback">
  274. <a href="/">home </a>
  275. <a href="/ask">ask</a>
  276. <a href="http://tumblr.com/dashboard">dash</a>
  277. </div>
  278.  
  279. <div id="title">your url's naviagtion</div>
  280.  
  281.  
  282. <div id="header">links;</div>
  283. <div id="links">
  284.  
  285. <a title="title" href="">links</a>
  286.  
  287. <a title="another title yo" href="">links</a>
  288.  
  289. <a title="" href="">links</a>
  290.  
  291. <a title="" href="">links</a>
  292.  
  293. <a title="" href="">links</a>
  294.  
  295. <a title="" href="">links</a>
  296.  
  297. <a title="" href="">links</a>
  298.  
  299. <a title="" href="">links</a>
  300.  
  301. <a title="" href="">links</a>
  302. </div>
  303.  
  304.  
  305. <div id="header">tags;</div>
  306.  
  307. <div id="mini">misc</div>
  308.  
  309.  
  310. <div id="links">
  311.  
  312. <a title="" href="">links</a>
  313.  
  314. <a title="" href="">links</a>
  315.  
  316. <a title="" href="">links</a>
  317.  
  318. <a title="" href="">links</a>
  319.  
  320. <a title="" href="">links</a>
  321.  
  322. <a title="" href="">links</a>
  323.  
  324. <a title="" href="">links</a>
  325.  
  326. <a title="" href="">links</a>
  327.  
  328. <a title="" href="">links</a>
  329.  
  330. <a title="" href="">links</a>
  331. </div>
  332.  
  333.  
  334. <div id="header">tags;</div>
  335.  
  336. <div id="mini">ladies</div>
  337.  
  338.  
  339. <div id="links">
  340.  
  341. <a title="" href="">links</a>
  342.  
  343. <a title="" href="">links</a>
  344.  
  345. <a title="" href="">links</a>
  346.  
  347. <a title="" href="">links</a>
  348.  
  349. <a title="" href="">links</a>
  350.  
  351. <a title="" href="">links</a>
  352.  
  353. <a title="" href="">links</a>
  354.  
  355. <a title="" href="">links</a>
  356.  
  357. <a title="" href="">links</a>
  358. </div>
  359.  
  360. <div id="header">tags;</div>
  361.  
  362. <div id="mini">lads</div>
  363.  
  364.  
  365. <div id="links">
  366.  
  367. <a title="" href="">links</a>
  368.  
  369. <a title="" href="">links</a>
  370.  
  371. <a title="" href="">links</a>
  372.  
  373. <a title="" href="">links</a>
  374.  
  375. <a title="" href="">links</a>
  376.  
  377. <a title="" href="">links</a>
  378.  
  379. <a title="" href="">links</a>
  380.  
  381. <a title="" href="">links</a>
  382.  
  383. <a title="" href="">links</a>
  384. </div>
  385.  
  386.  
  387.  
  388.  
  389.  
  390. <div id="credit"><a href="http://hogwat.tumblr.com">hogwat</a></div>
  391.  
  392. </div>
  393. </div>
  394. </div>
  395. </body>
  396. </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!