[guybower1Participant]

hi

I need to make a change to my tabs so that the inactive tabs have a different color and a further different color on hover.

Here is what I currently have:

.x-tab-content .x-tab-pane {
background-color: #f5f5f5;
}
.x-tab-content {
border: medium none;
}
.x-nav-tabs>li>a {
color: #000000 !important;
background-color: #f5f5f5 !important;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #f5f5f5 !important
}
.x-nav-tabs>li {
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: 1px solid #e1e1e1 !important;
}
.x-nav-tabs>li.active {
border-left: 1px solid #e1e1e1 !important;
border-right: 1px solid #e1e1e1 !important;
border-top: 1px solid #e1e1e1 !important;
border-bottom: none !important;
}

So you can see that all tabs and tab panes have the color #f5f5f5. How would it be possible to have the inactive tabs another colour and then change to a different color on hover? So, all up, there would be 3 colors needed: 1 for the active tab, 1 for the inactive tabs and 1 for the hover tab.

url is feastthailand.com

Thanks so much for your help

Regards

[guybower1Participant]

This reply has been marked as private.

[RupokMember]

Hi there,

Kindly provide us the exact URL of the page. I can’t find the Tabs on your site.

Thanks!

[guybower1Participant]

It is the About Us page, so feastthailand.com/index.php/about-us/

cheers

[ChristopherModerator]

Hi there,

Please add this code :

.x-nav-tabs.top>li:not(.active) a {
    background-color: red;
    color: #000;
}
.x-nav-tabs.top>li:not(.active) a:hover {
    background-color: #000;
    color: red;
}

Hope it helps.

[guybower1Participant]

hi Christopher

I’m not really sure what is happening here, but even before entering your code, the whole tabs page had changed colors, yet I have made no change to that page.

Here is what has changed in looks, though the code is all still the same as this morning and the code that was formatting each element correctly is listed below:

Pane of the active tab now white instead of #f5f5f5
.x-nav-tabs>li>a {
color: #000000 !important;
background-color: #F5F5F5 !important;
font-size: 14px;
font-weight: bold;
}
the borders around the outside of the active pane are visible
.x-tab-content {
border: medium none;
}
The borders on active tabs are now wrong
.x-nav-tabs>li.active {
border-left: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
border-top: 1px solid #000000 !important;
border-bottom: none !important;
}
The borders on inactive tabs are now wrong
.x-nav-tabs>li {
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: 1px solid #000000 !important;
}
The borders at the top of inactive tabs is back
.x-nav {
border: medium none !important;
}

Oh, and the text of the tab headings now has a hover effect, though none has yet been put on.

The links on this page, page ID 1700, do now not color as they did this morning

.page-id-1700 .entry-wrap a {
color: #fe5000;
}

All of the code above was working fine and no change has been made at this end. How can this happen, do you think? Is there a corruption in the WP install, in the Cornerstone install or where could be causing the issue?

Any help gladly accepted

cheers

[guybower1Participant]

Christopher

I did deactivate all of my plugins earlier today to locate an issue with a single page. I then reactivated them all.

Now can this cause some issues with CSS code when reactivated, as Cornerstone was one of the plugins I deactivated?

JUst thought to tel you in case you think this may be the culprit. So many pages are now back to looks from almost a week when I began tweaking

cheers

[Paul RModerator]

Hi,

There is a syntax error in your code, you missed a bracket in history class.

That prevents everything after it from working.

See screenshot – http://screencast.com/t/yOxUMsod

[guybower1Participant]

cheers Paul. That was really doing my head in. A simple mistake……gotta relax and take my time.

OK, so that got everything back to where it was, but the code supplied above doesn’t seem to change anything.

.x-nav-tabs.top>li:not(.active) a {
background-color: red;
color: #000;
}
.x-nav-tabs.top>li:not(.active) a:hover {
background-color: #000;
color: red;
}

What I am after is that the active tab (not the pane, but the top tab) be one color, then the inactive tabs be a different color and a third color for hover – for both text and the tab

thanks Paul

[Paul RModerator]

Hi,

You can try this code instead.

/* inactive tab color */
body .x-nav.x-nav-tabs.top>li>a {
   background-color:yellow !important;
    color:red !important;
}

/* tab color on hover */
body .x-nav.x-nav-tabs.top>li>a:hover {
    background-color:red !important;
    color:white !important;
}

/* active tab color */
body .x-nav.x-nav-tabs>.active>a {
     background-color:blue !important;
    color:white !important;
}

Please change the colors with the color that you like.

Hope that helps

[guybower1Participant]

hi Paul

Thanks so much for the advice.

So here’s how that went.

The first part changes all tabs, not just the inactive tab. The second part changes all the tabs on hover, not just the inactive ones. The third part has no effect on the active tab, nor on anything.

Don’t forget there was already this code in place, which I thought set the color of the tab top along with text properties:

.x-nav-tabs>li>a {
color: #000000 !important;
background-color: #F5F5F5 !important;
font-size: 14px;
font-weight: bold;
}

So, what you suggested is pretty close. Parts 1 + 2 just need to work on the inactive tab tops only and part 3 needs to work on the active tab top. I’m happy to remove the background-color element in that code of mine above if it helps

Thanks so much

cheers

[RadModerator]

Hi there,

It’s the missing .top (eg. body .x-nav.x-nav-tabs.top>.active>a )

Please try this,

  /* inactive tab color */
body .x-nav.x-nav-tabs.top>li>a {
   background-color:yellow !important;
    color:red !important;
}

/* tab color on hover */
body .x-nav.x-nav-tabs.top>li>a:hover {
    background-color:red !important;
    color:white !important;
}

/* active tab color */
body .x-nav.x-nav-tabs.top>.active>a {
     background-color:blue !important;
    color:white !important;
}

And please remove that existing CSS. Cheers!

[guybower1Participant]

hi Rad

Thanks so much for your reply.

That is almost perfect. Now all it needs is to stop the hover on the active tab.

So the active tab color works a treat (tab & text), the inactive tabs color and color on hover work a treat (tab & text). But the hover also affects the active tab, which I would prefer not to happen. I’d prefer the active tab stays static.

Other than that, it is terrific

cheers

[RupokMember]

Hi there,

Let’s update this code :

body .x-nav.x-nav-tabs.top > .active > a{
  background-color: #f5f5f5 !important;
  border-bottom: medium none !important;
  color: #000000 !important;
}

to this :

body .x-nav.x-nav-tabs.top > .active > a, body .x-nav.x-nav-tabs.top > .active > a:hover {
  background-color: #f5f5f5 !important;
  border-bottom: medium none !important;
  color: #000000 !important;
}

Hope this will do the job.

Cheers!

[guybower1Participant]

Terrific Rupok

That worked fine. Thanks so much

regards

[Author]

Posts