vBulletin LTS

UKBL- Easy Menu Tabs
Mod Version: 1.00, by UKBusinessLive

UKBL- Easy Menu Tabs

Now works on 3.5.x

Credits: Christopher Ware ~ Thanks

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.

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

Members Site Live Demo's:
http://www.gamelobby.com/Forum/
http://www.itproservices.net/forums/index.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..

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

Then you look for the other one here

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

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 <Span> you write the name of the tab, Easy

if you want extra tabs just add another line like this

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

Spoiler (click to open)

UKBL- Easy Menu Tabs Collection 1

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/index.php?styleid=10

Hi Everyone, Thanks for all you Emails and comments and by popular demand here is the UKBL- Easy Menu Tabs Collection Vol 1, 10 of our most popular tabs In a variety of different styles to suit your Forums.

IMPORTANT: Please check out the UKBL- Easy Menu Tabs in the Mod forums for a full set of instructions on how to install these menu tabs, They involve very little editing and a couple of simple graphics uploads, Look at the 3.7.x version here UKBL- Easy Menu Tabs

Works in all versions from 3.5.x upto 3.8.x

So, this is our Tabs Collection Vol 1 See the pictures below, You can simply download the zip file, please read up the instaruction in the above mod page, any other problems post here.

Tab 1
Sliding Doors


Tab 2
Rounded Top


Tab 3
Plain Menu



Tab 4
Horizontal Brown



Tab 5
Navy Blue



Tab 6
Dark Blue



Tab 7
Black Tabs



Tab 8
Neutral Blue (Ideal for Default VBulletin Forums)



Tab 9
Black Gray



Tab 10
Small Green



So thats it, You've got a nice selection of 10 different styles of tabs, complete with their coding. You need to simply edit the coding with the instructions on the mod page and then Just cut and paste the contents of the HTML file to the very end of your styles header template. On some tab designs you may need to upload the .gif's to your forums image/misc folder or you could even upload it to photobucket, it really is that simple.

Zips are in the above orderwith the same name so download what you need

lets hope this makes your forum just that little bit better, Enjoy

Please don't forget to click installed if you use any of these tabs, and hey, why don't you post a link back to your site to show off your new feature

Take care now

Attached Files

	Slilding_Doors.zip (10.4 KB, 58 views)
	Rounded_Top.zip (18.3 KB, 74 views)
	Plain Menu.zip (9.1 KB, 40 views)
	Horizontal brown.zip (4.3 KB, 35 views)
	navy blue.zip (15.4 KB, 91 views)
	Dark Blue.zip (7.1 KB, 99 views)
	Black_Tabs.zip (3.2 KB, 86 views)
	tab_menu_1.zip (21.8 KB, 49 views)
	Black_Gray.zip (4.4 KB, 68 views)
	Small Green.zip (9.7 KB, 47 views)

Close

vBAdvanced Integration

Ther seem to be a slight problem with users that use 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)

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




Changing individual Tab Font Colors

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

Just change the first <Span> Value to

So your Menu Line would look something like this



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

You need to add a span attribute to the CSS



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

and change it to this

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