Docs

[charliesa]

All I want is to change the color (or maybe the icon—but that’s my issue) of the indicator to the left if the accordion text to “indicate” whether” opened or closed. ( + According text ) “the plus sign” is what I mean

I could find it in the forum if I knew what to what to look for.

[Prasant Rai]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[charliesa]

Just stated, but whatever….http://bc-testsite.com/what-we-do/

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-accordion-heading .x-accordion-toggle:before {
    content: "\f040";
    color:#0000ff;
}

/* Toggle Icon Color when closed*/
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color:#ff0000;
    content: "\f041"; /* If you wanted a different Icon when closed */
}

/* Toggle Icon Hover Color */
.x-accordion-heading .x-accordion-toggle:hover:before {
    color:#00ff00;
}

Please change color and icon code as per your requirement.

Thanks.

[charliesa]

Thanks…just got some, but not all…

Thanks

[Paul R]

Hi,

Please add the code above in your child theme’s style.css(wp-content/themes/x-child/style.css) instead of custom CSS.

.x-accordion-heading .x-accordion-toggle:before {
    content: "\f040";
    color:#0000ff;
}

/* Toggle Icon Color when closed*/
.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color:#ff0000;
    content: "\f041"; /* If you wanted a different Icon when closed */
}

/* Toggle Icon Hover Color */
.x-accordion-heading .x-accordion-toggle:hover:before {
    color:#00ff00;
}

Thanks

[charliesa]

I almost always use x-child style.css rather than CUSTOM CSS anyway (keeps everything nice and neat). 🙂

[charliesa]

Thank you very much !! as usual though.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts