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 |
#52
|
|||
|
|||
Okay I'm lost now. Where do I find this html code? In what template?
Sorry |
#53
|
||||
|
||||
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. |
#54
|
|||
|
|||
Quote:
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 |
#55
|
|||
|
|||
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.
|
#56
|
|||
|
|||
Quote:
I'll keep you updated on this Have you had it running ok on IE and firefox ?? |
#57
|
||||
|
||||
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....
|
#58
|
|||
|
|||
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
|
#59
|
||||
|
||||
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 !
|
#60
|
|||
|
|||
Quote:
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 |
#61
|
||||
|
||||
wow thank you so much!! dude!! it really helps
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|