Another Forum Tabs

[vibedream]

Another Forum Tabs
http://vibe.vn/photo/u1a205p2725/tab.png

Installtion

- Upload vibetab.gif to images/
- Edit template / Additional CSS Definitions add :

#vibetab
{
margin:5px 0 0 0px;
height:29px;
font-weight:bold;
}
#vibetab a
{
color:white;
background:url(../images/vibetab.gif) 0% 0% no-repeat;
text-decoration: none;
padding-left: 6px;
margin:0;
height:29px;
outline:0;
}
#vibetab a span
{
background: url(../images/vibetab.gif) 100% 0% no-repeat;
padding: 9px 12px 0 4px;
height:29px;
cursor: pointer;
}
#vibetab a, #vibetab a span
{
display: block;
float: left;
}
#vibetab a#active_menutopnav
{
color: black;
background:url(../images/vibetab.gif) 0% 44% no-repeat;
}
#vibetab a#active_menutopnav span
{
background: url(../images/vibetab.gif) 100% 50% no-repeat;
}
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
background: url(../images/vibetab.gif) 100% 100% no-repeat;
}

#vibetab ul
{
list-style: none;
padding: 0;
margin: 0;
}
#vibetab li
{
float: left;
margin: 0;
}

Add to template you want :

<div id="vibetab">
<ul>
<li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Mods</span></a></li>
<li><a href="#"><span>Styles</span></a></li>
<li><a href="#"><span>Graphic</span></a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li><a href="#"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
</ul>
</div>

[DanTHEGREAT]

What does this mod actually do?

[Sweeks]

I think what it does is fairly obvious. It is a form of navigation.
________
THE CIGAR BOSS (http://thecigarboss.com/)

[ArnyVee]

Is there a demo to see the functionality of the tabbed approach?

[c.c.]

Are the tabs below the logo at the top of the page? I've been trying to find this mod forever. An example as what I'm looking for is the tabs that vbulletin.org has on top of their page. does this mod do that????

i would like to add tabs on top of my page.


www.highdefjunkies.com

[vibedream]

Are the tabs below the logo at the top of the page? I've been trying to find this mod forever. An example as what I'm looking for is the tabs that vbulletin.org has on top of their page. does this mod do that????

i would like to add tabs on top of my page.


www.highdefjunkies.com

http://vibe.vn/members/shine/albums/skinsshare/2760-demos.png


header template find :
<!--/ logo -->
add :
<div id="vibetab">
<ul>
<li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Mods</span></a></li>
<li><a href="#"><span>Styles</span></a></li>
<li><a href="#"><span>Graphic</span></a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li><a href="#"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
</ul>
</div>

If you want add to above navbar, navbar template find :
<!-- / breadcrumb, login, pm info -->

add bellow

<div id="vibetab">
<ul>
<li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Mods</span></a></li>
<li><a href="#"><span>Styles</span></a></li>
<li><a href="#"><span>Graphic</span></a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li><a href="#"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
</ul>
</div>

Change ur link.

[c.c.]

That's what I'm looking for thanks man!

[tipu sulthan]

look like good

[c.c.]

That's what I'm looking for thanks man!

I use VBadvanced, so do I need to make any changes with those templates?

[vibedream]

I use VBadvanced, so do I need to make any changes with those templates?

No problem, or header or navbar

[c.c.]

How do you change the colors to fit your site. The green doesn't really mesh with my site.

[Jasem]

Good work, thank you......

Installed

[vibedream]

How do you change the colors to fit your site. The green doesn't really mesh with my site.

You need change green to white like active .
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 44% no-repeat;
}

[c.c.]

Doesn't look that bad at all...

www.highdefjunkies.com

[SBlueman]

Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.

[RobbieZ]

I like it. :D

[c.c.]

Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.

That would be huge for me also. I tried to change the colors of the gif but couldn't get the colors rights.

[SBlueman]

Is there a way to allow CSS to define the colors of the tab images instead of having to use the default .gif file? I have about 35 css defined skins on my site.

Just wondering if the author or anyone else knew the answer to this.

[Macs]

this would be great if it could be done as a auto template for us not so hot on editing templates im sure many people are looking for a mod like this

[powerful_rogue]

Fantastic add on! Thank you!

Ive currently got this on top of the navbar - would there be an easy way to allign this in the center of the navbar?

[forumsonsuz]

thank you

[blackwolf062]

thanks installed works great.

for those who wanted different colours for buttons

although i only have one skin i change the button colours by using photo shop

[SBlueman]

right....but I have about 35 css defined skins on my site. Does that mean I need to have 35 .gif files and edit the mod in each skin to call up each different color?

[Brandon Sheley]

anyone know how I can kill the space under the tabs (http://forum.vbulletinsetup.com/index.php?styleid=20)?

[JohorBahru]

how to set it aligned with the right side instead of left side??

[Brandon Sheley]

how to set it aligned with the right side instead of left side??

edit the CSS, change "left" to "right"
that's what I did :up:

[JohorBahru]

edit the CSS, change "left" to "right"
that's what I did :up: but I would still like to move it to the left a few pixels

thank you :)

