changing the background color of panel

[raman4984]

I am trying to change background color of panel.

Please see the code:

panel: {
            centered: true,
            width: 200,
            height: 150,
           style: 'background-color: red',
            fullscreen: false,
            hidden: true,
            zIndex: 10,
        
       }

but style: 'background-color: red' statement doesn't fulfill my requirements. it changes the color of panel border only not complete panel background color.

please suggest for the same.

thanks!

[sword-it]

Hi!

You may add a cls for your panel:-

panel: {
            centered: true,
            width: 200,
            height: 150,
            cls: 'redBG',
            fullscreen: false,
            hidden: true,
            zIndex: 10               }

CSS:-

.redBG .x-panel-body{
background-color : red !important;
/* add whatever you want here, but don't forget !important */
}

[raman4984]

yeah, done but still not working. Again, it's changing the color of panel border only not complete panel background color. I think, there is some hidden panel inside panel,

[mitchellsimoens]

Have you inspected the DOM to see if something is overriding your CSS or if you are in the correct element?

[silami]

Hi!

You may add a cls for your panel:-

panel: {
            centered: true,
            width: 200,
            height: 150,
            cls: 'redBG',
            fullscreen: false,
            hidden: true,
            zIndex: 10               }

CSS:-

.redBG .x-panel-body{
background-color : red !important;
/* add whatever you want here, but don't forget !important */
}

Hi,

as sword-it said, you should use a CSS class for your panel, in your CSS file you will have a class defined like this and it will work :

.redBG.x-panel.x-floating, .redBG .x-panel-inner {
      background-color: red !important;
}

Regards