How to change the color of the header row

I was wondering if someone could help me with this issue:

I would like to change the colors of the header row of the grid and I cannot figure out how. I would also like to change the color of the '0' column, the one with the record numbers in it and if possible I would like to display the image of an 'arrow' in it.

I would like to change the colors to say a light blue for normal and maybe a grey for clicking for sorting. I tried to change the style sheet (xp.css) but I just messed up the grid.

Thanks
Mick

Try adding these in your CSS

.active-templates-header .active-box-normal {background-color: lightblue;}
.active-templates-header .active-box-item {background-color: lightblue;}

You may also need to over-ride these .active-box-resize, .active-box-sort and few more. find by yourself and please post the exact finding here.

This should be enough to start with :-)

I'll suggest not modifing style/xp/grid.css - just create a local CSS and include it after grid.css.

You can use code like this to see the exact generated markup and all attached class names.

alert(obj.getTemplate("top/item", 1));

The reply above is correct, the classes .active-box-normal (outer div) and .active-box-item (inner div) are the right ones.
Thanks Sudhaker Raj!