Forum Home Enhancements - UKBL- Easy Menu Tabs [Archive]

UKBusinessLive

01-03-2009, 10:00 PM

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

https://vborg.vbsupport.ru/external/2009/01/47.png

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

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

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

Then you look for the other one here

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

<ul>

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

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

<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php">Member List</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

https://vborg.vbsupport.ru/external/2009/01/67.png

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

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/showthread.php?p=1704379#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)

</style>
</head>

<body>

<div id="tabsH">
<ul>

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

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

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

Enjoy VBa Members :D

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

https://vborg.vbsupport.ru/external/2010/01/30.png

:D

Changing individual Tab Font Colors

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

Just change the first Value to



So your Menu Line would look something like this

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

https://vborg.vbsupport.ru/external/2009/01/38.png

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

https://vborg.vbsupport.ru/external/2009/01/37.png

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

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

and change it to this

#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

:D

UKBusinessLive

01-04-2009, 06:07 PM

:) Reserved ;)

Fungsten

01-04-2009, 07:46 PM

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.

UKBusinessLive

01-04-2009, 07:50 PM

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

Fungsten

01-04-2009, 07:52 PM

Yes, Correct, sorry for the confusion :o

Thank you.

UKBusinessLive

01-04-2009, 07:57 PM

Thank you.

Thanks, Hope you enjoy it :D

mac-warez

01-04-2009, 08:54 PM

Very Nice. Not for my forums though.

UKBusinessLive

01-04-2009, 09:00 PM

Thanks for the compliment :)

Fungsten

01-05-2009, 05:31 PM

Love the MOD. One question, why aren't the borders/lines showing up around the tab images?

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

There is no border around each of the tabs. TIA.

UKBusinessLive

01-05-2009, 05:34 PM

Love the MOD. One question, why aren't the borders/lines showing up around the tab images?

http://www.itproservices.net/forums/index.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???

:confused:

Fungsten

01-05-2009, 05:39 PM

Thats the default VBulletin forum style, i can't see no tabs in there???

:confused:

Sorry. Now try it. I had that style hidden. :erm:

UKBusinessLive

01-05-2009, 05:47 PM

Sorry. Now try it. I had that style hidden. :erm:

Thats because the url to your .gif files is not right

#tabs1 a {
float:left;
background:url("styles/Experimental/Upload/misc/tableft1.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs1 a span {
float:left;
display:block;
background:url("styles/Experimental/Upload/misc/tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;
}

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

http://yourforum.com/styles/Experimental/Upload/misc/tableft1.gif

Just edit those and it will work :D

Have fun :)

Fungsten

01-05-2009, 06:01 PM

Thats because the url to your .gif files is not right

#tabs1 a {
float:left;
background:url("styles/Experimental/Upload/misc/tableft1.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs1 a span {
float:left;
display:block;
background:url("styles/Experimental/Upload/misc/tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;
}

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

http://yourforum.com/styles/Experimental/Upload/misc/tableft1.gif

Just edit those and it will work :D

Have fun :)

Thank you!!

One more thing I noticed! In Firefox the Logo is pushed way over to the right. TIA.

UKBusinessLive

01-05-2009, 06:29 PM

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

Fungsten

01-05-2009, 06:34 PM

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

:up::up::up::up:

UKBusinessLive

01-05-2009, 06:40 PM

:up::up::up::up:

I can see your happy now :D Try and make your tabs central by editing this

Find in the HTML code

}
#tabs1 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;

in the HTML code and change the 50px value to say 300px, dependant on how many tabs you have an how wide they are, you can centralise them by just playing with this value.

Have Fun ;)

Fungsten

01-05-2009, 06:57 PM

I can see your happy now :D Try and make your tabs central by editing this

Find in the HTML code

}
#tabs1 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;

in the HTML code and change the 50px value to say 300px, dependant on how many tabs you have an how wide they are, you can centralise them by just playing with this value.

Have Fun ;)

You are fantastic!! Nominated too!!

UKBusinessLive

01-05-2009, 07:09 PM

Thanks for that, Glad it works well on your site :D

DanTHEGREAT

01-05-2009, 08:32 PM

Question

My forum is www.freerealmsforums.com

Is there any way to change the color to suit that?

UKBusinessLive

01-05-2009, 08:39 PM

Question

My forum is www.freerealmsforums.com

