Accordion Colour Change

Support
#1

Hi again- I’m using the Ethos stack and want to change the color of the accordion background from the default black to white. I’m attaching a screenshot to help explain. I have already created a child theme if that matters.

So in the below, the black background behind the up arrow with “REFERENCES” is what I’m referring to.

#2

I should have mentioned that I’m referring to the short code when inserted into posts. Not using Cornerstone on pages which allows for changing the color without custom css.

#3

Also, I will need to change the accordion text header font color because once the background changes to white, the text will no longer be visible. I will also need the syntax for changing that to rgb (94, 94, 94)

#4

Hey @perfettc,

Ethos is a dark theme that is why there is no option to change the color of certain Classic Element including the Classic Accordion and its shortcode version.

With that said, it’s not recommend to invert the Accordion Header to white or invert Ethos to a light template as you have to override a lot of areas. I’d recommend building the page using Cornerstone instead and use the V2 Accordion if you need a different accordion colors.

If you wish to continue, I’ll provide the selectors along with the sample values but please bear in mind that theme modification is outside the scope of our support. The following code should serve only as a guide. Fixing issues resulting from the use of it or further enhancing should be done by you or a developer.

Here’s the code:

/* Accordion Collapsed */
.site .x-accordion-heading .x-accordion-toggle.collapsed {
  background: orange;
}
.site .x-accordion-heading .x-accordion-toggle.collapsed:before {
  color: blue;
}

/* Accordion Active */
.site .x-accordion-heading .x-accordion-toggle {
    background-color: skyblue;
    color: rgb(94, 94, 94);
}

.site .x-accordion-heading .x-accordion-toggle:before {
    color: gray;
}
.site .x-accordion-heading .x-accordion-toggle:hover,
.site .x-accordion-heading .x-accordion-toggle:hover:before {
    color: rgb(94, 94, 94);
}

Provided there’s no syntax error in your other CSS and you’ve copied the code completely, you should get the following result:

I believe what colors in the code affects what area. If not, please hire a developer to update the code.

Hope that helps and thank you for understanding.

#5

Thanks but I’ve already converted my Ethos child theme to a white theme and it’s looking great IMO. I understand that it’s not supported but want to continue to make this last (hopefully) refinement.

#6

You’re welcome, @perfettc.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.