How to apply background color only to the Expansion Panel Header in Alpha

I am using Neutrinos Alpha Expansion Panels in my application. When I apply a background color to the expansion panel, the color is getting applied to the entire panel, including both the header and the body.

However, I want to style it so that:

  • Only the header of the expansion panel has a background color.

  • The panel body should remain white, similar to the layout shown in my screenshot.

How can I apply background color only to the header section without changing the body’s background in Neutrinos Alpha expansion panels?

1 Like

Hello @venkatesh ,
You can hover over the header section of the panel in the browser’s inspect tool to find the class or ID of that element. Once you identify it, use that class or ID together with the auto-generated panel ID inside the Styles section, and then apply your desired styles there.

2 Likes

Hello @Sam
Thanks for the guidance. I inspected the panel header section and applied the styles using the specific header class along with the auto-generated panel ID in the Styles section. It worked perfectly

1 Like