Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
UKBL- Easy Menu Tabs Details »
UKBL- Easy Menu Tabs
Mod Version: 1.00, by UKBusinessLive (Designer) UKBusinessLive is offline
Developer Last Online: Feb 2012 I like it Show Printable Version Email this Page

vB Version: 3.8.0 RC 2 Rating: (5 votes - 4.80 average) Installs: 61
Released: 04 Jan 2009 Last Update: 06 Jan 2009 Downloads: 499
Not Supported Template Edits Re-usable Code Translations  

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Then you look for the other one here


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
http://www.vbulletin.org/forum/showt...79#post1704379

vBAdvanced Integration

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

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)


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

So your Menu Line would look something like this


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and change it to this


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Major Additions Innovative Mouseover Tabs Menu 3.8 TheLastSuperman vBulletin 3.8 Add-ons 29 29 Nov 2010 05:27
Major Additions Innovative Mouseover Tabs Menu 3.7.x TheLastSuperman vBulletin 3.7 Add-ons 16 24 Dec 2008 03:40
Major Additions Innovative Mouseover Tabs Menu 3.6.x TheLastSuperman vBulletin 3.6 Add-ons 3 29 Nov 2008 05:52

Comments
  #2  
Old 04 Jan 2009, 20:07
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Reserved
Reply With Quote
  #3  
Old 04 Jan 2009, 21:46
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Question. What do you mean by "save and upload the HTML to the header of your style"? Do you mean to copy and paste into the header template? TIA.
Reply With Quote
  #4  
Old 04 Jan 2009, 21:50
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Originally Posted by Fungsten View Post
Question. What do you mean by "save and upload the HTML to the header of your style"? Do you mean to copy and paste into the header template? TIA.
Yes, Correct, sorry for the confusion
Reply With Quote
  #5  
Old 04 Jan 2009, 21:52
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Originally Posted by UKBusinessLive View Post
Yes, Correct, sorry for the confusion
Thank you.
Reply With Quote
  #6  
Old 04 Jan 2009, 21:57
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Originally Posted by Fungsten View Post
Thank you.
Thanks, Hope you enjoy it
Reply With Quote
  #7  
Old 04 Jan 2009, 22:54
mac-warez mac-warez is offline
 
Join Date: Oct 2008
Real name: Tyler
Very Nice. Not for my forums though.
Reply With Quote
  #8  
Old 04 Jan 2009, 23:00
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Thanks for the compliment
Reply With Quote
  #9  
Old 05 Jan 2009, 19:31
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Love the MOD. One question, why aren't the borders/lines showing up around the tab images?

http://www.itproservices.net/forums/...php?styleid=10

There is no border around each of the tabs. TIA.
Reply With Quote
  #10  
Old 05 Jan 2009, 19:34
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Originally Posted by Fungsten View Post
Love the MOD. One question, why aren't the borders/lines showing up around the tab images?

http://www.itproservices.net/forums/...php?styleid=10

There is no border around each of the tabs. TIA.
Thats the default VBulletin forum style, i can't see no tabs in there???

Reply With Quote
  #11  
Old 05 Jan 2009, 19:39
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Originally Posted by UKBusinessLive View Post
Thats the default VBulletin forum style, i can't see no tabs in there???

Sorry. Now try it. I had that style hidden.
Reply With Quote
  #12  
Old 05 Jan 2009, 19:47
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Originally Posted by Fungsten View Post
Sorry. Now try it. I had that style hidden.
Thats because the url to your .gif files is not right


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Where you have styles/Experimental/Upload/misc/tableft1.gif, Thats not correct you need to use the full url for example


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Just edit those and it will work

Have fun
Reply With Quote
  #13  
Old 05 Jan 2009, 20:01
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Originally Posted by UKBusinessLive View Post
Thats because the url to your .gif files is not right


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Where you have styles/Experimental/Upload/misc/tableft1.gif, Thats not correct you need to use the full url for example


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Just edit those and it will work

Have fun
Thank you!!

One more thing I noticed! In Firefox the Logo is pushed way over to the right. TIA.
Reply With Quote
  #14  
Old 05 Jan 2009, 20:29
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Real name: Gerry
Try putting the code at the very end of your style header template as oppose to the top and see if that makes a difference
Reply With Quote
  #15  
Old 05 Jan 2009, 20:34
Fungsten Fungsten is offline
 
Join Date: Jul 2006
Originally Posted by UKBusinessLive View Post
Try putting the code at the very end of your style header template as oppose to the top and see if that makes a difference
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 04:15.

Layout Options | Width: Wide Color: