Docs

[bperry420]

How do I make each of my tabs a different color on this page?

Services

Right now I was able to make one tab red, and the other 3 turn red when clicked on. I would prefer them to be their own color each. (one red, one brown, one orange and one gray)

Is that possible?

WordPress 4.5.2 running X – Child Theme
X Version: 4.4.2
Cornerstone Version 1.2.4

[bperry420]

to clarify, I want them to change color when Active. Thanks

[Rue Nel]

Hello There,

Thanks for writing in!

To make the tab colors different, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

For normal tabs (one active and 3 inactive tabs)

.site .x-nav-tabs>.x-nav-tabs-item.active>a, 
.site .x-nav-tabs>.x-nav-tabs-item.active>a:hover {
    background-color: green;
    color: #fff !important;
}

.site .x-nav-tabs>.x-nav-tabs-item>a{
    background-color: blue;
    color: #fff !important;
}

.site .x-nav-tabs>.x-nav-tabs-item>a:hover {
    background-color: yellow;
    color: #000 !important;
}

For different tab colors

.site .x-nav-tabs>.x-nav-tabs-item:nth-child(1)>a{
    background-color: red;
}

.site .x-nav-tabs>.x-nav-tabs-item:nth-child(2)>a{
    background-color: brown;
}

.site .x-nav-tabs>.x-nav-tabs-item:nth-child(3)>a{
    background-color: orange;
}

.site .x-nav-tabs>.x-nav-tabs-item:nth-child(4)>a{
    background-color: gray;
}

Hope this helps.

[Rad]

Hi there,

Thanks for writing in.

Sure that’s possible,

.x-nav-tabs>li:nth-child(1).active>a {
    background-color: #821c35;
}
.x-nav-tabs>li:nth-child(2).active>a {
    background-color: #821c35;
}
.x-nav-tabs>li:nth-child(3).active>a {
    background-color: #821c35;
}
.x-nav-tabs>li:nth-child(4).active>a {
    background-color: #821c35;
}

Then all you have to do is change the color 🙂 Cheers!

[bperry420]

Thanks! You guys always come to the rescue! I appreciate how quickly you answer my questions.

Here is the code I used to make it work:

/* Tab 1 */
.site .x-nav-tabs>.x-nav-tabs-item:nth-child(1).active>a
{
background-color: #821c35;
}

/* Tab 2 */
.site .x-nav-tabs>.x-nav-tabs-item:nth-child(2).active>a
{
background-color: #7c613a;
}

/* Tab 3 */
.site .x-nav-tabs>.x-nav-tabs-item:nth-child(3).active>a
{
background-color: #e07966;
}

/* Tab 4 */
.site .x-nav-tabs>.x-nav-tabs-item:nth-child(4).active>a
{
background-color: #8b8b8b;
}

/* Default State */
.x-nav-tabs>li>a
{
background-color: #fff;
color:#000!important;
}

/* Active State */
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover
{
color:#fff!important;
}

[Rue Nel]

Hello There,

You’re welcome!
Thanks for letting us know that it has worked for you.

If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts