CGridView Header Row color

Hello,

I know my question is simple but I’ve been looking for an answer and I didn’t find an easy way to do this. I just want to change the color of the header row in the CGridView widget. Which is the simplest way to do this?

Thanks

just add a CSS rule that takes the header row…

something like




.items thead {

   color:red;

}



‘items’ is the default class for the gridview items - http://www.yiiframework.com/doc/api/1.1/CBaseListView#itemsCssClass-detail

Thanks, but I added that in the main.css and it doesn’t work.

It’s because grid view registers it’s CSS file after the main.css and it overwrites your rule… you need to put your rule after that one…

btw… you need to use ".items thead th" as this is the rule that is used in the gridview default css

just complementing Maurizio, to be simpler set it as important


.items thead th{

   color:red!important;

}

How do I put my rule after grid view registers its CSS file? Which is the grid view’s CSS file? Is it screen.css? (Note: I have created my application with gii)

Hi Gustavo, I put this code:




.items thead th{

   color:red!important;

}



in the main.css and it doesn’t work.

note that the ‘color’ changes the text color… and if you have links in the header (for sorting the column) than this CSS rule does not apply to them…

try with




.items thead th{

   background:red!important;

}

it should work… then if you need something else (like text color)… study a bit the source of the generated HTML to find the CSS rule you need to use…

Oh, that’s true. I didn’t realize that header texts have links. Now it works. Thanks a lot, mdomba and Gustavo.