Accordion color

Hey FlatText,

Try to enabling custom css classes http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ then in the class name add my-accordion

Then in Quick CSS (located in Enfold > General Styling), add this css code:

.my-accordion > .av_toggle_section:nth-child(1) .toggler {
    background-color: blue;
}

.my-accordion > .av_toggle_section:nth-child(1) .toggle_content {
    background: blue;
}

.my-accordion > .av_toggle_section:nth-child(2) .toggler {
    background-color: green;
}

.my-accordion > .av_toggle_section:nth-child(2) .toggle_content {
    background: green;
}

.my-accordion > .av_toggle_section:nth-child(3) .toggler {
    background-color: yellow;
}

.my-accordion > .av_toggle_section:nth-child(3) .toggle_content {
    background: yellow;
}

.my-accordion > .av_toggle_section:nth-child(4) .toggler {
    background-color: red;
}

.my-accordion > .av_toggle_section:nth-child(4) .toggle_content {
    background: red;
}

.my-accordion > .av_toggle_section:nth-child(5) .toggler {
    background-color: gray;
}

.my-accordion > .av_toggle_section:nth-child(5) .toggle_content {
    background: gray;
}

.my-accordion > .av_toggle_section:nth-child(6) .toggler {
    background-color: orange;
}

.my-accordion > .av_toggle_section:nth-child(6) .toggle_content {
    background: orange;
}

.my-accordion > .av_toggle_section:nth-child(7) .toggler {
    background-color: purple;
}

.my-accordion > .av_toggle_section:nth-child(7) .toggle_content {
    background: purple;
}

toggler is for the title and toggle_content for the content. Just adjust the background colors as you see fit. Hope this helps :)

Best regards,
Nikko

Hi,

We’re glad that Nikko was able to help you! If you have any other questions or issues, feel free to post them here on the forum.

For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/

We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

Thank you for using Enfold!

Cheers!
Sarah

Hi,

Are you referring to the first tab shown here: http://kriesi.at/themes/enfold-2017/elements/tabs/ ?

Best regards,
Nikko

Hi,

Like Nikko said, please give a class name to your Tabs Element, then You can use this code as basis.

.my-tabs .tab:nth-child(1) {
    background-color: blue !important;
}

.my-tabs #tab-id-1-container {
    background-color: blue !important;
}

Please let us know if you need further help!

Best regards,
Sarah

Hi,

Glad that Sarah helped you :) Let us know if you need more assistance or if we can close the thread.

Best regards,
Nikko

Hi,

You’re very much welcome. Thanks for using Enfold :)

Best regards,
Nikko