Change color in accordian

[fortknoxusa]

how can i change the color in the classic accordion and change text colors?

[paul.r]

Hi,

To change the color of an accordion, you can add a unique class to your accordion element.

Then add this in Theme Options > CSS

/* Content Text Color */
.my-accordion .x-accordion-inner {
    color: #999;
}
/* Heading text color */
.x-accordion-heading .x-accordion-toggle {
   color:#272727;
}
/* Heading hover text color */
.x-accordion-heading .x-accordion-toggle:hover {
    color: #ff2a13;
}
/* Heading Background color */
.x-accordion-heading .x-accordion-toggle {
    background: red;
}

Change the colors as you like.

I came up with that code using Chrome Inspect element. In case you want to learn some css, please check video below

Hope that helps.

[fortknoxusa]

Thanks for the help!

[fortknoxusa]

Is there a way to change the + sign in the accordion

[nabeel]

Hi again,

To change the plus icon, you can make use of the following code:

.x-accordion-heading .x-accordion-toggle:before {
    content: "\f054";
}

To see the complete list of icons, please see https://fontawesome.com/icons?d=gallery and change the icon code in the above code.

Hope this helps!

[fortknoxusa]

I am so sorry I meant the color of the plus sign
sorry about that

[rad]

Hi @fortknoxusa,

Ah, in that case, please just change the CSS styling to this with your preferred color.

.x-accordion-heading .x-accordion-toggle:before {
 color: #000000;
} 

Thanks!

[fortknoxusa]

Thanks for the help

[nabeel]

Glad we could help.

Cheers!