Is there any way to change the color to suit that?

How about these

https://vborg.vbsupport.ru/external/2009/01/65.png

;)

UKBusinessLive

01-06-2009, 03:30 PM

***************Update**************

Just to let everyone know i will be adding a variety of different styles of tabs this week and i'll be uploading them shortly, This will allow members to select tabs which compliment their forums in all different colors rather than the default Neutral and Black one.

There should be about 30 different styles, so it shouldn't be hard to choose one for your forums.

If anyone needs more info or help to get started, please don't hesitate to post and i'll help where i can.

If you've uploaded your tabs to your site and are happy with them and want to show off :rolleyes: PM me with a link to your site and i'll add it to the Live Demo List to show other members what can be acheived.

Thanks Guys :)

UKBusinessLive

01-07-2009, 05:11 AM

Question

My forum is www.freerealmsforums.com

Is there any way to change the color to suit that?

Hi Dan,

heres are your Zip file for your Custom Tabs

https://vborg.vbsupport.ru/external/2009/01/65.png

Enjoy ;)

dannykilla

01-09-2009, 01:35 PM

small question:

If I wanted to have the tab links to represent the links from the navbar and then remove the links from the navbar, how would you go about register changing to usercp once someone has logged in ?
If this can be done I will definetly use them.

UKBusinessLive

01-09-2009, 02:00 PM

small question:

If I wanted to have the tab links to represent the links from the navbar and then remove the links from the navbar, how would you go about register changing to usercp once someone has logged in ?
If this can be done I will definetly use them.

Hiya :)

Not sure what you mean, I think your saying that you want to use the menu tabs as opposed to the navbar??

Not 100% sure but you could copy all the navbar links and incorporate them into the new menu tabs, USer CP, Register, New Posts etc they can all be incorporated

When you Sign in then perhaps you could have a conditional attached to show tabs for signed in members, I'm not sure how this would be done, perhaps some of the more experianced coders would like to play with the ideas.

Normally what i've found is that if you, just display all the tabs to everyone the if an unregistered member click on say Who's Online, or User CP, Then they would automatically get the Registration Box, If the want to proceed further thats what they need to do Register.

The Idea is really trial and error, Try it and see if it works for you, Its Pretty easy HTML and it just gets pasted to the end of your Header Template, So its not gonna mess up your site or content, If it don't work for you, Just remove it from your Header and Hey Presto, Back to where you were. :D

Keep us up to date with what you decide, it may help others.

:D

cygy2k

01-10-2009, 04:04 PM

Great mod.

My only question is how to center the menu with a fluid style? Your suggestion above doesn't work for different screen sizes/resolutions.

Thanks!

UKBusinessLive

01-10-2009, 04:14 PM

Great mod.

My only question is how to center the menu with a fluid style? Your suggestion above doesn't work for different screen sizes/resolutions.

Thanks!

Thanks :)

The only way i know is how to edit the code as i said, to have it adjustable for every resolution and auto adjusting is a differnt ball game all together.

Thats why in the coding the tabs are over to the right as oppose to being central because of the issue with the resolutions, if anyone has an idea, let me know ;)

cygy2k

01-10-2009, 06:47 PM

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?

UKBusinessLive

01-10-2009, 07:14 PM

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?

Not Sure can you give us a link or screenshot
:confused:

Thanks

cygy2k

01-10-2009, 07:22 PM

No problem, see attached. Thanks!

UKBusinessLive

01-10-2009, 07:34 PM

It looks like you have the tabs at the top of your header :eek:

You need to place the code at the very bottom, Try it and let me know ;)

cygy2k

01-10-2009, 07:40 PM

I tried that too. I'll change it to it right now and take another screenshot.....

cygy2k

01-10-2009, 07:43 PM

Same problem - just now it brings the logo and ad location....

UKBusinessLive

01-10-2009, 08:05 PM

:eek:

I guess its either the vBAdvanced integration, or the Google ad that must somehow interfere with the tabs.

I know its a long shot but i've noticed you have the Archive mod, The numbers at the bottom of youir Homepage footer, Now they are showing in your Header?

if you go to your Admin CP and Plugins & Products>Manage Products

Find that mod and as a temp measure just disable it and then check

;)

https://vborg.vbsupport.ru/external/2009/01/54.png

cygy2k

01-10-2009, 10:21 PM

I went through and disabled everything else I have running with the exception of vBAdvanced. I'm assuminng it's the integration with that as every page that doesn't have vBA integrated appears to be working correctly (Gallery, Social Groups, etc).

cygy2k

01-10-2009, 10:22 PM

vBA has a place to put global variables, is there anything from your mod I could put there to make sure the scripts work together correctly?

UKBusinessLive

01-10-2009, 10:23 PM

I went through and disabled everything else I have running with the exception of vBAdvanced. I'm assuminng it's the integration with that as every page that doesn't have vBA integrated appears to be working correctly (Gallery, Social Groups, etc).

I guess thats the problem, Can you not install it to your Forums as oppose the the VBa home page??

cygy2k

01-10-2009, 10:53 PM

Is there a way to break the CSS part of your mod out and put in the regular CSS area of the Style Editor and have a call to it with the menu links in only the header or wherever? I think the problem revolves around the fact that your mod's HTML includes not typically needed things when using on a page (ie the XHTML info, header/body tags, etc).

UKBusinessLive

01-11-2009, 12:17 AM

I'm not sure on that aspect of it, by all means play around with it and see ;)

blkatt

01-11-2009, 01:10 AM

I like the black tabs menu - but - is there a way to make the background transparent or a different color instead of black? I'm not suggesting changing the color of the tabs - just the background.

Thanks - nice work.:up:

cygy2k

01-11-2009, 01:33 AM

FYI - I moved the CSS info to the style editor "additional css" box and added only the part between the divs (the part that shows the desired links) to the header and it works perfectly. I've seen this sort of thing done on other mods and it is probably the true way of doing it so as to keep the templates as clean as possible.

Either way, it works great!

UKBusinessLive

01-11-2009, 08:26 AM

I like the black tabs menu - but - is there a way to make the background transparent or a different color instead of black? I'm not suggesting changing the color of the tabs - just the background.

Thanks - nice work.:up:

Hi,

Look for this in the html code

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

and change the backround hex color to from #000 (Black) to whatever hex color value you want for example #FFFF (White), Then the long background bar that goes along the full with of your style will be white.

background:#FFFF;

Here is a great Hex Color Chart http://www.2createawebsite.com/build/hex-colors.html

Enjoy :D

UKBusinessLive

01-11-2009, 08:28 AM

FYI - I moved the CSS info to the style editor "additional css" box and added only the part between the divs (the part that shows the desired links) to the header and it works perfectly. I've seen this sort of thing done on other mods and it is probably the true way of doing it so as to keep the templates as clean as possible.

Either way, it works great!

Wow Thats great I will update the thread with this.

Glad it works for you, i knew we'd get there in the end :D:D

blkatt

01-11-2009, 02:02 PM

Hi,

Look for this in the html code

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

and change the backround hex color to from #000 (Black) to whatever hex color value you want for example #FFFF (White), Then the long background bar that goes along the full with of your style will be white.

background:#FFFF;

Here is a great Hex Color Chart http://www.2createawebsite.com/build/hex-colors.html

Enjoy :D

Thanks dude! :up: I'm a newbie of sorts - thanks for the patience.

UKBusinessLive

01-11-2009, 02:34 PM

Thanks dude! :up: I'm a newbie of sorts - thanks for the patience.

No worries, glad to help :D

Dragbike Live

01-17-2009, 06:55 PM

VERY NICE! here is a good example of your code on a black background

www.dragbikelive.com/forums

LOOKS GREAT! LOVE IT!

THANK SOOOOOO MUCH!!!!!!!

QUESTION!

If you wanted to change the color of the text in a single tab...how would you do this?

UKBusinessLive

01-17-2009, 08:54 PM

QUESTION!

If you wanted to change the color of the text in a single tab...how would you do this?

Hi Dragbike,

Glad you liked it, You could add some html markup between the where the tab name is

Just change the first Value to



So your Menu Line would look something like this

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

https://vborg.vbsupport.ru/external/2009/01/38.png

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 :confused: Worth a try ;)

:D

Dragbike Live

01-18-2009, 05:39 PM

Thank You Very Much!!

Love This Mod!

Nominated!

UKBusinessLive

01-18-2009, 05:50 PM

Thanks Buddy,

Your Tabs are looking fantastic now, Love the yellow ;) It highlights that tab just right :D

Have Fun :D

Forum Lover

01-21-2009, 03:10 AM

UKBL, can we put any dropdown there too? Tagged. :)

doraj

01-21-2009, 01:28 PM

Hello Uk,

congratulations for this Mod!

On my forum I use a double navbar and when I add your Men?, it hide my first part of navbar, the more high.
In fact, I have same navbar of your forum (http://www.ukbusinesslive.co.uk/forum/), how can I fix this little problem?

Thank you

detalhe

01-21-2009, 01:33 PM

Marked as instaled and nominated :)

One question, where do I change the style of the text to bold? (black menu)

Thank you!

UKBusinessLive

01-21-2009, 05:08 PM

UKBL, can we put any dropdown there too? Tagged. :)

if you experiment with the CSS, But its not for that i'm afriad ;)

UKBusinessLive

01-21-2009, 05:09 PM

Hello Uk,

congratulations for this Mod!

On my forum I use a double navbar and when I add your Men?, it hide my first part of navbar, the more high.
In fact, I have same navbar of your forum (http://www.ukbusinesslive.co.uk/forum/), how can I fix this little problem?

Thank you

Make sure your code is inserted at the very end of your header template ;)

UKBusinessLive

01-21-2009, 05:22 PM

Marked as instaled and nominated :)

One question, where do I change the style of the text to bold? (black menu)

Thank you!

Thanks detalhe :D

The weight of a font is how dark or light it appears. This also refers to the boldness of a font face, so this is what we need to add to the CSS

The most common font weight to use is "bold". This is a standard font weight determined by the user agent. It is the weight that is generally assigned when you use the or the tags.

It's recommended that you use CSS and the font-weight property rather than the tag:

example......

font-weight: bold;

What we nee to do is to add this request with the spans in the menu links, so change the links you want like this

before...

<li><a href="http://www.ukbusinesslive.co.uk/">UK Business Live</a></li>

and in the first span tag add the fon-weight as above, so you'll end up with something like this...

<li><a href="http://www.ukbusinesslive.co.uk/">UK Business Live</a></li>

That should make that tab's title bold :D

Hope you enjoyed the little lesson there, Thanks again ;)

Forum Lover

01-23-2009, 03:16 AM

if you experiment with the CSS, But its not for that i'm afriad ;)

Copy that chief, but I really need at least one drop down there. :( Any help? :)

UKBusinessLive

01-23-2009, 04:59 AM

Copy that chief, but I really need at least one drop down there. :( Any help? :)

I'd see if i can make a dropdown menu for you later tonight, it might be completely different, so i may have to release it as another hack complete with instructions, wait until i get back from work and i'll have a go doing it for you ;)

:D

gkaradagan

02-24-2009, 10:29 AM

looks good i will use them

NetRover

02-24-2009, 03:08 PM

Hi there, i just added this to a template and the tabs look well hot giving me not ajaxed tabbed forums very easily.

Is it possible to set them active per forums id?

UKBusinessLive

02-24-2009, 04:11 PM

Hi there, i just added this to a template and the tabs look well hot giving me not ajaxed tabbed forums very easily.

Is it possible to set them active per forums id?

If you can do it with an Url, then yes :D

citizenkane

02-25-2009, 07:35 PM

thanksss

CFodder

03-03-2009, 06:52 AM

Another great mod thanks UK, use VBa and did have the same problem as cygy (even though I followed your instructions for it), turns out just copied the text, and including, the div statements only and it worked fine :).

I will prob have a couple of questions for you re it once I progress a bit further with our new site :).

sailfindragon

05-04-2009, 12:08 PM

Hi
I have installed the tab menu and it is looking good, however it does not sit where it should. It currently sits at the top of the box where it says forum.(breadcrumb box)
I want it to sit above this at the bottom half of my header.

I have inserted the code at the very bottom of the header.
And CSS code in Additional CSS.

Any help would grateful. I want to get this sorted before I replace the tabs with my own tabs.

UKBusinessLive

05-04-2009, 01:52 PM

A link to your site or a screenshot will give me a better idea

sailfindragon

05-04-2009, 06:47 PM

A link to your site or a screenshot will give me a better idea

