Change default color of grid header in Ext JS classic theme

Question

I want to change the default color of grid panel header. By searching on Google I found a fiddle changing the color of the grid header but in the classic theme it is not working.

https://fiddle.sencha.com/#fiddle/v8j&view/editor

I changed the theme from drop down in the fiddle the color disappear. Is there any way to change the color of grid panel header in the classic theme?

Answer 1

The classic theme contains images for grid headers. Add background-image: none; to your css override.

Here is the updated fiddle: https://fiddle.sencha.com/#fiddle/2fd6&view/editor

Answer 2

Assign a cls property to grid say grid-cls and write below snippet in your CSS file. This will change background of all headers to red.

.grid-cls .x-column-header {
    background-color: red;
}

For changing color of specific column header give cls to that specific column say test and add below snippet in your code.

.x-column-header.test{
    background:red;
}