The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
UKBL- Easy Menu Tabs Details »» | |||||||||||||||||||||||||||
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; Code:
background:url("http://i4875.photobucket.com/albums/rr1/ukbusinesslive/tableft1.gif") no-repeat left top; Code:
background:url("tabright1.gif") no-repeat right top; 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> 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> 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:
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> 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"> 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:
Dependant on what tab design you are using, find the following in the code Code:
#tabs1 a:hover { background-position:0% -42px; } Code:
#tabs1 a:hover span { color:#000000; background-position:0% -42px; } Just change this color hex to whatever hex color you want Enjoy Show Your Support
|
Comments |
#22
|
|||
|
|||
Quote:
Been trying to edit the gifs with that color hex but its not quite working, may need to tweak a bit beore finally mastering the art, However I've build a new set of tabs based on the dark blue of your hex. let me know what you think |
#23
|
|||
|
|||
Perfect. Colors are fine. Thanks you for your great work.
|
#24
|
|||
|
|||
Quote:
Glad you liked it :up: |
#25
|
||||
|
||||
Just a question!
Which would have put the code "<center>" buttons to focus. I am working to give a new format to my forum and I find this very interesting modification Congratulations! |
#26
|
|||
|
|||
Quote:
I think you mean how do you center the tabs ?? You need to change the value in Red, By trial and error, until you see the buttons in the Center. It will vary from forum to forum as people may have different button sizes and the amount of tabs may vary, so you need to edit this part of the code (in red) to centralise your tabs Quote:
Hope that helps |
#27
|
||||
|
||||
It's perfect!
If I need to put more buttons and modify this information to my taste Thanks for the work Congratulations! |
#28
|
|||
|
|||
Quote:
Just add another line of code under your button menu's like this Code:
<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php"><span>Member List</span></a></li> Enjoy |
#29
|
|||
|
|||
Quote:
For instance, my resolutions is 1152x864. If I make the adjustments, won't it look wierd on yours if you are set to 800x600? |
#30
|
|||
|
|||
Yes thats why i don't save the code centralised by default, but if people want to put their tabs in the center, then at least they'll know what value to change in the code, Like you said different resolutions will make a difference, what it boils down is personal preference, i guess.
|
#31
|
|||
|
|||
***************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 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 |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|