API tools faq
paste
thewisepotato

Bars Navigation Page

thewisepotato
Feb 6th, 2014
2,507
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>{Title} | navigation</title>
  6. <meta name="description" content="{MetaDescription}" />
  7. <link rel="shortcut icon" href="{Favicon}" />
  8.  
  9. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  10. <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
  11.  
  12. <style type="text/css">
  13. * {-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
  14.  
  15. a,a:link,a:visited,a:hover,a:active {text-decoration: none; font-size: 0.6em;}
  16.  
  17. body {
  18. background-color: #f0f0f0 /*CHANGE THE BACKGROUND COLOR*/;
  19. background-image: url(BACKGROUND IMAGE URL HERE - OPTIONAL);
  20. font-family: Lekton /*CHANGE THE FONT FAMILY*/;
  21. }
  22.  
  23. #overlord {position:fixed;top:70px;left:100px;}
  24.  
  25. #mothership {float:left;border:solid 1px #000000;width:320px;height:450px;text-align:center;padding:4px;
  26. background-color:white /*CHANGE THE BACKGROUND COLOR OF THE BOX ON THE LEFT*/ ;
  27. color:black /*CHANGE THE FONT COLOR OF THE BOX ON THE LEFT*/ ;
  28. }
  29.  
  30. #info {float:left; height:389px; width:150px; padding:5px; text-align:justify; font-size:0.7em; overflow:hidden; line-height:120%;}
  31.  
  32. #info img {width:150px;height:220px;margin-bottom:5px;}
  33.  
  34. #info a {font-size:1em;padding:1px 5px;
  35. background-color:black /*CHANGE THE BACKGROUND COLOR OF DESCRIPTION LINKS*/ ;
  36. color:white /*CHANGE THE FONT COLOR OF DESCRIPTION LINKS*/ ;
  37. }
  38.  
  39. #info a:hover {
  40. color:black /*CHANGE THE HOVER FONT COLOR OF DESCRIPTION LINKS*/ ;
  41. background-color:transparent /*CHANGE THE HOVER BACKGROUND COLOR OF DESCRIPTION LINKS*/ ;
  42. }
  43.  
  44. #box {float:left; padding:0 5px; margin-top:-5px; width: 150px; text-align: center;}
  45.  
  46. h3 {margin:5px 5px;padding: 3px 5px;border-left: solid 75px;border-right: solid 75px;
  47. color: #000000 /*CHANGE THE COLOR OF THE TITLE*/;
  48. border-color: #FFD4E8 /*CHANGE THE COLOR OF THE SQUARE NEXT TO THE TITLE*/;
  49. }
  50.  
  51. h3:hover {border-width:50px;}
  52.  
  53. #nav {margin:0 5px;padding-bottom: 4px;
  54. background-color: #FFD4E8 /*CHANGE THE BACKGROUND COLOR OF THE NAVIGATION*/;
  55. font-family: calibri;
  56. }
  57.  
  58. #nav a {padding: 0 1px;
  59. color: #000000 /*CHANGE THE COLOR OF THE NAVIGATION LINKS*/;
  60. }
  61.  
  62. #nav a:hover {
  63. color: #ffffff /*CHANGE THE HOVER COLOR OF THE NAVIGATION LINKS*/;
  64. }
  65.  
  66. #tag {display: table-cell; vertical-align: middle; height: 387px; padding-top: 5px;}
  67.  
  68. #intag {overflow: scroll; width: 150px; max-height: 387px;}
  69.  
  70. #tag a {margin: 5px 0;padding: 5px;text-decoration: none;display: block;text-transform: uppercase;border-left: solid 1px transparent;
  71. background-color: #000000 /*CHANGE THE BACKGROUND COLOR OF THE LINKS*/;
  72. color: #ffffff /*CHANGE THE FONT COLOR OF THE LINKS*/;
  73. }
  74.  
  75. #tag a:last-child {margin-bottom: 0;}
  76.  
  77. #tag a:hover {border-left: solid 25px;
  78. border-color: #FFD4E8 /*CHANGE THE HOVER COLOR OF THE LINK BORDER*/;
  79. color: #FFD4E8 /*CHANGE THE FONT HOVER COLOR OF THE LINKS*/;
  80. }
  81.  
  82. #pvframe {height:457px; width:730px; border: solid 1px #000000; position:relative; left:343px;
  83. background-color: #ffffff /*CHANGE THE BACKGROUND COLOR OF THE PREVIEW BOX*/;}
  84.  
  85. #iframe {position:relative; top:-171px; left:-274px;}
  86.  
  87. #iframe iframe {height:800px; width:1280px; opacity: 0.7; position:absolute; top:0; left:0; border:none; -webkit-transform:scale(0.57, 0.57); -moz-transform:scale(0.57, 0.57); -ms-transform:scale(0.57, 0.57); -o-transform:scale(0.57, 0.57); transform:scale(0.57, 0.57);}
  88.  
  89. #pv {font-size: 0.7em;position: absolute;top: 0;left: 0;padding: 4px;border-radius: 0 0 3px 0; z-index: 9999; -webkit-box-shadow: 1px 1px 9px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 1px 9px rgba(50, 50, 50, 0.75);box-shadow: 1px 1px 9px rgba(50, 50, 50, 0.75);
  90. background-color: #000000 /*CHANGE THE BACKGROUND COLOR OF THE LITTLE BOX THAT SAYS PREVIEW*/ ;
  91. color: #ffffff /*CHANGE THE FONT COLOR OF THE LITTLE BOX THAT SAYS PREVIEW*/ ;
  92. }
  93.  
  94. .sh {-webkit-box-shadow: 3px 3px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 3px 9px rgba(50, 50, 50, 0.75); box-shadow: 3px 3px 9px rgba(50, 50, 50, 0.75);}
  95.  
  96. {CustomCSS}
  97. </style>
  98.  
  99. <script type="text/javascript">
  100. $(document).ready(function(){
  101. function onHover() {
  102. $('#iframe').html('<iframe src="' + $(this).attr('href') + '"></iframe>');
  103. };
  104. function onLeave() {
  105. $('#iframe').html('');
  106. }
  107. $('.link').each(function(){
  108. $(this).hover(onHover,onLeave);
  109. });
  110. });
  111. </script>
  112.  
  113.  
  114. </head>
  115. <body>
  116.  
  117. <div id="overlord">
  118.  
  119. <div id="mothership" class="sh">
  120.  
  121. <h3>Navigation</h3>
  122.  
  123. <div id="nav">
  124. <a href="/">back</a>
  125. <a href="/ask">ask</a>
  126. <a href="/archive">archive</a>
  127. <a href="http://tumblr.com">dashboard</a>
  128. <a href="http://syntaxthemes.tumblr.com">©</a>
  129. </div>
  130.  
  131.  
  132. <div id="info">
  133. <!--INFORMATION IMAGE WILL AUTOMATICALLY BE RESIZED TO 150x220 PX-->
  134. <img src="INFORMATION IMAGE URL HERE"/>
  135.  
  136. <p>This is your description. It can be long, but don't make it too long, otherwise it'll get cut off.</p>
  137. <p><strong>Bold</strong>, <u>underline</u>, <em>italics</em>, and <a href="//themesbytwp.tumblr.com">links</a> look like this.</p>
  138.  
  139. </div>
  140.  
  141. <div id="box">
  142.  
  143. <div id="tag">
  144. <div id="intag">
  145.  
  146. <!--FEEL FREE TO ADD OR REMOVE AS MANY LINKS AS YOU WANT, BUT MAKE SURE TO ADD THE CLASS. HEADINGS CAN BE ADDED BETWEEN ANY LINKS.-->
  147. <a class="link" href="/">home</a>
  148. <a class="link" href="/ask">ask</a>
  149. <a class="link" href="/archive">archive</a>
  150. <a class="link" href="/tagged/theme">themes</a>
  151. <a class="link" href="/submit">submit</a>
  152. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  153. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  154. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  155. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  156. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  157. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  158. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  159. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  160. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  161. <a class="link" href="LINK URL HERE">LINK TITLE HERE</a>
  162.  
  163.  
  164. </div> <!--intag-->
  165. </div> <!--tag-->
  166.  
  167. </div> <!--box-->
  168.  
  169. </div><!--mothership-->
  170.  
  171. <div id="pvframe" class="sh">
  172. <div id="pv">preview</div>
  173. <div id="iframe"></div>
  174. </div>
  175.  
  176. </div><!--overlord-->
  177.  
  178. <!------DO NOT REMOVE THE CREDIT. DOING SO WOULD MAKE YOU A THIEF.------->
  179. <a href="http://syntaxthemes.tumblr.com">
  180. <img style="position:fixed; bottom:0; right:0; display:block; opacity:0.7; margin:0; z-index:999999999999!important;" onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=0.7" src="http://static.tumblr.com/puls2hm/QOHn1brjx/st.png"/></a>
  181. <!----------------------------------THANK-------------------------------->
  182.  
  183. </body>
  184. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!