PDA

View Full Version : Forum Home Enhancements - UKBL- Easy Menu Tabs


UKBusinessLive
01-03-2009, 10:00 PM
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/index.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..

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

background:url("http://i4875.photobucket.com/albums/rr1/ukbusinesslive/tableft1.gif") no-repeat left top;


Then you look for the other one here

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

<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

<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

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/showthread.php?p=1704379#post1704379

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)

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

https://vborg.vbsupport.ru/external/2010/01/30.png

:D
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

<span style="color:Green">


So your Menu Line would look something like this

<li><a href="http://www.ukbusinesslive.co.uk/topsite/"><span style="color:Green">Forums Topsite</span></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

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

#tabs1 a:hover {
background-position:0% -42px;
}



and change it to this

#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

UKBusinessLive
01-04-2009, 06:11 PM
:) Reserved :cool:

Gamelobby
01-04-2009, 10:38 PM
This looks like something VERY cool, but why aren't they on your forums...?
Is there any bugs.?

And which html file do we open in notepad.? (an existing one from our boards, or one in this zip folder)

Thanks

UKBusinessLive
01-04-2009, 10:48 PM
This looks like something VERY cool, but why aren't they on your forums...?
Is there any bugs.?

And which html file do we open in notepad.? (an existing one from our boards, or one in this zip folder)

Thanks

I don't use them on my forum as i already have a double navbar :D I tested them out on my forum as you can see below

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

But it looks a bit overkill with the double navbar

The one which you edit is the tab_menu_1.zip That has the HTML code to edit, That zip alone will just use the light colored tabs, If you have a black or darker forum then you need to also download the Black_Tabs.zip. This has the Black Gif's which you need to use in place of the ones in the first zip.

Thats it really

:)

Gamelobby
01-04-2009, 11:30 PM
Save and upload the html to the header of your style, and upload the gifs to your chosen directory, be it /images/misc or even photobucket.

Ok im ready to upload, but im not sure where to upload it..? (where in "header")
Is this a file on my server or in the styles manager.?

Also my site has a skin/mod on it, that might make this not work.. any thoughts before i even try it.? :D (besides back it up. lol)

*edit*
I think this wont work for me unless i can add the code to my current code rather than overwrite it.
(i have a menu up top that needs to stay)

UKBusinessLive
01-04-2009, 11:49 PM
Ok im ready to upload, but im not sure where to upload it..? (where in "header")
Is this a file on my server or in the styles manager.?

Also my site has a skin/mod on it, that might make this not work.. any thoughts before i even try it.? :D (besides back it up. lol)

*edit*
I think this wont work for me unless i can add the code to my code rather than over write my code.
(i have a menu up top that needs to stay)

The HTML code, once edited with your details and the url of the gif's, you need to cut and paste it to the end of your Header Template right at the very bottom, You won't be over writing anything.

AdminCP>Styles & Templates>Style Manager>YOUR STYLE>Header template

Thats it really, Just make sure its the header template of the style your using, should work a treat.

let me know how you got on ;)

Just put them on my forum so you can see http://www.ukbusinesslive.co.uk/forum/index.php

Gamelobby
01-05-2009, 12:00 AM
Awesome it works like a charm.. but i think i need to make some new buttons. lol
Actually the black ones might work better.. eitherway it does work great.!!

Thanks

Gamelobby
01-05-2009, 12:06 AM
So the black tabs are named different so they need a new html..!?
Cant i just re name them, & upload over the original ones.?

UKBusinessLive
01-05-2009, 12:13 AM
Great news, Looking at your site just now, made me do some Black and Gray buttons for you, should look better, You'll need to edite the code again, Just cut and paste from your original and replace the code that you have in your header at the moment, Don't forget the url of the gif's

;)

UKBusinessLive
01-05-2009, 12:14 AM
So the black tabs are named different so they need a new html..!?
Cant i just re name them, & upload over the original ones.?

I'll Check on that, See that zip i've just done for you that might be better :D

Gamelobby
01-05-2009, 12:23 AM
I dont mean to be a pain, but what is different in the code besides the img urls..?
If i change the name of the images it should work.. or no.?

