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/15/free-css-navigation-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:

#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.

[dbirosel]

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/15/free-css-navigation-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:

#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.
Omgg!!! Thanks so much! im happy i have something to work on right now. lol. you should have this added on the 3.6 template section on vb.org.

[4x4 Mecca]

If you can follow the directions and they work for you, then I will :) I don't think I wrote them very well.

[dbirosel]

<a href="http://www.caraudiojunkyard.com/forum" target="_blank">www.caraudiojunkyard.com/forum</a> i think i messed up somewhere. the tabs don't look like tabs for some reason.

[4x4 Mecca]

they look alright to me, you can move them too if you want. Or change the image files colors.

[dbirosel]

We have some browser problems:

IE = tabs have a gap between the tabs and navbar
Opera = Looks great
Firefox = tabs are on top of the navbar

I get the same results from your forum too.

bump!! Can anyone help with the browser issues?

[4x4 Mecca]

maybe we can mess with the location more then. They look fine in my IE 7 and firefox.. never tried opera

[dbirosel]

I found out it also depend on your resolution. How can we fix this problem?

http://www.caraudiojunkyard.com/forum/16976-post6.html

[4x4 Mecca]

The resolution is only a problem because of the amount of tabs and the width of the text on them. I would design the tabs around a 800x600 res computer. If you wanted to get deep into it, you could make a profile field option for displaying every tab, that way they only see the ones they choose to see.

[dbirosel]

The resolution is only a problem because of the amount of tabs and the width of the text on them. I would design the tabs around a 800x600 res computer. If you wanted to get deep into it, you could make a profile field option for displaying every tab, that way they only see the ones they choose to see.
Yea i got a couple people with 800x600 having problems. Any other fixes? :(

[4x4 Mecca]

Find another css menu online with smaller square type buttons, not the rounded ones? Theres no simple answers because you have so many buttons and some wide text ones.

[valdet]

Thanks for awesome tips Mecca.

[ericgtr]

Excellent tab setup here 4x4, thanks a lot for taking the time to explain this for us.

[dvsDave]

unfortunately, it doesn't appear to work with IE 8 Beta. Can someone check their install of this to see what it's doing?

[Dismounted]

Have you turned on the IE 7 Compatibility mode option inside the Admin CP?

[dvsDave]

Have you turned on the IE 7 Compatibility mode option inside the Admin CP?

Where is that?

[Dismounted]

vBulletin Options > Server Settings (IIRC)

[UKBusinessLive]

To get the link to open in a new browser window, what you do is add the target="_blank" attribute to your link tag, like this in your Menu Links area

<li><a href="http://www.ukbusinesslive.co.uk/" target="_blank"><span>UK Business Live</span></a></li>

If you do that to the ones that you want to open in a new window, then you don't navigate away from your site ;)

:D