The Arcive of Official vBulletin Modifications Site.

UKBL- Easy Menu Tabs · **Released**: 01-03-2009

UKBL- Easy Menu Tabs

I've been playing around with creating some Menu Tabs for the top of the forums, These ones do not mess up your CSS or use Javascript and you can have it set up and running on your forums in minutes.

Credits: Christopher Ware ~ Thanks

DEMO: http://www.ukbusinesslive.co.uk/forum/demo.html

Members Site Live Demo's:
http://www.gamelobby.com/Forum/
http://www.itproservices.net/forums/...php?styleid=10

I've done this in a neutral color, so it'll be fine for light colored forums, I will add some darker ones and a black one later if requested

So what do you do???

Installation is sooooo simple your gonna love this, First you need to open the html file with notepad or similar, and make a few edits, Mainly the location of the 2 gif's and the links to the urls or onsite links.

so in Note pad look for this..

Code:

 background:url("tableft1.gif") no-repeat left top;

and change the word tableft1.gif to the directory you have your images in, if you use photobucket or a similar storage site then your code would look something like this

Code:

 background:url("http://i4875.photobucket.com/albums/rr1/ukbusinesslive/tableft1.gif") no-repeat left top;

Then you look for the other one here

Code:

background:url("tabright1.gif") no-repeat right top;

and basically do the same as the first edit.

So thats it with the gif edits, you still need to scroll further down to the menu edits

here

Code:

                       <ul>
                                <!-- CSS Tabs -->
<li id="current"><a href="http://www.ukbusinesslive.co.uk/topsite/"><span>Forums Topsite</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/group.php?"><span>Social Groups</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/online.php?"><span>Who's Online</span></a></li>
<li><a href="http://astore.amazon.co.uk/ukbuli-21"><span>UKBL Bookstore</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/usercp.php"><span>Your CP</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php"><span>Member List</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/"><span>UK Business Live</span></a></li>

basically you can have as many tabs as you need and you change the navigation from the top code, its pretty easy to do, First you add the Url of the site or link that you want tabbed, Then paste it to the first part of the tab, Then after you write the name of the tab, Easy

if you want extra tabs just add another line like this

Code:

<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php"><span>Member List</span></a></li>

Cut and Paste the HTML Code to the header template of your style, and upload the gifs to your chosen directory, be it /images/misc or even photobucket.

For Dark Colored Sites

If your Site is Black or has a Black Background you'll want black tabs like this

Then you'll have to Download the Black_ Tabs.zip This include a new code that you need to edit as well as the 2 Black Gifs to get the correct colour. Instructions are the same as above

Please Click install if you like it

If you want to see a nice collection of downloadable Menu Tabs, Veiw My Post in the Graphics forum, and download what you need

https://vborg.vbsupport.ru/showthrea...79#post1704379

vBAdvanced Integration

Ther seem to be a slight problem with users that use vBAdvanced Integration

Quote:

A problem I'm having when I put this in the header template is that I click on a thread and it comes up with the menu tabs down where the thread should be instead of the thread.

Could it be a problem with having vBAdvanced integration?

The cure is quite simple, all you need to do when you've edited your code is to cut it in half and put the CSS element into the additional CSS box in your Style manger's "additional CSS" box, Then the last bit, the part which contains the menu links (See below)

Code:

</style>
                </head>

                <body>
                        
                        <div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="http://www.ukbusinesslive.co.uk/topsite/"><span>Forums Topsite</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/group.php?"><span>Social Groups</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/online.php?"><span>Who's Online</span></a></li>
<li><a href="http://astore.amazon.co.uk/ukbuli-21"><span>UKBL Bookstore</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/usercp.php"><span>Your CP</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php"><span>Member List</span></a></li>
<li><a href="http://www.ukbusinesslive.co.uk/"><span>UK Business Live</span></a></li>

                                </ul>
                        </div>
                </body>
</html>

Thats the part which just goes at the VERY end of your header.

Enjoy VBa Members

To Open in new Browser Window

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">UK Business Live</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

Changing individual Tab Font Colors

You can add some html markup between the where the tab name is

Just change the first Value to

Code:

<span style="color:Green">

So your Menu Line would look something like this

Code:

<li><a href="http://www.ukbusinesslive.co.uk/topsite/"><span style="color:Green">Forums Topsite</span></a></li>

Hope that helps, just change the color Green, for a color of your choice

You could use a tab with a different color text to point to your Paypal Account and call it donations

Worth a try

Tab Color Changes on Hover

Quote:

I have a request though

if you can make the current page's tab be in another color just like when hover it, it will be great.
just like vbulletin.org here.
you can see it yourself

