Forum Home Enhancements - Another Forum Tabs

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

Installtion

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

PHP Code:

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

PHP Code:

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


[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]

Originally Posted by c.c.

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 .

PHP Code:

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

[c.c.]

Originally Posted by 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.

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

[SBlueman]

Originally Posted by 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?