Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.7 > vBulletin 3.7 Template Modifications

Reply
 
Thread Tools
UKBL- Easy Menu Tabs Details »»
UKBL- Easy Menu Tabs
Version: 1.00, by UKBusinessLive UKBusinessLive is offline
Developer Last Online: Feb 2012 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 3.7.4 Rating:
Released: 01-03-2009 Last Update: 01-05-2009 Installs: 25
Template Edits
Re-useable Code  
No support by the author.

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

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

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #52  
Old 01-28-2009, 07:41 AM
GSeybold GSeybold is offline
 
Join Date: Dec 2007
Posts: 473
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Okay I'm lost now. Where do I find this html code? In what template?

Sorry
Reply With Quote
  #53  
Old 01-28-2009, 01:38 PM
Vaupell's Avatar
Vaupell Vaupell is offline
 
Join Date: Apr 2008
Location: Esbjerg, Denmark
Posts: 1,036
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

en teori it shoundt matter where you place the tabs,
but for them to be on all pages, header = on top of all.

But how you get this working beats me
Added the CSS in additional css styles,

and added the code at the end of the header

tadaa it just lists as <li> normally would do haha

anyway great mod for those that got it working.

saw a forum who had the tabs right above the forums them selfs instead of in the header. lovely.
Reply With Quote
  #54  
Old 01-28-2009, 02:06 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by GSeybold View Post
Okay I'm lost now. Where do I find this html code? In what template?

Sorry
Gabby the HTML file is in the Zip file for download in the first page of this thread.

You need to open this so you can edit it, You can open it in Notepad, or Word

Then the next thing to do is add the urls of where you placed your graphic files

finally, you need to edit the Menu links at the bottom of this file

When you've done all this you need to highlight all the code and then copy (Right mouse click on hightlight)

Next you need to add the code to the header template of your chosen style, Do this in the admin CP, Go to the end of the header template and Click Paste

Thats it really,

If you still have problems, PM me your links, and the url's of youir ghapic files and i'll do it for you
Reply With Quote
  #55  
Old 01-28-2009, 03:34 PM
thewoodwhispere thewoodwhispere is offline
 
Join Date: Oct 2008
Posts: 1
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It seems that the problem also exists in Chrome, as well as Safari. I have the same issue as brvheart, only mine throws the login box and directory tree to the right.
Reply With Quote
  #56  
Old 01-28-2009, 03:56 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by thewoodwhispere View Post
It seems that the problem also exists in Chrome, as well as Safari. I have the same issue as brvheart, only mine throws the login box and directory tree to the right.
Thanks for letting me know, I'm going to see what i can do to test it in chrome and safari, It would have to happen on the two browsers i never use

I'll keep you updated on this

Have you had it running ok on IE and firefox ??
Reply With Quote
  #57  
Old 01-29-2009, 01:49 AM
brvheart's Avatar
brvheart brvheart is offline
 
Join Date: Jul 2005
Posts: 477
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I am still trying to find this - it would seem simple to me - but it is kicking my tail - I think that I am over complicating this....
Reply With Quote
  #58  
Old 01-29-2009, 05:00 AM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by brvheart View Post
I am still trying to find this - it would seem simple to me - but it is kicking my tail - I think that I am over complicating this....
I'm still looking at it it may just need a slight adjustment in the code but as i don't use chrome or safari, its hard for me to check
Reply With Quote
  #59  
Old 01-30-2009, 06:09 PM
freewilley's Avatar
freewilley freewilley is offline
 
Join Date: Jan 2009
Posts: 106
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

dude can u provide me with pink ones? I really love this tabs it makes my job a lot easier when compared to other tab modifications we have over here! great job dude 5 stars and I am nominating this mod !
Reply With Quote
  #60  
Old 01-30-2009, 06:27 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by freewilley View Post
dude can u provide me with pink ones? I really love this tabs it makes my job a lot easier when compared to other tab modifications we have over here! great job dude 5 stars and I am nominating this mod !
Hi Freewilley

You didn't say if you wanted dark pink or light pink so i did both

Dark Pink



Light Pink



They are both in the zip attachment below

Have fun
Reply With Quote
  #61  
Old 01-30-2009, 06:37 PM
freewilley's Avatar
freewilley freewilley is offline
 
Join Date: Jan 2009
Posts: 106
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by UKBusinessLive View Post
Hi Freewilley

You didn't say if you wanted dark pink or light pink so i did both

Dark Pink



Light Pink



They are both in the zip attachment below

Have fun
wow thank you so much!! dude!! it really helps
Reply With Quote
Reply

Thread Tools

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

Forum Jump


All times are GMT. The time now is 09:33 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05225 seconds
  • Memory Usage 2,329KB
  • 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
  • (10)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
  • (4)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