How to Style Accordion Element

Support
#1

Hi, I’d like to style the accordion element, but I’m finding it hard to figure out the div for the CSS! I’ve managed to change the font, but also want to do the following:

  1. Change the background colour of the header to #b3d455
  2. Change the border radius to 0
  3. Get rid of the box shadow - in cornerstone, the box shadow is set to 0 for all options, but it still has the shadow applied! Is this a bug?
  4. Replace the arrow icon for a different one with font awesome and to change the colour of it to white

I’ll put the page URL in a secure note.

Thanks!

#2

Hi There,

Thanks for writing in!

Please find my answer for each point.

  1. Please check the screenshot for setting the header color.

  2. Set the item border-radius as per the screenshot.

  3. The box-shadow is working fine if you set it as 0.

  1. You can change the icon in header section.

Hope this helps!

#3

Hi there,

To do this, click the accordion element, click the header option and you should have the options where you could set the background color.

Cick on the accordion then click the customizer setting and add this code to the Element CSS:

$el .x-acc-item {
  border-radius: 0;
  box-shadow: none;
}

GO back to the header settings and the options should be there:

Hope this helps.

#4

Hi, thank you both! I didn’t realise the options were there already to style the Accordion! I appreciate the screen grabs.

Thanks!