Theming your Zii Widgets

Tutorials

jquery ui CJuiWidget theme theming

Normally a site or web application is designed with a specific aesthetic, and normally obeys to the identity of the application.

Yii offers a way to integrate User Interface Controls named Zii Widgets, based on JQuery UI to our applications, but they come with a default design.

This design can be easily changed with a series of simple steps, that were told by [Sebas](http://www.yiiframework.com/user/54/ "Sebas") to me. We have searched several times on the site, the forum, tutorials, but couldn't find a specific place where you could get this information, in a simple and effective way. That's why I decided to share this acquired knowledge, passed by [Sebas](http://www.yiiframework.com/user/54/ "Sebas"), and written by me.

1 - Create a Zii Widgets DesignThe easiest form is to use the tool provided by JQuery UI to create the designs or "themes" that better fit our web application.

We have to navigate to [JQuery UI Theme Roller](http://jqueryui.com/themeroller "JQuery UI Theme Roller"), and play with it until we get our own design. Once we did that, we have to download the "theme". Theme Roller asks you to select the version. Version 1.8.6 was available when the article was written, and is compatible with Yii 1.1.5. 2 - Include the necessary files into Yii  
----------------------------------------


The next step is to copy the necessary files in one of the public folders of our application: the created resources, CSS and images, will be used by Zii Widgets (JQuery UI) to give our configured theme to our user interface.Finally, you have to change the filename of the CSS file, from 'jquery-ui-1.8.6.custom.css', to 'jquery-ui.css'.

3 - Configure the Zii Widget components to use our "theme"
 
----------------------------------------------------------


The last step involves configuring the Zii Widget components, so that they use the theme.(Spanish Version: [Cambiando el diseño de JuiWidgets](http://www.yiiframework.com/wiki/108/cambiando-el-diseno-de-juiwidgets/ "Cambiando el diseño de JuiWidgets"))
 
 
(Versão em Português (Brasil): [Ativando temas no Zii Widgets](http://www.yiiframework.com/wiki/174/ativando-temas-no-zii-widgets/ "Ativando temas no Zii Widgets"))