vb.org Archive - Forum Home Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Forum Home Enhancements - UKBL- Easy Menu Tabs (https://vborg.vbsupport.ru/showthread.php?t=200684)

UKBL- Easy Menu Tabs

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

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

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

Code:

So your Menu Line would look something like this

Code:

<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

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

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

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

:D

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.

Quote:

Originally Posted by Fungsten (Post 1701628)

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

Quote:

Originally Posted by UKBusinessLive (Post 1701635)

Yes, Correct, sorry for the confusion :o

Thank you.

Quote:

Originally Posted by Fungsten (Post 1701638)

Thank you.

Thanks, Hope you enjoy it :D

Very Nice. Not for my forums though.

Thanks for the compliment :)

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.

Quote:

Originally Posted by Fungsten (Post 1702484)

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

:confused:

Quote:

Originally Posted by UKBusinessLive (Post 1702490)

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:

Quote:

Originally Posted by Fungsten (Post 1702495)

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

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

Code:

   #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

Code:

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

Just edit those and it will work :D

Have fun :)

Quote:

Originally Posted by UKBusinessLive (Post 1702502)

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

Code:

   #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

Code:

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.

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

Quote:

Originally Posted by UKBusinessLive (Post 1702532)

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:

Quote:

Originally Posted by Fungsten (Post 1702536)

: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

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

Quote:

Originally Posted by UKBusinessLive (Post 1702543)

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

Find in the HTML code

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

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

Question

My forum is www.freerealmsforums.com

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

Quote:

Originally Posted by DanTHEGREAT (Post 1702621)

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

;)

***************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 :)

Quote:

Originally Posted by DanTHEGREAT (Post 1702621)

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

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.

Quote:

Originally Posted by dannykilla (Post 1706281)

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

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!

Quote:

Originally Posted by cygy2k (Post 1707440)

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

Quote:

Originally Posted by cygy2k (Post 1707641)

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

Thanks

No problem, see attached. Thanks!

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

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

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

: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

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

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?

Quote:

Originally Posted by cygy2k (Post 1707864)

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

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

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

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:

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!

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02679 seconds Memory Usage 1,868KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (16)bbcode_code_printable (18)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: