Change Accordion colours

Support
#1

Hi

Can you let me know how I can make the x of the accordion a different colour please? I’d like it to be #009ee2

Also if I wanted to change the font colour of the header in the accordion what would I need to do?

Thanks

#2

Hey @HMR2017,

Add following CSS code in Global CSS section in theme options.

.x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: #009ee2;
    color : #fff;
}

.x-accordion-heading .x-accordion-toggle 
{ 
    background-color: #009ee2; 
    color : #fff;
}

.x-accordion-heading .x-accordion-toggle.collapsed:hover, .x-accordion-heading .x-accordion-toggle:hover {
    color: #fff;
}

Hope this helps.

Regards

#3

Thank you - I swapped the colours around and it works as intended. Is there a way to change the colour of the x that changes to a + to the left of the accordion header?

#4

Hi There,

Please add the following CSS

.x-accordion-heading .x-accordion-toggle:hover:before, .x-accordion-heading .x-accordion-toggle.collapsed:before {
 
    color: red;
}

Hope it helps!

#5

Yes - perfect thanks

#6

You are most welcome. :slight_smile:

#8

Please provide us information about the issue if you have any, @MIGELANDREY

Thank you.