My problem is if i re edit the code it will end up being identical to the code that is currently there..!?

Sorry, im confused.

UKBusinessLive
01-05-2009, 12:29 AM
I dont mean to be a pain, but what is different in the code besides the img urls..?
If i change the name of the images it should work.. or no.?

My problem is if i re edit the code it will end up being identical to the code that is currently there..!?

Sorry, im confused.

My fault, You shouldn't use the same code for the black tabs as the white ones, as the fonts and colors are different, I've updated the new html code for the black tab buttons.

Made you a set that should go ok with your site, You do need to use the Code that came with it for it to work correctly, and upload your color gifs to whatever directory you have them loaded. (Basically its doing it again from scratch, but you can cut and paste your menu code at the end, saves you editing too much)

Hope this helps ;)

Gamelobby
01-05-2009, 12:30 AM
I'll give it a go.. :)

UKBusinessLive
01-05-2009, 01:21 AM
Now thats better :D:D http://www.gamelobby.com/Forum/

Forum Lover
01-05-2009, 01:58 AM
Now thats better :D:D http://www.gamelobby.com/Forum/

Another nice hack from UKB :) Wonder if it turns to be selected. I mean, if u click "360" tab for example and when it goes to that link, the "360" tab needs to be different color that mean selected.

Do u get it what I mean UKB? :) Tagged.

Gamelobby
01-05-2009, 03:35 AM
Yea the grey color shoud be on the current tab.. but other than that it works great.!!
Installed clicked.!!

UKBusinessLive
01-05-2009, 05:04 AM
Another nice hack from UKB :) Wonder if it turns to be selected. I mean, if u click "360" tab for example and when it goes to that link, the "360" tab needs to be different color that mean selected.

Do u get it what I mean UKB? :) Tagged.

Thanks, :D

If you hover over the "360" tab the color changes the same as the "Home" tab, By default the home tab stays the same "Darker" Color but you can remove this by deleting this from the first line of links in the code (Marked in red for ease!)

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

Hope that helps ;)

soundbarrierpro
01-05-2009, 04:26 PM
Hi, very easy and very functional. I like it thank you. I want to change the color of the tabs from the powder blue though. Just the outline of the tabs. Do I need to find new tabs or can it be done in the script?

Thanks for the good work *INSTALLED*

UKBusinessLive
01-05-2009, 04:35 PM
Hi, very easy and very functional. I like it thank you. I want to change the color of the tabs from the powder blue though. Just the outline of the tabs. Do I need to find new tabs or can it be done in the script?

Thanks for the good work *INSTALLED*
Cheers Buddy

Just change the color of the .gifs and in the script you change the hex # of the color, you can change the color of the text and type of text too see below for a snipet of code to edit for the above

{
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

img {
border: none;
}



#tabs1 {
float:left;
width:100%;
background:#F4F7FB;
font-size:93%;
line-height:normal;
border-bottom:1px solid #BCD2E6;



or you can tell me the colors you want and i'll make it for you ;)

Take care :D

soundbarrierpro
01-05-2009, 04:52 PM
Hi, it's not working for me in the script. If you could make exactly what you have in your demo but with this color as the tab outline #0B198C.

Thank you, greatly appreciated

UKBusinessLive
01-05-2009, 05:31 PM
Hi, it's not working for me in the script. If you could make exactly what you have in your demo but with this color as the tab outline #0B198C.

Thank you, greatly appreciated

Hi Soundbarrierpro :D

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.

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

let me know what you think ;)

soundbarrierpro
01-05-2009, 05:52 PM
Perfect. Colors are fine. Thanks you for your great work.

UKBusinessLive
01-05-2009, 05:53 PM
Perfect. Colors are fine. Thanks you for your great work.

Your most welcomed Sir :D
Glad you liked it :up:

Coleccromos
01-05-2009, 05:58 PM
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!

UKBusinessLive
01-05-2009, 06:23 PM
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!

Thanks,

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

#tabs1 {
float:centre;
width:100%;
background:#F4F7FB;
font-size:93%;
line-height:normal;
border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
margin:0;
padding:10px 10px 0 300px;
list-style:none;
}
#tabs1 li {
display:inline;
margin:0;
padding:0;
}
#tabs1 a {
float:left;
background:url("http://i475.photobucket.com/albums/rr114/ukbusinesslive/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("http://i475.photobucket.com/albums/rr114/ukbusinesslive/tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;

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

Hope that helps :D

Coleccromos
01-05-2009, 06:31 PM
It's perfect!
If I need to put more buttons and modify this information to my taste

Thanks for the work

Congratulations!

UKBusinessLive
01-05-2009, 06:36 PM
It's perfect!
If I need to put more buttons and modify this information to my taste

Thanks for the work

Congratulations!

Hola Coleccromos

Just add another line of code under your button menu's like this

<li><a href="http://www.ukbusinesslive.co.uk/forum/memberlist.php"><span>Member List</span></a></li>

Just paste it underneath the others, you can have 1 or 100's

Enjoy :D

soundbarrierpro
01-05-2009, 07:02 PM
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


Won't this change though based on each computer user's screen size and resolution though?

For instance, my resolutions is 1152x864. If I make the adjustments, won't it look wierd on yours if you are set to 800x600?

UKBusinessLive
01-05-2009, 07:13 PM
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.

;)

UKBusinessLive
01-06-2009, 03:29 PM
***************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 :)

Gamelobby
01-07-2009, 05:18 AM
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 :)
Feel free..!!

You already have it in a PM and in my sig, but.. Gamelobby.com ;)

UKBusinessLive
01-07-2009, 05:20 AM
Feel free..!!

You already have it in a PM and in my sig, but.. Gamelobby.com ;)

Thanks Buddy :D

wmlvb
01-09-2009, 07:22 PM
Hey,

I appreciate you creating this so us newbies and see how and where to do this. I have been trying to fix tabs I already have that are messed up this helps point me in right direction.

UKBusinessLive
01-09-2009, 07:27 PM
Thanks wmlvb

Its quite an easy system compared to a lot of others, Theres minimum Edits and since its pretty simple its a lot easier to explain.

Hope you enjoy it :D

UKBusinessLive
01-17-2009, 09:13 PM
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

<span style="color:Green">


So your Menu Line would look something like this

<li><a href="http://www.ukbusinesslive.co.uk/topsite/"><span style="color:Green">Forums Topsite</span></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 ;)

:D

Super Jinni
01-18-2009, 06:23 AM
Hi man,
this is really cool

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

the tabs change when you move through them according to the current one.

it might be a condition or something to set different color to the current page's tab.

hope you got what I mean.

thanks for your great work :)

UKBusinessLive
01-18-2009, 07:47 AM
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

#tabs1 a:hover {
background-position:0% -42px;
}



and change it to this

#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

Super Jinni
01-18-2009, 10:22 AM
OK, need to give that a shot.

I'm going to try that after taking some sleep cause I didn't sleep for more than 30 hours and now I'm seeing my computer two. :D

thanks man for your reply :)

UKBusinessLive
01-18-2009, 04:21 PM
OK, need to give that a shot.

I'm going to try that after taking some sleep cause I didn't sleep for more than 30 hours and now I'm seeing my computer two. :D

thanks man for your reply :)

let us know how you got on :D

brvheart
01-19-2009, 12:40 AM
I have a question and a comment -

Comment first - thank you!! This is easy and works great!

Question - I did not want this in the header, so I put it in forumhome just above the main forums (placed below the <!-- main -->). This worked great, until I viewed it in safari - when I look at it in firefox - no problem, IE - no problems, Safari - throws the rest of the main table to the right - do you know how I would fix that?

UKBusinessLive
01-19-2009, 05:01 AM
I have a question and a comment -

Comment first - thank you!! This is easy and works great!

Question - I did not want this in the header, so I put it in forumhome just above the main forums (placed below the <!-- main -->). This worked great, until I viewed it in safari - when I look at it in firefox - no problem, IE - no problems, Safari - throws the rest of the main table to the right - do you know how I would fix that?

