Making Accordion Title <h4> - Problem with styling

[antoine_generau]

Thank you, I understand and therefore tried to get the same result with some CSS. I still face some problems though:

1. How can I change the color of the bar with the title when an accordion item is opened? I managed to get the correct style by mouse hover, but did not find how to apply it to the active title.
2. I changed the size of the icon before the title using font-size:1.5em; to the element .x-accordion-heading .x-accordion-toggle:before but by doing so, this is not aligned with the title anymore, and the title is not vertical centered. What should I use instead to do so?

See here an accordion item v2 at the top and the classic accordion item I want to style at the bottom:

Thanks,
Antoine

[Prasant]

Hello @Lecoqdigital,

Thanks for updating the thread.

You can change the accordion active title background color by adding following CSS code under X > Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle {
    background-color: #ddd;
}

To adjust the icon alignment, please add following CSS under X > Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle:before{bottom: -3px !important;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[antoine_generau]

Thank you very much for your help. The only thing which is now missing is to find the proper CSS code selector for the heading when an accordion is opened after you select it. I’d like to apply the save code as the mouse hover effect:

.x-accordion-heading .x-accordion-toggle:hover {
    color: rgb(193,0,1);
    background-color: rgb(232,232,187) !important;
}

Is there a CSS code selector for this? I could not find it.

Thanks,
Antoine

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle:not(.collapsed) {
    color: #ca3b3b;
}

Hope it helps

[antoine_generau]

Perfect, thank you!

(I though about using something like you did but had no idea if it was possible. I’ll know for next time )

[thai]

You’re welcome.