Usability of tabs

We are using Tabs GK5 to display tabbed content. We do have a problem with it's usability. It seems like most of the users thinks that the grey tab is the active one, rather than the white one. Can you change this so that it has more usability?

Screenshot-35.png

Could You post an url to your site?

As in previous post - no, I cannot provide you access.

Please edit: /templates/gk_bikestore/css/override.css and add at its end:

Code: Select all

.gkTabsWrap.vertical ol li.active, .gkTabsWrap.horizontal ol li.active, .gkTabsWrap.vertical ol li.active:hover, .gkTabsWrap.horizontal ol li.active:hover {
background: #FFF;
color: #696969;
}
.gkTabsWrap.vertical ol li, .gkTabsWrap.horizontal ol li {
background: #696969;
color: #FFF;
}
.gkTabsWrap.vertical ol li:hover, .gkTabsWrap.horizontal ol li:hover {
background: #F9F9F9;
color: #353639;
}


Solution is just a theory - without access You need to figure thing on your own.
First class declares look of active tab, second of inactive, third of inactive hovered. Play with background color and font color. Those declarations use colors as they are now, so You would need to change them to your liking.

Remember to enable "CSS override" in template settings - advanced section.

Any idea how can I add a top border on active tab?

with border-top: 1px solid green for example in first declaration, but if You will add it only on one tab it may behave strangely when You switch tabs.

This is exactly what I've tried before contacting you. It does not work!

Without access to your site I can't help you .
Perhaps You could publish it somewhere and password protect?

What you mean you can't help. I just installed quickstart and this is where I am today. Can't you just take the template and make modifs on your system?

I can't help because I can't see what misses things up on your side (either some already made configuration, or something wrong with css changes).

I have checked, and this works great with default installation:

Code: Select all

.gkTabsWrap.vertical ol li.active, .gkTabsWrap.horizontal ol li.active, .gkTabsWrap.vertical ol li.active:hover, .gkTabsWrap.horizontal ol li.active:hover {
    border-top: 1px solid red;
}


it puts nice red border on top of active tab