Firefox and IE should work ok, safari i'm not sure about as i don't use it, do you mean it throws it to the right like the VB.org ones on here??

Can you post a screen shot so i can see what you mean :confused:

brvheart
01-19-2009, 11:54 AM
sure thing - here is the screenshot - I should have posted this to begin with

https://vborg.vbsupport.ru/ (http://www.ncjjpix.com/main.php/d/18125-1/Picture+1.png)

UKBusinessLive
01-19-2009, 04:19 PM
sure thing - here is the screenshot - I should have posted this to begin with

http://www.ncjjpix.com/main.php/d/18127-2/Picture+1.png (http://www.ncjjpix.com/main.php/d/18125-1/Picture+1.png)

Hi Brvheart,

Yeah i see what you mean :eek: Not sure what to recommend there as i don't use safari, because of the security issues, so i can't really say what to do, You say its fine in IE and Firefox ;) Then i wouldn't worry too much with the safari issue. Perhaps a coder that uses safari could come up with a solution, but unfortunately for me, i wouldn't like to guess what to do next.

The Tabs are look great where you placed them :D

brvheart
01-21-2009, 06:13 PM
Hi Brvheart,

Yeah i see what you mean :eek: Not sure what to recommend there as i don't use safari, because of the security issues, so i can't really say what to do, You say its fine in IE and Firefox ;) Then i wouldn't worry too much with the safari issue. Perhaps a coder that uses safari could come up with a solution, but unfortunately for me, i wouldn't like to guess what to do next.

The Tabs are look great where you placed them :D

thanks man - I dont know either, I keep changing stuff around, it was the entire cat, but I added a <br /> and that made it just the header....if I figure it out I will let you know!!

UKBusinessLive
01-21-2009, 10:31 PM
thanks man - I dont know either, I keep changing stuff around, it was the entire cat, but I added a <br /> and that made it just the header....if I figure it out I will let you know!!

No worries let us know if you get it working in Safari ;)

Coleccromos
01-27-2009, 05:02 PM
In my forum there is also another user with the same problem that brvheart

I hope you can find the solution.

Thank you

GSeybold
01-27-2009, 08:45 PM
Hello UK
Sorry to bother you with such a stupid knob question but does the entire download go into an image folder? Can you tell me the path I should see if I've uploaded these correctly?

Thanks so much. :)

Gabby

GSeybold
01-27-2009, 08:47 PM
Never mind. I get it.. Sorry

UKBusinessLive
01-27-2009, 08:59 PM
Never mind. I get it.. Sorry

Are you done Gabby??? :confused:

let me know and i'll help where i can, but basically....

In Note pad look for this in the HTML 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

background:url("http://i4875.photobucket.com/albums/rr1/ukbusinesslive/tableft1.gif") no-repeat left top;


Then you look for the other one here

background:url("tabright1.gif") no-repeat right top;


and basically do the same as the first edit. For both of them you need to add the url to your images between the brackets ;)

GSeybold
01-28-2009, 07:24 AM
Yes thank you very much UK, I think I'm getting it. I just seem to do things a lot slower than most, always having to correct mistakes I make alone the way. Trial and error as I learn html , servers, host and all the rest of the stuff. I'm pretty burned out with fixing my forum over the past month so please forgive me stupidity. :o

Will this work on any style?

Thanks so much for your patience.

Gabby

GSeybold
01-28-2009, 07:41 AM
Okay I'm lost now. Where do I find this html code? In what template?

Sorry:)

Vaupell
01-28-2009, 01:38 PM
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 :D
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 :p 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.

UKBusinessLive
01-28-2009, 02:06 PM
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 :D

thewoodwhispere
01-28-2009, 03:34 PM
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.

UKBusinessLive
01-28-2009, 03:56 PM
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 :eek:

I'll keep you updated on this ;)

Have you had it running ok on IE and firefox ??

brvheart
01-29-2009, 01:49 AM
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....

UKBusinessLive
01-29-2009, 05:00 AM
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 :(

freewilley
01-30-2009, 06:09 PM
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 ! :D

UKBusinessLive
01-30-2009, 06:27 PM
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 ! :D

Hi Freewilley :)

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

Dark Pink

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

Light Pink

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

They are both in the zip attachment below

Have fun :D

freewilley
01-30-2009, 06:37 PM
Hi Freewilley :)

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

Dark Pink

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

Light Pink

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

They are both in the zip attachment below

Have fun :D

wow thank you so much!! dude!! it really helps :D

UKBusinessLive
01-31-2009, 04:27 PM
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....

For more of a browser proof menu set, your best bet is UKBL ~ Quality Dropdown Menu tabs https://vborg.vbsupport.ru/showthread.php?t=203521

This is compatible with

IE - v5:
IE - v5.5,
IE - v7:
IE - v8:

Firefox - All:
Mozilla - All:
Netscape - v6 & up:
Opera - v6 & Up:
Safari - All:
Goolge (Chrome):

I think this one might be better for you :D

hotwheels
02-02-2009, 06:37 PM
Really good stuff man..........

Coleccromos
02-02-2009, 06:59 PM
For more of a browser proof menu set, your best bet is UKBL ~ Quality Dropdown Menu tabs https://vborg.vbsupport.ru/showthread.php?t=203521

This is compatible with

IE - v5:
IE - v5.5,
IE - v7:
IE - v8:

Firefox - All:
Mozilla - All:
Netscape - v6 & up:
Opera - v6 & Up:
Safari - All:
Goolge (Chrome):

I think this one might be better for you :D

Yes, but this is with menus but as we like tabs?

Thanks for your time

UKBusinessLive
02-03-2009, 05:18 PM
Yes, but this is with menus but as we like tabs?

Thanks for your time

Ha Ha :D Would you be happy if i made you a set of tabs, using the Dropdown Menu Script, That way it would be compatible with all browsers ???

Let me know and i'll make a set for you ;)

Too late already made them for you :D

https://vborg.vbsupport.ru/external/2009/02/111.png

Just 6 tabbed menu, its easy to add more or delete, an is now compatible with all browsers, just like the Drop Down menus :D

Enjoy ;)

Coleccromos
02-03-2009, 07:02 PM
Ha Ha :D Would you be happy if i made you a set of tabs, using the Dropdown Menu Script, That way it would be compatible with all browsers ???

Let me know and i'll make a set for you ;)

Too late already made them for you :D

https://vborg.vbsupport.ru/external/2009/02/111.png

Just 6 tabbed menu, its easy to add more or delete, an is now compatible with all browsers, just like the Drop Down menus :D

Enjoy ;)


Thank you very much for this help.

Now I'm going to work at it to make it more like real Easy Menu Tabs

Thank you very much for your time

UKBusinessLive
02-03-2009, 08:17 PM
Thank you very much for this help.

Now I'm going to work at it to make it more like real Easy Menu Tabs

Thank you very much for your time

No worries Buddy, Glad to help :D

You can change the colors, Fonts and background by changing the Hex Numbers in the top CSS part of the code and change the Url's of the sample site to your own website at the bottom HTML part

Have Fun ;)

Coleccromos
02-18-2009, 10:36 PM
No worries Buddy, Glad to help :D

You can change the colors, Fonts and background by changing the Hex Numbers in the top CSS part of the code and change the Url's of the sample site to your own website at the bottom HTML part

Have Fun ;)


or I could not give the same shape as the sample menu here.

Can you help me please?

Thank you!

UKBusinessLive
02-18-2009, 10:40 PM
or I could not give the same shape as the sample menu here.

Can you help me please?

Thank you!


It written differently in the same set up as the Dropdown menus, totally different from this one :erm:

Coleccromos
02-18-2009, 10:44 PM
It written differently in the same set up as the Dropdown menus, totally different from this one :erm:

Yes, it's perfect!

But I wish I could give it the same way as Easy Menu Tabs created by you and all colors and align the images in the center of the screen to the left and do not do it :erm:

UKBusinessLive
02-18-2009, 10:48 PM
Yes, it's perfect!

But I wish I could give it the same way as Easy Menu Tabs created by you and all colors and align the images in the center of the screen to the left and do not do it :erm:


With the script in the dropdown menu's they need to be as they are for it to work with all browsers, the minute you play with the code you lose the validation.

The Easy Menu Tabs although compatible with IE and FF, shows a few errors in opera and safari, Each one has its good points and bad points ;)

Coleccromos
02-18-2009, 10:54 PM
With the script in the dropdown menu's they need to be as they are for it to work with all browsers, the minute you play with the code you lose the validation.

The Easy Menu Tabs although compatible with IE and FF, shows a few errors in opera and safari, Each one has its good points and bad points ;)

Take a few days working with this new code and without success in my tests

Thanks for everything

UKBusinessLive
02-19-2009, 04:40 AM
Take a few days working with this new code and without success in my tests

Thanks for everything

I can make you a whole new set of menu tabs if you want, Do they have to be like the easy tabs or can they be different??? Post a link to your forum and i'll make you a nice set that you can be proud of. ;)

Coleccromos
02-19-2009, 02:07 PM
I can make you a whole new set of menu tabs if you want, Do they have to be like the easy tabs or can they be different??? Post a link to your forum and i'll make you a nice set that you can be proud of. ;)

I would do that?

Oh! be nice happened to my private forum

Many thank you very much!

PHILIPS-08
02-25-2009, 08:57 AM
thanx alot mate ...........

brvheart
03-01-2009, 08:53 PM
I like the drop down, but I have already customized the tabs and have them just like I want them - if they could be fixed that would awesome - if not I will try another way of doing this i guess :(

UKBusinessLive
03-01-2009, 09:01 PM
I like the drop down, but I have already customized the tabs and have them just like I want them - if they could be fixed that would awesome - if not I will try another way of doing this i guess :(

Do you mean if the dropdown menu tabs could just be fixed tabs as opposed to dropdowns???

If so there is a way of doing this ;)

brvheart
03-01-2009, 11:27 PM
lol, that came out wrong - I meant if the set I am using could be figured out why it is not working with the other browsers

UKBusinessLive
03-02-2009, 04:52 AM
lol, that came out wrong - I meant if the set I am using could be figured out why it is not working with the other browsers

as far as i'm aware it only plays up with Opera and safari, Not sure why as i don't use either because of the security issues with them.

however saying that, with the dropdown menu's you can create simple tads that are compatible with all browsers, thats why i didn't bother trying to fix it for opera and safari.

;)

brvheart
03-10-2009, 12:43 AM
I hear ya, I just like the looks of these better is all - I guess that I will uninstall this one and use the others :-/

UKBusinessLive
03-10-2009, 06:22 AM
I hear ya, I just like the looks of these better is all - I guess that I will uninstall this one and use the others :-/

Sorry mate i cant find this my skills in CCS sucks if you have time fancy showing me the bit i need to change

Cheers

The only way you can make the tabs central is by extending them the full width of your forums

https://vborg.vbsupport.ru/external/2010/01/29.png

you need to find this in the CSS

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:3px 60px 3px 3px;
margin:0px 60px 0px 0px;
background-color:transparent;
color:#aaaaaa;
font-family:Arial;
font-size:11px;
text-decoration:none;
border-width:0px 1px 0px 0px;
border-style:solid;
border-color:#aaaaaa;

and change the padding and margin (in Red) to a higher value.

The only problem you have then is that it will be set to your resolution, people with other screen resolutions will just see a mess, or the menu bars on two rows.

i did state before the reson its coded like it is, is that it will work in all resolutions and in All Browsers, Changing the above will create problems when viewing, thats why i don't recommend it.

Sorry its not working right for you brvheart, but i did do this so its workable over all platforms ;)

Thanks ;)

LieuR
07-27-2009, 06:01 PM
This looks simple and very nice

One question is this mod search engine friendly

UKBusinessLive
08-03-2009, 02:33 PM
This looks simple and very nice

One question is this mod search engine friendly

I can't imagine why it wouldn't be :confused: