UKBL- Easy Menu Tabs

M

MobileHacks

New Member
DEMO: Demo Tabs

Members Site Live Demo's:
Gamelobby - Powered by vBulletin
http://www.itproservices.net/forums/...php?styleid=10

tabmenu1fm5.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..
PHP: 
 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
PHP: 
 background:url("http://i4875.photobucket.com/albums/rr1/ukbusinesslive/tableft1.gif") no-repeat left top;
Then you look for the other one here
PHP: 
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
PHP: 
                       <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
blacktabsjs8.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

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)
PHP: 
</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

newqs3.png


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
PHP: 
<span style="color:Green">
So your Menu Line would look something like this
PHP: 
<li><a href="http://www.ukbusinesslive.co.uk/topsite/"><span style="color:Green">Forums Topsite</span></a></li>
spanzr7.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 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

hexcolorro7.png


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

PHP: 
   #tabs1 a:hover {
      background-position:0% -42px;
      }
and change it to this
PHP: 
#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
 
I'm sorry to be such a pest, but after I edit the HTML, how exactly do I install this onto the forum?

I have only been at this a week, Having a blast at it, but sometimes I feel a little lost.

Any information on how to install the HTML onto the forum would be great.

This place rocks!!
 
You must log in or register to reply here.
Back
Top