[ArtOfSpringParticipant]

Hi there,

on my site: https://mybetterlife.de/relaunch-2/#accordion I’m usind an accordion element.
How can I change the size of the “+” Icon without affecting the text headings size?

Additionally how can I target specific accordion headings to give them individual colors?

Thank you

[JadeModerator]

Hi there,

Please add this code in the customizer:

.x-accordion-heading .x-accordion-toggle:before {
    font-size: 25px;
}

Hope this helps.

[ArtOfSpringParticipant]

Thank you that is increasing the size but it lost it’s horizontal alignment with the heading.
If I increase the size of the “+” icon the headling is moving down. How can get them both on the same line – horizontal centered?

My second question was: how can I target specific accordion headings to give them individual colors?
For example: Accordion A has a green heading and accordion B has a red heading.

Thank you!

[LelyModerator]

Hi There,

Please update above CSS to this:

.x-accordion-heading .x-accordion-toggle:before {
    font-size: 25px;
    bottom: -5px;
}

Adjust -5px accordingly.
To give individual colors on accordion heading, we can add different class on each column class field where the accordion is located. For example, on the first column with accordion, add accordion-green on the column class field. Then add this CSS:

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

Then on the next column, let say we can add accordion-blue on the class field. Then the CSS will be:

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

Do the same for other columns and add specific CSS.

Hope this helps.

[ArtOfSpringParticipant]

Thank you Lely!

That’s it

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts