[helpfulmarketingParticipant]

I am trying to figure out how to make the default text color darker and maybe bolder in the Cornerstone tabs throughout the site. For example the text in the four tabs on the home page of http://www.helpfuldirectmail.com (below the puzzle) “Choose Mailing List Design Your Mail Piece(s) Print Your Mail Piece(s) Prepare & Deliver Your Mail” are so light they are hard to read. And when mouse hovering, their not much better.

I’d like to be able to know how to change the default throughout the site and then also how to change it for a specific set of tabs that is not site wide.

Thank you!
Rob

[ChristopherModerator]

Hi there,

To change it globally, please add the following code in Customize -> Custom -> CSS :

.x-nav-tabs>li>a {
    color: #bfbfbf;
font-weight:bold;
}

But if you wish to change font color for specific tab element, then add a custom class like my-class to tab element and add following code :

.my-class .x-nav-tabs>li>a {
    color: #bfbfbf;
font-weight:bold;

}

Hope that helps.

[helpfulmarketingParticipant]

Thank you for your help! Sorry for the delay. I was waiting for the reply and didn’t realize that I need to manually subscribe to a topic I create.

Now I’m on the right track for changing the global settings.

I don’t understand your explanation regarding the changing the color for a specific element. I added the code you suggested and changed the color but I didn’t see any change effect.

• How do I change the hover color?
• How do I change the selected tab color?

Thank you again!
Rob

[Rue NelModerator]

Hello Rob,

To change the hover color, please use this code:

/* Default */
.x-nav-tabs>li>a {
    color: red;
    font-weight:bold;
}

/* Hover */
.x-nav-tabs>li:hover>a {
    color: green;
}

To change the selected tab color, you can use this code:

/* Active */
.x-nav-tabs>li.active>a {
    color: green;
}

/* Active on Hover */
.x-nav-tabs>li.active:hover>a {
    color: blue;
}

If you want to change the color for the specific tab, please select the tab item, turn on the advance controls and insert a custom my-class-1 class. You can then use this custom css.

/* Specific tab */
.x-nav-tabs>li.my-class-1>a {
    color: green;
}

/* Specific tab on Hover */
.x-nav-tabs>li.my-class-1:hover>a {
    color: blue;
}

http://prntscr.com/8zygrv

Please let us know if this works out for you. Thank you.

[Author]

Posts