Hi there, I was wondering if you could help me? I have tried searching the forums and sadly haven’t found an answer. I am looking to style each of the accordion header colours with a different colour. I have tried assigning them individual classes to add CSS code but can’t seem to override the background colour of each header. Any help much appreciated (accordions are below the slider on the homepage)
I’d also like to add an icon I have created to the beginning of each accordion header, before the main header text. Let me know if this is possible?
Hi @EarlySigns,
Thanks for reaching out.
You can add different colors to each by editing the Accordion Item header using the Rich Text editor as shown in the below-given video.
https://www.awesomescreenshot.com/video/1504599?key=13d16597909eac62e4c6f13929d89ef4
Regarding the icon, there is the option to add the Text and the predefined Icon only, so if you want to customize the icon, you can do by disable the indicator from Accordion > Header and then add the icon in header of each item as the color changed shown in the above video.
Hope it helps.
Thanks
Hi there, sorry I missed out an important word - the accordion header background. I would like each accordion to be different - they are all red at the moment, but I’d like to style one as orange, one as red, one as green etc. I have given all accordions an individual class, such as 'heating .boiler-repairs etc, but when I try to add custom CSS to change background colour I cannot override the settings in Pro, despite using the css !important
Please take a look at my page where the accordions are and let me know what I should do. Much appreciated.
Hey @EarlySigns,
It’s best the use each individual Accordion Item Element CSS.
You can also use your class but target the specific element within the accordion. You’ll need to have knowledge of CSS for this and how to use the browser’s element inspector. We cannot provide further support for custom coding.
Hope that helps.
Hi there,
Thanks, worked like a charm in customiser but not in Element CSS. Thanks for your help! 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.