Docs

[Josh Hayles]

Hi there! How do I change the background color for accordions? I want the background to be a pure white with a thin black border. Also, I have a child theme in place so I want to make sure it reflects there.

[Rue Nel]

Hello There,

Thanks for writing in! To change the background color for accordions and make the background color to be in pure white with a thin black border, please add the following css code in your child theme’s style.css

.x-accordion .x-accordion-inner {
    background-color: #fff;
    border: solid 1px #000;
}

Please let us know if this works out for you.

[Josh Hayles]

Thank you! Is there a preference for where that code should be placed; at the top, or very bottom?

[Thai]

Hi There,

You should put that code at the bottom of the style.css file.

Regards!

[Josh Hayles]

It did not work. You can see the accordion on this page: https://geniushomeowners.com/activity-demo/

I pasted the code at the bottom of my style.css sheet. See screenshot.

Also, I will need the accordion’s title text to be black instead of white. How do you add that to the code?

[Thai]

Hi There,

Please delete the previous CSS and add the following CSS instead:

.x-accordion-heading .x-accordion-toggle {
    background-color: #fff !important;
    border: 1px solid #000;
    color: #000;
}
.x-accordion-heading .x-accordion-toggle:hover {
    color: #989696;
}
.x-accordion-heading .x-accordion-toggle:before {
    color: #000 !important;
}
.x-accordion .x-accordion-inner {
    background-color: #fff;
    border: solid 1px #000;
    border-top: none;
}

Hope it helps 🙂

[Josh Hayles]

The changes look right on mobile but they aren’t reflecting on desktop. I flushed my cache. Do they look right on your desktop version?

[Thai]

Hey There,

It looks fine on my end:

http://i.imgur.com/DJ9bRjw.png

Please test in the incognito mode.

Thanks.

[Josh Hayles]

Looks good! Thank you!

[Thai]

You’re most welcome 🙂

[Author]

Posts