The Arcive of Official vBulletin Modifications Site.

Another Forum Tabs · **Released**: 03-21-2009

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>

powerful_rogue · #32 04-21-2009, 02:31 PM

Quote:

Originally Posted by 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 · #33 04-23-2009, 10:26 AM

Quote:

Originally Posted by powerful_rogue

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

try this :

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: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 · #34 04-28-2009, 12:48 AM

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

s2lo7 · #35 04-29-2009, 02:20 PM

good

DanielN24 · #36 04-30-2009, 01:49 AM

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 · #37 05-05-2009, 01:44 PM

Quote:

Originally Posted by isatice

try this :

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: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 · #38 05-10-2009, 08:46 PM

I copy this code to navbar

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>

after i save it i am viewing like this

any one please help..

powerful_rogue · #39 05-11-2009, 01:13 PM

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

EG -

Quote:

#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 · #40 05-12-2009, 09:23 AM

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:

PHP Code:


			
#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 · #41 06-25-2009, 04:16 PM

Looks cool...

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05109 seconds Memory Usage 2,378KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (3)bbcode_code (3)bbcode_php (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (1)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!