Changing tab & toggle shortcode elements focus color

[apa-sl]

By using what custom css can I alter the default colors for tab and toogle shortcode elements? I am especially interested in altering the active/on focus colors. Eventually it would be nice to also alter the default colors.

[Veena]

You can use the below custom CSS –

.toggle-label:hover {
    background-color: #000;
    color: #fff;
}
.toggle-label {
    background: #fff;
    color: #000;
    border: 1px solid #e5e5e5;
}
tabs a.current {
    cursor: default !important;
    color: #fff !important;
    background: #3A3A3A;
    border-bottom: none;
}
.tabs .current, .tabs .current:hover, .tabs li.current a {
    border-top-color: #e84a52;
}
.tabs a {
    background: #F7F7F7;
    color: #666 !important;
    border: 1px solid #DDD;
}
.tabs a:hover {
    background: #Fff;
}

[apa-sl]

Thank you, it worked.

Last thing is that the toogle title bar has still the default red color after it has been expanded. I’ve tried to add a class with ‘active’ / ‘onclick’ / etc. but it did not worked. What is the state of expanded toggle?

[Veena]

Pls use this –

.active-toggle .toggle-label:hover {
    background-color: #000;
}

[apa-sl]

Great! Whole issue solved – thank you.

[Author]

Posts