Angularjs ng-grid: how to change the header style

Question

How can I restore the title of an ng grid? In particular, how to change the background color and text color of the title bar?

Answer 1

You can override the background-color property in the .ngHeaderCell class declared in ng-grid.css to use the background color you want in the header cells.

If you do not want to modify the original ng-grid css, you can create your own css and load it after ng-grid css, in which you can subsequently override the same .ngHeaderCell class using:

 .ngHeaderCell { background-color: [your background color] !important; bottom: 0; color: [your foreground color] !important; position: absolute; top: 0; } 

Answer 2

I have not looked through the ng grid before, but it looks like a css file for styling? I would advise either to modify the actual css file, or to rewrite these changes, declaring mine below where grid.css is declared. Check the link if this is what you are talking about.

https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css

For example, one of the css attributes in the above file is below, just execute ctrl-f and find the attributes you want to change.

 .ngHeaderCell { position: absolute; top: 0; bottom: 0; background-color: inherit; }