You need to add a span attribute to the CSS

Dependant on what tab design you are using, find the following in the code

Code:

   #tabs1 a:hover {
      background-position:0% -42px;
      }

and change it to this

Code:

#tabs1 a:hover span {
       color:#000000;
      background-position:0% -42px;
      }

Where #000000 (hex Code for Black) is the new color that you want, so now you should have the tabs show up as normal and when you hover the cursor over them with the above hex code the text will be BLACK

Just change this color hex to whatever hex color you want

Enjoy

Gamelobby · #12 01-05-2009, 12:23 AM

I dont mean to be a pain, but what is different in the code besides the img urls..?
If i change the name of the images it should work.. or no.?

My problem is if i re edit the code it will end up being identical to the code that is currently there..!?

Sorry, im confused.

UKBusinessLive · #13 01-05-2009, 12:29 AM

Quote:

Originally Posted by Gamelobby

I dont mean to be a pain, but what is different in the code besides the img urls..?
If i change the name of the images it should work.. or no.?

My problem is if i re edit the code it will end up being identical to the code that is currently there..!?

Sorry, im confused.

My fault, You shouldn't use the same code for the black tabs as the white ones, as the fonts and colors are different, I've updated the new html code for the black tab buttons.

Made you a set that should go ok with your site, You do need to use the Code that came with it for it to work correctly, and upload your color gifs to whatever directory you have them loaded. (Basically its doing it again from scratch, but you can cut and paste your menu code at the end, saves you editing too much)

Hope this helps

Gamelobby · #14 01-05-2009, 12:30 AM

I'll give it a go..

UKBusinessLive · #15 01-05-2009, 01:21 AM

Now thats better

http://www.gamelobby.com/Forum/

Forum Lover · #16 01-05-2009, 01:58 AM

Quote:

Originally Posted by UKBusinessLive

Now thats better

http://www.gamelobby.com/Forum/

Another nice hack from UKB

Wonder if it turns to be selected. I mean, if u click "360" tab for example and when it goes to that link, the "360" tab needs to be different color that mean selected.

Do u get it what I mean UKB?

Tagged.

Gamelobby · #17 01-05-2009, 03:35 AM

Yea the grey color shoud be on the current tab.. but other than that it works great.!!
Installed clicked.!!

UKBusinessLive · #18 01-05-2009, 05:04 AM

Quote:

Originally Posted by Forum Lover

Another nice hack from UKB

Wonder if it turns to be selected. I mean, if u click "360" tab for example and when it goes to that link, the "360" tab needs to be different color that mean selected.

Do u get it what I mean UKB?

Tagged.

Thanks,

If you hover over the "360" tab the color changes the same as the "Home" tab, By default the home tab stays the same "Darker" Color but you can remove this by deleting this from the first line of links in the code (Marked in red for ease!)

Quote:

<li id="current"><a href="http://www.ukbusinesslive.co.uk/topsite/">Forums Topsite</a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/group.php?">Social Groups</a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/online.php?">Who's Online</a></li>
<li><a href="http://astore.amazon.co.uk/ukbuli-21">UKBL Bookstore</a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/usercp.php">Your CP</a></li>
<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php">Member List</a></li>
<li><a href="http://www.ukbusinesslive.co.uk/">UK Business Live</a></li>

Hope that helps

soundbarrierpro · #19 01-05-2009, 04:26 PM

Hi, very easy and very functional. I like it thank you. I want to change the color of the tabs from the powder blue though. Just the outline of the tabs. Do I need to find new tabs or can it be done in the script?

Thanks for the good work *INSTALLED*

UKBusinessLive · #20 01-05-2009, 04:35 PM

Quote:

Originally Posted by soundbarrierpro

Hi, very easy and very functional. I like it thank you. I want to change the color of the tabs from the powder blue though. Just the outline of the tabs. Do I need to find new tabs or can it be done in the script?

Thanks for the good work *INSTALLED*

Cheers Buddy

Just change the color of the .gifs and in the script you change the hex # of the color, you can change the color of the text and type of text too see below for a snipet of code to edit for the above

Code:

{
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

img {
border: none;
}



    #tabs1 {
      float:left;
      width:100%;
          background:#F4F7FB;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #BCD2E6;

or you can tell me the colors you want and i'll make it for you

Take care

soundbarrierpro · #21 01-05-2009, 04:52 PM

Hi, it's not working for me in the script. If you could make exactly what you have in your demo but with this color as the tab outline #0B198C.

Thank you, greatly appreciated

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05841 seconds Memory Usage 2,341KB Queries Executed 25 (?)
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 (11)bbcode_code (7)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (3)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 (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_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!