Docs

[Ann]

Hey there,

Is there a way to change the colors of one specific accordion and not all using CSS?

On this page https://moveu.com/ I’d like to change the accordion to not be dark – the very first section after the hero image. I have added CSS to the customizer to make the accordion dark for the section “What Makes MoveU so Different?” – a bit further down on the same page. I know how to change colors of elements by adding a class but not sure how to do that with accordion – or if it’s even possible.

Thanks for your help!

Ann

[Rahul]

Hi There,

Greetings! Thank you for contacting us 🙂

To change the background color, you can add the following CSS code via Appearance > Customize > Custom > CSS

.x-accordion-heading .x-accordion-toggle {
background-color: red !important;
}

Let us know how this goes!

Cheers!

[Ann]

Right, the thing is that I have already added just that for the accordion farther down the page. I’m wondering if I can have 2 different colors for two different accordions on the same page?

Does that make sense? 🙂

Ann

[Friech]

Hi Ann,

Lets make the selector more specific.

.home #x-section-2 .x-accordion-heading .x-accordion-toggle {
	background-color: red !important;
}

That will specifically target the accordion on the second section of your home page.

Cheers!

[Ann]

Works great!!

Thanks so much!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts