API tools faq
paste
Advertisement
planthed

Navigation #3

planthed
Nov 1st, 2014
235
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.76 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. theme made by tumblr user planthed // weedhs ★彡
  4.  
  5. keep the creds u lil bitch
  6.  
  7. — http://painthemes.tumblr.com/
  8. — http://planthed.tumblr.com/
  9. — http://weedhs.tumblr.com/
  10.  
  11.  
  12. *****IMPORTANT, READ THIS*****
  13.  
  14. the idea of this layout and all that contain are made by me, please do not steal,redristibute or claim it as yours; keep the credits intact, bc i work really hard to make this for you. I know when people stole my codes, if you are of this people, i will message you to credit me, if you don't reply or dont take me in account, i proceed to report you and you will suffer the consequences.
  15.  
  16. If you have any trouble with this, feel free to ask for help:)
  17.  
  18. atte. Laura a.k.a planthed<3
  19.  
  20. ****
  21. IF YOU WANT TO CHANGE THE COLORS FIND THIS "#d2dae5" IN ALL THE CODE, USE CTRL + F
  22.  
  23. but I will also give indications of where to change them
  24. ****
  25.  
  26. please please please keep the credits, i work really hard in this layout for you, i'll be grateful x
  27. --->
  28.  
  29. <html lang="en">
  30.  
  31.  
  32. <script type="text/javascript">
  33. <!--
  34.  
  35. // Disable Right Click Script
  36.  
  37. function IE(e)
  38. {
  39. if (navigator.appName == "Microsoft Internet Explorer" && (event.button == "2" || event.button == "3"))
  40. {
  41. return false;
  42. }
  43. }
  44. function NS(e)
  45. {
  46. if (document.layers || (document.getElementById && !document.all))
  47. {
  48. if (e.which == "2" || e.which == "3")
  49. {
  50. return false;
  51. }
  52. }
  53. }
  54. document.onmousedown=IE;document.onmouseup=NS;document.oncontextmenu=new Function("return false");
  55.  
  56. //-->
  57. </script>
  58.  
  59. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  60. <title>{name}'s nav</title>
  61. <link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lnvurxvJ8i1qepbs7.png">
  62.  
  63. <link rel="stylesheet" type="text/css" href="http://assets.tumblr.com/fonts/avalon/stylesheet.css?v=1">
  64. <script type="text/javascript">
  65. WebFontConfig = {
  66. google: { families: [ 'Allura::latin', 'Roboto:100:latin', 'Dancing+Script::latin', 'Pinyon+Script::latin', 'Allura::latin', 'Ruthie::latin', 'Noto+Sans:400,400italic:latin', 'Libre+Baskerville:400,400italic:latin', 'Satisfy::latin', 'Dawning+of+a+New+Day::latin','Dosis::latin', 'Raleway:200:latin', 'Parisienne::latin', 'Great+Vibes::latin', 'Clicker+Script::latin' ] }
  67. };
  68. (function() {
  69. var wf = document.createElement('script');
  70. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  71. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  72. wf.type = 'text/javascript';
  73. wf.async = 'true';
  74. var s = document.getElementsByTagName('script')[0];
  75. s.parentNode.insertBefore(wf, s);
  76. })(); </script>
  77.  
  78. <link href="http://static.tumblr.com/eih4pta/Flam72cb8/animate-custom__1_.css" rel="stylesheet">
  79. <script type="text/javascript" src="http://static.tumblr.com/dbhjqlo/rd3nc0jpe/effectsxp.txt"></script>
  80. <script type="text/javascript" src="http://static.tumblr.com/5jb4lhb/HUOncl3cj/lmtxt.txt"></script>
  81. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  82. <script type="text/javascript" src="http://static.tumblr.com/5jb4lhb/HUOncl3cj/lmtxt.txt"></script>
  83. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  84. <script>
  85. (function($){
  86. $(document).ready(function(){
  87. $("a[title]").style_my_tooltips({
  88. tip_follows_cursor:true,
  89. tip_delay_time:90,
  90. tip_fade_speed:600,
  91. attribute:"title"
  92. });
  93. });
  94. })(jQuery);
  95. </script>
  96.  
  97.  
  98. <style type="text/css">
  99.  
  100. #s-m-t-tooltip{
  101. max-width:300px;
  102. padding:6px;
  103. margin:20px 0px 0px 20px;
  104. background:#d2dae5;/* CHANGE THE COLOR*/
  105. font-family:calibri;
  106. border-radius:4px;
  107. font-size:10px;
  108. text-transform:uppercase;
  109. color:#fff;
  110. letter-spacing:1px;
  111. z-index:999999;
  112. }
  113.  
  114. #s-m-t-tooltip:before{
  115. position: absolute;
  116. left: -10px;
  117. top: -5px;
  118. width: 0px;
  119. content:"";
  120. transform: scale(1.7, .3);
  121. -webkit-transform: scale(1.7, .3);
  122. -moz-transform: scale(1.7, .3);
  123. -o-transform: scale(1.7, .3);
  124. -ms-transform: scale(1.7, .3);
  125. height: 0px;
  126. border-right: 4px solid #d2dae5;/* CHANGE THE COLOR*/
  127. border-bottom: 17px solid transparent;
  128. border-left: 4px solid transparent;
  129. border-top: 17px solid transparent;
  130. }
  131.  
  132.  
  133.  
  134. ::-webkit-scrollbar-thumb{ background-color:#999; border:4px solid #fff; height:auto; -moz-border-radius:10px; border-radius:10px;}
  135.  
  136. ::-webkit-scrollbar{ height:9px; width:9px; background-color:#d9d9d9; border:4px solid #fff;}
  137.  
  138. body, a, a:hover {cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;}
  139.  
  140. body{
  141. margin:0px;
  142. color: #aaa;
  143. background-attachment: fixed;
  144. padding: 0px;
  145. font-family: "calibri";
  146. background: #fafafa;
  147. }
  148.  
  149.  
  150.  
  151. a:link, a:active, a:visited{cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), auto;
  152.  
  153. color: #d2dae5; /* change the color*/
  154. text-decoration: none;
  155. -webkit-transition: color 0.5s ease-out;
  156. -moz-transition: color 0.5s ease-out;
  157.  
  158. }
  159.  
  160.  
  161. a:hover{cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), auto;color:#d2dae5; /* change the color*/
  162. -webkit-transition-duration: .9s;
  163. -webkit-transition: color 0.3s ease-out;
  164. -moz-transition: color 0.3s ease-out;
  165.  
  166. }
  167.  
  168.  
  169.  
  170. #box{
  171.  
  172.  
  173. box-shadow:rgba(0,0,0,.05) 10px 10px;
  174. background:#fff;
  175.  
  176. position:fixed !important;
  177. width:700px;
  178. background:#d2dae5;/* CHANGE THE COLOR*/
  179.  
  180. height:325px;
  181. outline-offset:-8px;
  182. outline:1px solid #fff;
  183. border:1px solid #fff;
  184. margin-top:120px;
  185. margin-left:305px;
  186. text-align:left;
  187. }
  188.  
  189.  
  190. #linkss{
  191. opacity:1.0;
  192. margin-left:-35px;
  193. margin-top:0px;
  194. position:fixed;
  195. z-index:9;
  196. transition: all 0.9s ease-out;
  197. -o-transition-transition: all 0.9s ease-out;
  198. -webkit-transition: all 0.9s ease-out;
  199. -moz-transition: all 0.9s ease-out;
  200.  
  201.  
  202. }
  203.  
  204.  
  205. #linkss a {
  206. font-family:calibri;
  207. display:inline-block;
  208. padding:5px;
  209. z-index:9;
  210. width:10px;
  211. height:10px;
  212. border-radius:333px;
  213. margin-left:5px;
  214. z-index:99999;
  215. text-align:center;
  216. background:#d2dae5; /* CHANGE THE COLOR*/
  217. margin-top:9px;
  218. border:1px solid #d2dae5;/* CHANGE THE COLOR*/
  219. transition: all 0.5s ease-out;
  220. -o-transition-transition: all 0.5s ease-out;
  221. -webkit-transition: all 0.5s ease-out;
  222. -moz-transition: all 0.5s ease-out;
  223. }
  224.  
  225. #linkss a:hover{
  226. background:transparent;
  227. border:1px solid #eee;
  228. transition: all 0.5s ease-out;
  229. -o-transition-transition: all 0.5s ease-out;
  230. -webkit-transition: all 0.5s ease-out;
  231. -moz-transition: all 0.5s ease-out;
  232. }
  233. @font-face{font-family:Basic bitches;src:url(http://static.tumblr.com/9wzbixa/Cf3mj2g0f/basicl.ttf);}
  234.  
  235. #titulo{
  236. position:fixed !important;
  237. z-index:9999999999999999999999999;
  238. margin-top:-50px;
  239. margin-left:0px;
  240. height:40px;
  241. width:700px;
  242. padding:15px;font-weight:bold;
  243. letter-spacing:1px;
  244. font-family:raleway;
  245. font-size:45px;
  246. text-transform:normal;
  247. color:#fff;
  248. text-shadow:-1px 0 #d2dae5, 0 1px #d2dae5, 1px 0 #d2dae5, 0 -1px #d2dae5;
  249. line-height:10px;
  250. overflow:hidden;
  251.  
  252. -webkit-transition: all .7s ease;
  253. -moz-transition: all .7s ease;
  254. -o-transition: all .7s ease;
  255. transition: all .7s ease;
  256.  
  257.  
  258. }
  259.  
  260. #links{
  261. opacity:1.0;
  262. border:1px double #ddd;
  263. position:fixed !important;
  264. z-index:9999999999999999999999999;
  265. margin-top:20px;
  266. margin-left:18px;
  267. height:260px;
  268. width:380px;
  269. padding:12px;
  270. letter-spacing:1px;
  271. font-family:calibri;
  272. font-size:10px;
  273. text-transform:uppercase;
  274. color:#aaa;
  275. background:white;
  276. -webkit-transition: all .7s ease;
  277. -moz-transition: all .7s ease;
  278. -o-transition: all .7s ease;
  279. transition: all .7s ease;
  280.  
  281. }
  282.  
  283.  
  284. #links a {
  285. font-family:calibri;
  286. display:inline-block;
  287. padding:10px;
  288. z-index:9;
  289. width:155px;
  290. height:12px;
  291.  
  292. margin-left:9px;
  293. z-index:99999;
  294. text-align:center;
  295. background:#d2dae5; /* CHANGE THE COLOR*/
  296. color:#fff; /* CHANGE THE COLOR*/
  297. margin-top:11px;
  298.  
  299. transition: all 0.5s ease-out;
  300. -o-transition-transition: all 0.5s ease-out;
  301. -webkit-transition: all 0.5s ease-out;
  302. -moz-transition: all 0.5s ease-out;
  303. }
  304.  
  305. #links a:hover{border-radius:0px;
  306. background:#fff;color:#d2dae5;/* CHANGE THE COLOR*/
  307. letter-spacing:4px;
  308. box-shadow: 0 0 9px #d2dae5;/* CHANGE THE COLOR*/
  309. transition: all 0.5s ease-out;
  310. -o-transition-transition: all 0.5s ease-out;
  311. -webkit-transition: all 0.5s ease-out;
  312. -moz-transition: all 0.5s ease-out;
  313. }
  314.  
  315. #color{
  316. background-color:#d2dae5;/* CHANGE THE COLOR*/
  317.  
  318. repeat:repeat-x;
  319. width:100%;
  320. height:15px;
  321. border-bottom:5px solid #fff;
  322. position: fixed;
  323. opacity:1;
  324. margin-left:0px;
  325. margin-top:0px;
  326. z-index:99999;
  327. }
  328.  
  329. #tags{
  330. opacity:1.0;
  331. border:1px double #ddd;
  332. position:fixed !important;
  333. z-index:9999999999999999999999999;
  334. margin-top:20px;
  335. margin-left:440px;
  336. height:260px;
  337. width:217px;
  338. padding:12px;
  339. letter-spacing:1px;
  340. font-family:calibri;
  341. font-size:10px;
  342. text-transform:uppercase;
  343. color:#aaa;
  344. overflow:auto;
  345. background:white;
  346. -webkit-transition: all .7s ease;
  347. -moz-transition: all .7s ease;
  348. -o-transition: all .7s ease;
  349. transition: all .7s ease;
  350.  
  351. }
  352.  
  353.  
  354. #tags a {
  355. font-family:calibri;
  356. display:inline-block;
  357. padding:10px;
  358. z-index:9;
  359. width:174px;
  360. height:12px;
  361.  
  362. margin-left:9px;
  363. z-index:99999;
  364. text-align:center;
  365. background:#d2dae5; /* CHANGE THE COLOR*/
  366. color:#fff; /* CHANGE THE COLOR*/
  367. margin-top:12px;
  368.  
  369. transition: all 0.5s ease-out;
  370. -o-transition-transition: all 0.5s ease-out;
  371. -webkit-transition: all 0.5s ease-out;
  372. -moz-transition: all 0.5s ease-out;
  373. }
  374.  
  375. #tags a:hover{border-radius:0px;
  376. background:#fff;color:#d2dae5;/* CHANGE THE COLOR*/
  377. letter-spacing:3px;
  378. box-shadow: 0 0 9px #d2dae5;/* CHANGE THE COLOR*/
  379. transition: all 0.5s ease-out;
  380. -o-transition-transition: all 0.5s ease-out;
  381. -webkit-transition: all 0.5s ease-out;
  382. -moz-transition: all 0.5s ease-out;
  383. }
  384.  
  385.  
  386. </style>
  387.  
  388.  
  389.  
  390. </head>
  391.  
  392. <body>
  393. <div id="color"></div>
  394.  
  395.  
  396.  
  397.  
  398.  
  399. <div id="box">
  400. <div id="linkss">
  401. <a href="/" title="back to my blog"></a><br>
  402. <a href="/ask" title="message me!"></a><br>
  403. <a href="http://planthed.tumblr.com" title="she made this lovely navigation!"></a>
  404. </div>
  405.  
  406. <!--LINKS--->
  407. <div id="titulo">more stuff to discover</div>
  408. <div id="tags">
  409.  
  410. <!--you can add here, so much links as you want:)--->
  411.  
  412. <a href="/">#tag title</a>
  413. <a href="/">#tag title</a>
  414. <a href="/">#tag title</a>
  415. <a href="/">#tag title</a>
  416. <a href="/">#tag title</a>
  417. <a href="/">#tag title</a>
  418. <a href="/">#tag title</a>
  419. <a href="/">#tag title</a>
  420. <a href="/">#tag title</a>
  421. <a href="/">#tag title</a>
  422. <a href="/">#tag title</a>
  423. <a href="/">#tag title</a>
  424. <a href="/">#tag title</a>
  425. <a href="/">#tag title</a>
  426. <a href="/">#tag title</a>
  427.  
  428. <!--you can add here, so much links as you want:)--->
  429.  
  430. </div>
  431. <div id="links">
  432.  
  433. <!--keep it with 12 links only--->
  434. <a href="/">link title</a>
  435. <a href="/">link title</a>
  436. <a href="/">link title</a>
  437. <a href="/">link title</a>
  438. <a href="/">link title</a>
  439. <a href="/">link title</a>
  440. <a href="/">link title</a>
  441. <a href="/">link title</a>
  442. <a href="/">link title</a>
  443. <a href="/">link title</a>
  444. <a href="/">link title</a>
  445. <a href="/">link title</a>
  446. <!--keep it with 12 links only--->
  447.  
  448. </div></div></div>
  449.  
  450.  
  451.  
  452.  
  453. </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!