Modify CGridView look

The CGridView class in Yii is a state of art solution, that gives you out-of-the-box full model browsing features including filtering, pagination and sorting. The picture would be perfect, if not for default look of grid view, which is a little bit “nasty”! :> It is understandable, as Yii author focused himself on delivering perfectly working framework, that does not necessary have to be pretty in the same time.

However, basing on famous flexibility of all components in Yii, with a help of few simple steps, you can completely change the look & feel of your grid view.

This magic is possible thanks to CGridView.cssFile property, which allows you to modify look and feel of your grid view. In particular, to change look (styling) of your CGridView you have to:

1. Locate original CSS file (at /zii/widgets/assets/gridview/styles.css`) in framework directory.
2. Copy all or selected styles to your own CSS file (the one that you include in layout and use in your views).
3. Modify required styles or elements in copied CSS code.
4. Set cssFile property of your CGridView to false.

This will force grid to use your own styles.

With just a little bit change, you can use this method to change for example CDetailView look.

The idea for this article came from this Yii forum thread.