API tools faq
paste
Advertisement
themesbygeorgia

Page 03 -- Navigation

themesbygeorgia
Apr 29th, 2014
931
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.46 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--- Page 03 - Navigation by wonderfullythemes --->
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12. <!--SCRIPT FOR TOOLTIPS-->
  13. <stsss>
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  16. <script>
  17. (function($){
  18. $(document).ready(function(){
  19. $("a[title]").style_my_tooltips({
  20. tip_follows_cursor:true,
  21. tip_delay_time:0,
  22. tip_fade_speed:0,
  23. attribute:"title"
  24. });
  25. });
  26. })(jQuery);
  27. </script>
  28.  
  29. <!--SCRIPT FOR THE SLIDING DROPDOWN MENUS-->
  30. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  31. <script type="text/javascript">
  32. $(document).ready(function(){
  33. $(".links_body").hide();
  34. $(".links_head").click(function(){
  35. $(this).next(".links_body").slideToggle('average');
  36. }); }); </script>
  37. <style type="text/css">
  38. .links_list { margin:0px; padding:0px; width:100%;}
  39. .links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin-left:1px; margin-right:1px;margin-top:1px;margin-bottom:50px;text-align:center;font-size:12px;font-style:italic;letter-spacing:1px;padding:7px;background-color:#000;color:#fff;}
  40. .links_body { padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:30px;margin-top:-30px;text-align:center;display:none;}
  41. </style>
  42.  
  43. <style type="text/css">
  44.  
  45. /*--SCROLLBAR--*/
  46. ::-webkit-scrollbar-thumb {
  47. height:auto;
  48. background-color:#000; /*-- change the colour of the scrollbar here--*/
  49. }
  50.  
  51. ::-webkit-scrollbar {
  52. height:4px;
  53. width:4px;
  54. padding-right:2px;
  55. background-color:#fff; /*--change the colour of the scrollbar background here--*/
  56. }
  57.  
  58. /*--TOOLTIPS--*/
  59. #s-m-t-tooltip {
  60. max-width:200px;
  61. font-family:'pt sans';
  62. font-size:8px;
  63. background-color:#000; /*--change the background colour of the tooltips here--*/
  64. color:#fff; /*--change the font colour of the tooltips here--*/
  65. line-height:9px;
  66. display:none;
  67. position:absolute;
  68. letter-spacing:1px;
  69. text-transform:uppercase;
  70. padding:3px;
  71. margin:15px 0px 0px 15px;
  72. z-index:99999999999999;
  73. }
  74.  
  75. /*--basic font--*/
  76. body {
  77. background:#fff;
  78. margin:0px;
  79. color:#000; /*--change basic text colour--*/
  80. font-family:'calibri';
  81. font-size:11px;
  82. line-height:100%;
  83. font-style: none;
  84. }
  85.  
  86. blockquote {
  87. padding-left:5px;
  88. border-left:2px solid;
  89. }
  90.  
  91. /*--basic image--*/
  92. img {
  93. max-width:100%;
  94. }
  95.  
  96. /*--basic link setup--*/
  97. a:link, a:visited, a:active {
  98. color:#1bcc5c; /*--change the link colour here--*/
  99. text-decoration: none;
  100. font-weight: normal;
  101. -moz-transition-duration:0.7s;
  102. -webkit-transition-duration:0.7s;
  103. -o-transition-duration:0.7s;
  104. }
  105.  
  106. a:hover {
  107. color:#51e5ca; /*--change the link on hover colour here--*/
  108. text-decoration: none;
  109. font-weight: normal;
  110. -moz-transition-duration:0.7s;
  111. -webkit-transition-duration:0.7s;
  112. -o-transition-duration:0.7s;
  113. }
  114.  
  115. /*--MAIN BOX WITH YOUR FAQ & ANSWERS & ASKBOX--*/
  116. #container {
  117. width:420px;
  118. padding:10px;
  119. margin-left:490px;
  120. margin-top:60px;
  121. height:470px;
  122. position:fixed;
  123. }
  124.  
  125. #text {
  126. width:380px;
  127. padding:10px;
  128. height:440px;
  129. overflow-y:scroll;
  130. margin-bottom:10px;
  131. }
  132.  
  133. /*--SET UP FOR THE LINKS IN THE HOVER DOWN THING--*/
  134. #tagscontainer {
  135. display:table;
  136. float:center;
  137. width:100%;
  138. }
  139.  
  140. #tags {
  141. height:100px;
  142. width:100%;
  143. padding:5px;
  144. display:table-cell;
  145. }
  146.  
  147. #tags a {
  148. height:10px;
  149. width:80px;
  150. padding:5px;
  151. display:inline-block;
  152. margin-right:15px;
  153. background-color:#e4e4e4; /*--change the colour of the tags background--*/
  154. text-align:center; /*-- can be changed to "left" "right" or "justify"--*/
  155. color:#1bcc5c; /*--change the colour of the tags here--*/
  156. -moz-transition-duration:0.7s;
  157. -webkit-transition-duration:0.7s;
  158. -o-transition-duration:0.7s;
  159. }
  160.  
  161. #tags a:hover {
  162. color:#51e5ca; /*--change the colour of the tags on hover here--*/
  163. background-color:#000; /*--change the background colour of the tags on hover--*/
  164. letter-spacing:2px; /*--change how much the letters become more apart, if you want them the same then change to 0px --*/
  165. -moz-transition-duration:0.7s;
  166. -webkit-transition-duration:0.7s;
  167. -o-transition-duration:0.7s;
  168. }
  169.  
  170. /*--LINKS TO THE SIDE OF THE MAIN BOX--*/
  171. #otherlinks {
  172. height:370px;
  173. width:200px;
  174. position:fixed;
  175. text-align:right;
  176. padding-top:20px;
  177. padding-right:10px;
  178. margin-top:100px;
  179. margin-left:255px;
  180. border-right:4px solid #000;
  181. }
  182.  
  183. #otherlinks a {
  184. color:#1bcc5c; /*--change the colour of the side links here--*/
  185. line-height:45px;
  186. padding:5px;
  187. width:auto;
  188. text-transform:lowercase;
  189. letter-spacing:2px;
  190. -moz-transition-duration:0.7s;
  191. -webkit-transition-duration:0.7s;
  192. -o-transition-duration:0.7s;
  193. }
  194.  
  195. #otherlinks a:hover {
  196. background-color:#000; /*--change the background colour of the sidelinks on hover--*/
  197. color:#51e5ca; /*--change the colour of the sidelinks on hover--*/
  198. padding-left:30px;
  199. padding-top:5px;
  200. padding-right:5px;
  201. padding-bottom:5px;
  202. letter-spacing:5px;
  203. -moz-transition-duration:0.7s;
  204. -webkit-transition-duration:0.7s;
  205. -o-transition-duration:0.7s;
  206. }
  207.  
  208. /*--TITLE AND MAIN LINKS BELOW THE BOX--*/
  209. #sidebar {
  210. width:380px;
  211. height:50px;
  212. position:fixed;
  213. margin-left:500px;
  214. margin-top:560px;
  215. padding:10px;
  216. z-index:2;
  217. background-color:#fff;
  218. }
  219.  
  220. #title2 {
  221. color:#000; /*--change the title colour here--*/
  222. font-style:italic; /*--can be changed to "none"--*/
  223. font-weight:none; /*-- can be changed to "bold"--*/
  224. letter-spacing:1px;
  225. text-align:left; /*--can be changed to "right" "center" or "justify"--*/
  226. font-size:15px; /*--controls the size--*/
  227. height:20px;
  228. margin-top:-10px;
  229. margin-left:-10px;
  230. background-color:#fff; /*--change the background colour of the title here--*/
  231. padding-top:30px;
  232. padding-right:20px;
  233. padding-bottom:20px;
  234. padding-left:20px;
  235. width:140px;
  236. z-index:3;
  237. }
  238.  
  239. #links {
  240. width:160px;
  241. height:20px;
  242. margin-left:170px;
  243. margin-top:-70px;
  244. position:fixed;
  245. background-color:#fff;
  246. border-left:2px solid #1bcc5c; /*-- change the border width and colour here. "solid" can be changed to "dashed" "double" or "dotted"--*/
  247. padding-top:30px;
  248. padding-right:20px;
  249. padding-left:40px;
  250. padding-bottom:20px;
  251. z-index:6;
  252. }
  253.  
  254. #links a {
  255. width:100px;
  256. overflow:hidden;
  257. color:#1bcc5c; /*--change the colour of the main links here--*/
  258. margin-right:10px;
  259. text-align:left; /*-- can be changed to "center" "right" or "justify"--*/
  260. border-bottom:2px solid transparent; /*-- the "transparent" hides the underline here but shows it on hover--*/
  261. -moz-transition-duration:0.7s;
  262. -webkit-transition-duration:0.7s;
  263. -o-transition-duration:0.7s;
  264. }
  265.  
  266. #links a:hover {
  267. color:#51e5ca; /*--change the colour of the main links on hover here--*/
  268. border-bottom:2px solid #000; /*-- change the width and colour of the underline here. "solid" can be changed to "dashed" "double" or "dotted". if you change the width here make sure to change it in the #links a tag--*/
  269. letter-spacing:2px;
  270. -moz-transition-duration:0.7s;
  271. -webkit-transition-duration:0.7s;
  272. -o-transition-duration:0.7s;
  273. }
  274.  
  275. /*--CREDIT DO NOT REMOVE OR CHANGE--*/
  276. #cred {
  277. position:fixed;
  278. font-family:'calibri';
  279. font-size:8px;
  280. right:9px;
  281. bottom:9px;
  282. padding:4px;
  283. letter-spacing:1px;
  284. }
  285.  
  286. </style></head><body>
  287.  
  288. <!--START OF MAIN BOX-->
  289. <div id="container">
  290. <div id="text">
  291. <div class="links_list">
  292. <p class="links_head">Link/Tags Title</p> <!-- type your desired title where my "Links/Tags Title" is-->
  293. <div class="links_body">
  294. <div id="tagscontainer">
  295. <div id="tags"> <!--CHANGE "URL HERE" TO YOUR DESIRED LINK (/LINK FOR PAGES ON YOUR BLOG, /TAGGED/LINK FOR TAGS, HTTP://LINK FOR OUTSIDE LINKS). CHANGE "link" TO YOUR DESIRED TITLE-->
  296. <a href="URL HERE">link</a>
  297. <a href="URL HERE">link</a>
  298. <a href="URL HERE">link</a><p>
  299. <a href="URL HERE">link</a>
  300. <a href="URL HERE">link</a>
  301. <a href="URL HERE">link</a><p>
  302. <a href="URL HERE">link</a>
  303. <a href="URL HERE">link</a>
  304. <a href="URL HERE">link</a><p>
  305. </div></div>
  306. </div></div>
  307.  
  308. <!--repeat the above instructions for the following boxes-->
  309. <div class="links_list">
  310. <p class="links_head">Link/Tags Title</p>
  311. <div class="links_body">
  312. <div id="tagscontainer">
  313. <div id="tags">
  314. <a href="URL HERE">link</a>
  315. <a href="URL HERE">link</a>
  316. <a href="URL HERE">link</a><p>
  317. <a href="URL HERE">link</a>
  318. <a href="URL HERE">link</a>
  319. <a href="URL HERE">link</a><p>
  320. <a href="URL HERE">link</a>
  321. <a href="URL HERE">link</a>
  322. <a href="URL HERE">link</a><p>
  323. </div></div>
  324. </div></div>
  325.  
  326. <div class="links_list">
  327. <p class="links_head">Link/Tags Title</p>
  328. <div class="links_body">
  329. <div id="tagscontainer">
  330. <div id="tags">
  331. <a href="URL HERE">link</a>
  332. <a href="URL HERE">link</a>
  333. <a href="URL HERE">link</a><p>
  334. <a href="URL HERE">link</a>
  335. <a href="URL HERE">link</a>
  336. <a href="URL HERE">link</a><p>
  337. <a href="URL HERE">link</a>
  338. <a href="URL HERE">link</a>
  339. <a href="URL HERE">link</a><p>
  340. </div></div>
  341. </div></div>
  342.  
  343. <div class="links_list">
  344. <p class="links_head">Link/Tags Title</p>
  345. <div class="links_body">
  346. <div id="tagscontainer">
  347. <div id="tags">
  348. <a href="URL HERE">link</a>
  349. <a href="URL HERE">link</a>
  350. <a href="URL HERE">link</a><p>
  351. <a href="URL HERE">link</a>
  352. <a href="URL HERE">link</a>
  353. <a href="URL HERE">link</a><p>
  354. <a href="URL HERE">link</a>
  355. <a href="URL HERE">link</a>
  356. <a href="URL HERE">link</a><p>
  357. </div></div>
  358. </div></div>
  359.  
  360. <div class="links_list">
  361. <p class="links_head">Link/Tags Title</p>
  362. <div class="links_body">
  363. <div id="tagscontainer">
  364. <div id="tags">
  365. <a href="URL HERE">link</a>
  366. <a href="URL HERE">link</a>
  367. <a href="URL HERE">link</a><p>
  368. <a href="URL HERE">link</a>
  369. <a href="URL HERE">link</a>
  370. <a href="URL HERE">link</a><p>
  371. <a href="URL HERE">link</a>
  372. <a href="URL HERE">link</a>
  373. <a href="URL HERE">link</a><p>
  374. </div></div>
  375. </div></div>
  376.  
  377. <div class="links_list">
  378. <p class="links_head">Link/Tags Title</p>
  379. <div class="links_body">
  380. <div id="tagscontainer">
  381. <div id="tags">
  382. <a href="URL HERE">link</a>
  383. <a href="URL HERE">link</a>
  384. <a href="URL HERE">link</a><p>
  385. <a href="URL HERE">link</a>
  386. <a href="URL HERE">link</a>
  387. <a href="URL HERE">link</a><p>
  388. <a href="URL HERE">link</a>
  389. <a href="URL HERE">link</a>
  390. <a href="URL HERE">link</a><p>
  391. </div></div>
  392. </div></div>
  393.  
  394. <!--NOTE: if you'd like more boxes then copy the following code:
  395.  
  396. <div class="links_list">
  397. <p class="links_head">Link/Tags Title</p>
  398. <div class="links_body">
  399. <div id="tagscontainer">
  400. <div id="tags">
  401. <a href="URL HERE">link</a>
  402. <a href="URL HERE">link</a>
  403. <a href="URL HERE">link</a><p>
  404. <a href="URL HERE">link</a>
  405. <a href="URL HERE">link</a>
  406. <a href="URL HERE">link</a><p>
  407. <a href="URL HERE">link</a>
  408. <a href="URL HERE">link</a>
  409. <a href="URL HERE">link</a><p>
  410. </div></div>
  411. </div></div>
  412.  
  413. below this note but above the </div> tag you see there-->
  414.  
  415.  
  416.  
  417. <!--eg. copy the code over this comment right here-->
  418.  
  419.  
  420. </div>
  421.  
  422. </div>
  423.  
  424. <div id="otherlinks">
  425.  
  426. <!--replace "URL HERE" with your desired URL and replace "link" with your desired title-->
  427. <a href="URL HERE">link</a><br>
  428. <a href="URL HERE">link</a><br>
  429. <a href="URL HERE">link</a><br>
  430. <a href="URL HERE">link</a><br>
  431. <a href="URL HERE">link</a><br>
  432. <a href="URL HERE">link</a><br>
  433. <a href="URL HERE">link</a>
  434. </div>
  435.  
  436. <div id="sidebar">
  437. <div id="title2">Navigation</div> <!--change the title here-->
  438. <div id="links">
  439. <!-- change the following two links to whatever you'd like. if you really want a 3rd link here im ok with you replacing my credit HOWEVER YOU MUST KEEP THE ONE IN THE CORNER (that one will not get in the way of anything i promise you. ofc if you want to keep both thats cool too c:-->
  440. <a href="/">Home</a>
  441. <a href="/faq">FAQ</a>
  442. <a href="http://wonderfullythemes.tumblr.com">Credit</a>
  443. </div>
  444. </div>
  445.  
  446. <div id="cred">
  447. <a href="http://wonderfullythemes.tumblr.com/">THEME</a>
  448. </div>
  449.  
  450. </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!