Tabs at top of this site

[Cooleyvol]

Does anyone have the code for adding the tabbed navigation that exists at the top of this forum?

I'd love to use that sort of navigation for the different sections of my forum.

[romanticyao]

you might want take a look at http://www.dynamicdrive.com/style/

not exactly wut u lookin for but will give u some ideas!

[dj_melayu]

<a href="https://vborg.vbsupport.ru/showthread.php?t=143032" target="_blank">https://vborg.vbsupport.ru/showthread.php?t=143032</a>

[Cooleyvol]

Thanks, but that didnt really tell me how the tabs are added. I understand its in the header template, but does anyone have the instructions on how to write the code.

[tobybird]

Just view the source code of the page for a better understanding... I'm not trying to talk down, but it's all done with simple HTML & CSS.

[4x4 Mecca]

I was searching for this, and figured it out, it takes 1 template edit (navbar) and you have to add some code to the style CSS, then upload 2 images.

[Dismounted]

Actually, one image. That one image has both states of the button. Using CSS, you programmatically change the displayed pixels.

[4x4 Mecca]

2 images if you want the button width to change with the text. That's what I understand anyway.

[dbirosel]

anyone have a step by step tutorial on how to create this for our styles???please!!

[4x4 Mecca]

step one, pick one from here
http://exploding-boy.com/images/cssmenus/menus.html

Step 2, download the pack of menus there from here
http://www.exploding-boy.com/2005/12...ation-designs/ where it says "Download the entire menu set"

upload the images for the style you want to your images folder

Example = tableftC.gif and tabrightC.gif

Edit your styles & templates > style manager > YOUR SKIN > Main CSS
Scroll to the bottom to see "Additional CSS Definitions"
Paste the code for your css menu there.
example:

PHP Code:

 #tabsJ {
      float:right; /* left */
/*      width:100%; */
/*      background:#F4F4F4; */
      font-size:93%;
      line-height:normal;
/*    border-bottom:1px solid #24618E; */
      }
    #tabsJ ul {
    margin:0;
    padding:10px 0px 0 50px;
    list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:right; /* left */
      background:url("images/tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:right; /* left */
      display:block;
      background:url("images/tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      } 


The go to your navbar template and find

	<if condition="$show['member']">
	
		<td class="alt2" valign="top" nowrap="nowrap">

ABOVE THAT PASTE

<div id="tabsJ">
  <ul>
    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=69" title="Buy and Sell with other members here."><span>Classifieds</span></a></li>
    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=133" title="Purchase products for your rig from our vendors!"><span>Vendors</span></a></li>
    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=4" title="Non Tech Forums"><span>Non Tech</span></a></li>
    <li><a href="http://www.YOURFORUM.com/forum/forumdisplay.php?f=1" title="Tech Forums"><span>Tech</span></a></li>
    <li><a href="http://www.YOURFORUM.com/forum/arcade.php" title="Hang out in the Arcade!"><span>Arcade</span></a></li>
    <li><a href="http://www.YOURFORUM.com/forum/" title="The main forum page!"><span>Home</span></a></li>
  </ul>
</div><br><br>

These are the basic instructions, you can use any tabs you'd like.