Remove background color (to transparent) in accordion header

Support
#1

Hi,

I’ve been able to customize the accordion to my needs mostly, but I can’t seem to remove the background color on the item heading. I’ve tried using none and a fully transparent rgba value, but it still defaults to white. The code I have follows:

.x-accordion-heading {
color:#212a40;
font-weight:400;
background-color: rgba(255, 255, 255, 0);
}
.x-accordion-heading .x-accordion-toggle {
background-color: rgba(255, 255, 255, 0);}
.x-accordion-heading .x-accordion-toggle:hover {
background-color: rgba(255, 255, 255, 0);
}

help?

the production site is http://zg.cappatagglehost.com/#process

Also, while I have you here, can you please clarify the difference between Custom where you have CSS and Javascript panel, and Additional Css in the theme customiser. Is there any difference between the two. Will one override the other?

Thanks.

#2

Hey @shughesd,

Add the following CSS code in Global CSS section(Custom).

.x-accordion-heading .x-accordion-toggle.collapsed {
         background-color: transparent;
}

Additional CSS tab is coming from WordPress itself. The Edit Global CSS is the one from the our theme.

Both of this serves same purpose you can place your Custom CSS either of this box. But you might want to use the Edit Global CSS as you can expand it and can edit the CSS properly.

Hope this helps.

Cheers!

#3

Hi! Thank you for this.

Can you please check the site for me and point the additional css designator I need to change to remove the header background color when the accordion is expanded and you mouse off the header?

Again, the accordion can be found at http://zg.cappatagglehost.com under the Process section

Thank you!

#4

Hi again,

Please add the following code in your Customizer:

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

Let us know how this goes!