Apologies, I knew I should have provided that! Here it is (https://www.sailfinsims.com/forum/index.php)

UKBusinessLive

05-05-2009, 05:03 AM

If you want to place the tabs below the navbar you could try and add it to your navbar template at the very end (Although i've not tested it!)

AdminCP > Styles & Templates> Style Manager> Your Chosen Style> All style options> Edit templates> Navigation / Breadcrumb Templates> navbar

Problem being if you add it anywhere else like forumdisplay, you'll lose them when you navigate away from your index page.

The thing with your site is you have a lot of black and white and where the tabs go you'd be better using the white ones ;)

sailfindragon

05-05-2009, 04:52 PM

Hi

Thank you for your help. I will certainly try your suggestion, however I have a feeling it will just add it above or below navbar. I was messing about with site colors yesterday, hence there being a lot of black! LOL

Will keep you posted.

thanks

UKBusinessLive

05-05-2009, 09:27 PM

Hi

Thank you for your help. I will certainly try your suggestion, however I have a feeling it will just add it above or below navbar. I was messing about with site colors yesterday, hence there being a lot of black! LOL

Will keep you posted.

thanks

Let me know how you got on ;)

PHILIPS-08

05-11-2009, 07:16 PM

<ul>

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

Add this code to my navbar but it showing like this view my screen shot

>> https://vborg.vbsupport.ru/external/2009/05/117.jpg

high76

05-12-2009, 10:28 AM

that code is incomplete so css isnt loaded.
add before:
<div id="tabsK">
and
</ul>
</div>
after your code.

yotsume

06-02-2009, 07:05 PM

Breadcrumb Box Pushed Right
No matter what code variation I seem to try in my header, it is pushing the box with my breadcrumbs off the screen to the right. How can I fix this?

Here are my site details:
vb3.6.2 (using default style)
vba 3.2.0

Screenshot attached

yotsume

06-02-2009, 08:28 PM

Ok I guess I solved my problem by adding a to your header code at the bottom:
</ul>
</div>
</body>
 
</html>

I then had to change the border-bottom code to: border-bottom:2px solid #0B198C;
This matches the default theme perfect which your color code does not.

Now my next question is how do I get the tabs to be aligned next to the right margin rather than the left side?

Secondly, the first left tab seems to be higlighed in a darker blue even when the mouse is not rolled over it. How can that be fixed so it matches the other tabs?

UKBusinessLive

06-02-2009, 08:37 PM

Hi and thanks for the quick reply with that fix :D

The First tag is always a set color, show people the first one is normally the home tag, But if you don't want that set a static color then you look in the first line of that tags code and just remove

id="current"

From the first tags line of code, so that it matches with the others ;)

yotsume

06-02-2009, 08:54 PM

I will try and remove the first static tab color. It would be best to have the active tab that you switched to be a new color so you can easily see what new page your on. In my mind that is a must change to this mod.

How do I get the tabs to be placed by the right side margin?

yotsume

06-02-2009, 11:18 PM

Aaa my bad I see it now in the css to move the tabs to the right by increasing the % value here: #tabs1 ul { I set mine to 640%. Of course it depends on how many tabs you make. Great Work!

Can we say MOTM?

UKBusinessLive

06-03-2009, 04:58 AM

Aaa my bad I see it now in the css to move the tabs to the right by increasing the % value here: #tabs1 ul { I set mine to 640%. Of course it depends on how many tabs you make. Great Work!

Can we say MOTM?

Glad you got it working right :D

ConfusedCartman

06-29-2009, 02:05 AM

I'm having issues getting this working correctly in Google Chrome. Here's what it looks like for Chrome users:

https://vborg.vbsupport.ru/

Do you have any suggestions on a fix?

EDIT: Just for future reference, I fixed it by adding a simple
 

under the entire thing (between the bottom of the header and the top of the navbar, essentially).

TheLastSuperman

06-29-2009, 02:24 AM

I'm having issues getting this working correctly in Google Chrome. Here's what it looks like for Chrome users:

http://i65.photobucket.com/albums/h230/Wiggles2000/LBP%20Central/Avatars/lbpc.jpg

Do you have any suggestions on a fix?

(Not trying to sound like a TWAT or smart arse but YES - Get rid of Chrome :p....Firefox/IE even Safari but Chrome? You know it installs an updater that runs when and where it chooses amongst other tiny annoyances...)

Looks fine in Firefox (although I saw your tab @ bottom w/ Firefox open)
Looks fine in Internet Explorer
Looks fine in Safari
(Note I left Chrome off the list :p)

But keep in mind many will use it but not all scripts or codes are compatible amongst ALL browsers expecially IE which does not code the way they SHOULD.

S-MAN

ConfusedCartman

07-01-2009, 08:05 AM

(Not trying to sound like a TWAT or smart arse but YES - Get rid of Chrome :p....Firefox/IE even Safari but Chrome? You know it installs an updater that runs when and where it chooses amongst other tiny annoyances...)

Looks fine in Firefox (although I saw your tab @ bottom w/ Firefox open)
Looks fine in Internet Explorer
Looks fine in Safari
(Note I left Chrome off the list :p)

But keep in mind many will use it but not all scripts or codes are compatible amongst ALL browsers expecially IE which does not code the way they SHOULD.

S-MAN

I don't use Chrome - that's a screenshot from a member of mine. I know Chrome's a bit wonky, but I can't leave some members in the dust just because I want a fancy new feature. Anyway, the fix is there (check my original post) if anyone else wants to use it. To the developer of the mod: might be a good idea to include it in the code - it doesn't mess with the display on any browser, and it fixes a potential issue with Chrome. Just sayin'. ;)

ShackMaster

01-13-2010, 07:03 AM

Is it possible to get drop down menus with the drop down arrow to work with these tabs and if so, how?

Thanks!

Devanand

01-27-2010, 04:34 AM

I have problem with IE and Chrome. Pictures will tell you everything.

Chrome

https://vborg.vbsupport.ru/external/2010/01/21.jpg

IE

https://vborg.vbsupport.ru/external/2010/01/22.jpg

Edit:

I did what ConfusedCartman said and fix problem in chrome but in IE I still have that bug.
The problem in IE is that he put it above $spacer_open but I don't understand why just IE and how to fix this problem.

mithotyn

07-04-2010, 03:41 PM

Thanks for this but id="current is not working!

On my site is only the first tab highlighted but not the selected!

Gamelobby

08-06-2010, 07:12 AM

Why is this happening..?

I have tried everything listed in almost every post in this thread.
I used to use this mod a long time ago on another skin, but now i just cant figure out why it is extending all the way to the edges..

Thanks

PS. also any way to move it lower.?

Gamelobby

08-07-2010, 05:14 AM

Great mod.

My only question is how to center the menu with a fluid style? Your suggestion above doesn't work for different screen sizes/resolutions.

Thanks!

This is my problem too..

I got the tabs to look ok, but the background is float:left & i cant get it to center, because float:center is not a CSS code.!!

Gamelobby

08-08-2010, 11:02 PM

I managed to get those problems sorted, but in the process i may have caused another issue.
I put the code in my ad banner template, & it is shifted to the side on a few different screens, & anytime if you are using FireFox.?

Any help is appreciated.

Thanks

maxie

08-13-2010, 05:58 AM

i think you need to save the HTML then upload same as the location of images.

viper357

04-29-2011, 10:06 AM

Could someone please help me with the CSS on this mod, I haven't got a clue. :p I am wanting to make the font size smaller on the tabs, I could swear I have changed every single number in this code but nothing makes the text size smaller. Thanks. :)

/* ***** tabs in header ***** */
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
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%;
font-size:93%;
line-height:normal;
}
#tabs1 ul {
margin:0;
padding:0px 0px 0px 1px;
list-style:none;
}
#tabs1 li {
display:inline;
margin:0;
padding:0;
}
#tabs1 a {
float:left;
background:url("http://www.marineaquariumsa.com/images/tableft1.gif") no-repeat left top;
margin:0;
padding:0 1px 0 4px;
text-decoration:none;
}
#tabs1 a span {
float:left;
display:block;
background:url("http://www.marineaquariumsa.com/images/tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#627EB7;
}
#tabs1 a:hover {
background-position:0% -42px;
}
#tabs1 a:hover span {
color:#000000;
background-position:100% -42px;
}

#tabs1 #current a {
background-position:0% -42px;
}
#tabs1 #current a span {
background-position:100% -42px;
}

yotsume

04-29-2011, 01:30 PM

Isn't the text size controlled by your VB's style and not the menu code... I think that is your problem being able to adjust the size. You might have to add in more code to the tabs to give you individual control.