[powerful_rogue]

Seem to have a small problem with this in IE. Ive attatched a screenshot if anyone would be able to help!

Its the first tab, "Home" which dosent seem to display properly

[oskqqqq]

installed but my active tab doesnt change.. pls help

this is my forum (http://www.kankaforum.gen.tr)

[trickfly]

any screens or demo ?

[powerful_rogue]

Seem to have a small problem with this in IE. Ive attatched a screenshot if anyone would be able to help!

Its the first tab, "Home" which dosent seem to display properly

Bump, Any help would be great. Shows fine in FF, just damn IE!

[isatice]

Bump, Any help would be great. Shows fine in FF, just damn IE!

try this :


#vibetab
{
margin:5px 0 0 0px;
height:29px;
font-weight:bold;
}
#vibetab a
{
color:white;
background:url(../images/vibetab.gif) 0% 0% no-repeat;
text-decoration: none;
padding-left: 6px;
margin:0;
height:29px;
outline:0;
}
#vibetab a span
{
background: url(../images/vibetab.gif) 100% 0% no-repeat;
padding: 9px 12px 0 4px;
height:20px;
cursor: pointer;
}
#vibetab a, #vibetab a span
{
display: block;
float: left;
}
#vibetab a#active_menutopnav
{
color: black;
background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
background: url(../images/vibetab.gif) 100% 89% no-repeat;
}
#vibetab ul
{
list-style: none;
padding: 0;
margin: 0;
}
#vibetab li
{
float: left;
margin: 0;
}

[mrtroybaker]

Awsome man. Just great.
Is there a way to use an image? I tried to change the gif but nothing changed.

[s2lo7]

good

[DanielN24]

How would I make it so that when you click on it, it automatically loads without having to change to a new page..

Kinda like here

http://sportstwo.com/forums/
and
http://www.dailysportspages.com/forums/

[powerful_rogue]

try this :


#vibetab
{
margin:5px 0 0 0px;
height:29px;
font-weight:bold;
}
#vibetab a
{
color:white;
background:url(../images/vibetab.gif) 0% 0% no-repeat;
text-decoration: none;
padding-left: 6px;
margin:0;
height:29px;
outline:0;
}
#vibetab a span
{
background: url(../images/vibetab.gif) 100% 0% no-repeat;
padding: 9px 12px 0 4px;
height:20px;
cursor: pointer;
}
#vibetab a, #vibetab a span
{
display: block;
float: left;
}
#vibetab a#active_menutopnav
{
color: black;
background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 89% no-repeat;
}
#vibetab a:hover span
{
background: url(../images/vibetab.gif) 100% 89% no-repeat;
}
#vibetab ul
{
list-style: none;
padding: 0;
margin: 0;
}
#vibetab li
{
float: left;
margin: 0;
}

Hi,

Really sorry about not replying soon, ive been away for a bit.

Ive tried using the code above, but for some reason the text in the first tab still looks out of place in IE. Looks brillaint in FF, just not IE!

Any other tips you may have would be greatly appreciated!

[PHILIPS-08]

I copy this code to navbar <div id="vibetab">
<ul>
<li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Mods</span></a></li>
<li><a href="#"><span>Styles</span></a></li>
<li><a href="#"><span>Graphic</span></a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li><a href="#"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
</ul>
</div>

after i save it i am viewing like this https://vborg.vbsupport.ru/external/2009/05/124.jpg

any one please help..

[powerful_rogue]

I had similar problem. Its to do with the image link in the css

EG -

#vibetab
{
margin:5px 0 0 0px;
height:29px;
font-weight:bold;
}
#vibetab a
{
color:white;
background:url(../images/vibetab.gif) 0% 0% no-repeat;
text-decoration: none;
padding-left: 6px;

Go through and put a direct link in to the image and it should work.

[franzis]

Hello,

because the self-manufactured Tab drafts, so vibetab.gif always somewhat delayed, because I want to ask what the percentages are exactly the effect.

For example:
#vibetab a#active_menutopnav
{
color: black;
background:url(../images/vibetab.gif) 0% 45% no-repeat;
}
#vibetab a#active_menutopnav span
{
background: url(../images/vibetab.gif) 100% 45% no-repeat;
}
#vibetab a:hover
{
color: white;
background:url(../images/vibetab.gif) 0% 89% no-repeat;
}


If now background: url(../images/vibetab.gif) 100% 45% no-repeat;
an amendment to background: url(../images/vibetab.gif) 100% 60% no-repeat;
is made, what happens there, the percentages with the image and its position to do?

I just want to understand and perfect this great mod to use, hence my question.

Apologies my English, I hope you can understand what I want ;)


LG Franzis

[ubcforums]

Looks cool...

[belindazhu]

i met a problem.
My forum is fixed in width as 980px, but when I open my forum, the tags is floated on left, not in the same verticle line with body. how to resolve it?

https://vborg.vbsupport.ru/

[deadlySniper]

This is great, thanks. But I have a different one that's just text :D

[DNG]

nice,, thanks

[Mellymonster]

Is there away to have a tab that only staff can see and members cannot see?

[bobster65]

Is there away to have a tab that only staff can see and members cannot see?

Ya, just wrap the <li> that you want "hidden" with a template conditional.. just replace 5,6 with the user group IDs that you want to be able to SEE the Tab


<if condition="is_member_of($vbulletin->userinfo, 5,6)">
<li><a href="#"><span>Page 3</span></a></li>
</if>

[Mellymonster]

Oh thank you so much for the quick response.

[Mellymonster]

For some reason, in IE this is what it looks like... I am not a regular IE user, but a member brought it to my attention

https://vborg.vbsupport.ru/external/2009/09/23.png

[1320Nation]

Is there anyway to set this mod up so that when a tab is clicked on it opens up a new window so it doesn't pull the viewer away from our website?

[Hi-Jack]

Hi guys, i don't want this tab to show on my portal, only the forums. When placing it in the FORUMHOME template section it only shows up there and not on the forumdisplay... Se where should i add the code for the tabs?

[Limode]

Hi guys, i don't want this tab to show on my portal, only the forums. When placing it in the FORUMHOME template section it only shows up there and not on the forumdisplay... Se where should i add the code for the tabs?

Easy, real this : http://www.vbulletin.com/docs/html/template_conditionals
<if condition="THIS_SCRIPT != 'your portal' ''>
<div id="vibetab">
<ul>
<li><a href="#" id="active_menutopnav"><span>Portal</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Mods</span></a></li>
<li><a href="#"><span>Styles</span></a></li>
<li><a href="#"><span>Graphic</span></a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li><a href="#"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
</ul>
</div>
</if>

[RedHacker]

Can create Threads but not show in etg Forum 1 but i the Forum 2 Tab ....?

[RedHacker]

When check tab not show white for understand who tab you are.....

[crazymilk]

Great mod ty

[crazymilk]

How would i add dropdown menu to this?

[yotsume]

<font color="DarkRed">Question</font>: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

[RedHacker]

Question: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

Yes, how can vibedream ...?

[1320Nation]

Is there anyway to set this mod up so that when a tab is clicked on it opens up a new window so it doesn't pull the viewer away from our website?

Is it not possible to have the tabs open a new browser?

[RedHacker]

Is it not possible to have the tabs open a new browser?

target="_blank"

[yotsume]

UNINSTALLED!

I am going with the bomb of menu systems here instead:

UKBL ~ Quality Drop Down Menu System
https://vborg.vbsupport.ru/showthread.php?t=203521

[RedHacker]

This modification supported......................................... .......?

[Limode]

Question: How can we change the color of the active tab that we have click on? I would also like to show that tab a bit raised up.

Can both of these effects be done?

You need use condition.

[RedHacker]

You need use condition.

How.....?

[RedHacker]

Please how to know who tab show when doing click....?

[RedHacker]

How to disable color white backkground.....?

[Limode]

How to disable color white backkground.....?

Design new images.

[RedHacker]

How to find foor change colors....?

[FRANKTHETANK 2]

i cant get images. aka tabs to show. ive tried cmod and everything and i added full path to CSS, still nothen? help please

[decca87]

same here my directory is public html/forum/images/vibetab.gif no matter what i try no images even if i try the default /images/vibetab.gif :(

[RedHacker]

I think not support from author

[decca87]

he maybe on holiday he hasnt been online since september he has answered others im sure he will answer us we just have to be patient :)

[Numenorean7]

These tabs are great!

Thanks a lot!

[RedHacker]

These tabs are great!

Thanks a lot!

If had white background

[GSeybold]

Sorry to bother but I need help with this mod. Where does the cascade styling sheet go and where does the html page go? :o Sorry> Tech knob here:D

[jacko_162]

it shows fine in FF but IE shows it as a bullet point list?

i tried changing;
../images/vibetab.gif

to

http://www.myforumaddress.com/images/vibetab.gif

and it still shows this way. the code looks straight and i dont see why it doesnt work in IE

[bluej]

very nice mod, thank you :)

[DrIpac]

i met a problem.
My forum is fixed in width as 980px, but when I open my forum, the tags is floated on left, not in the same verticle line with body. how to resolve it?

http://www.jiangsuexpat.com/attachment.php?attachmentid=279&thumb=1&d=1246291137

same problem :confused:

[COL NIL SATIS]

works great..thank you..installed

[ShackMaster]

Sorry... my goof... spoke too soon.

Is there a way to get the drop down menus to work with the tabs?

[farazfaraz]

Demo?
Scrren Shot?