Difference between #2 and #3 of
Theming your Zii Widgets

Revision #3 has been created by Luis Lobo Borobia on Dec 4, 2010, 1:10:47 AM with the memo:

Updated links, added headers
« previous (#2) next (#4) »

Changes

Title unchanged

Theming your Zii Widgets

Category unchanged

Tutorials

Yii version unchanged

Tags unchanged

jquery ui CJuiWidget theme theming

Content changed

[...]
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 Design
[...]
The 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.

Each component needs to be configured. The best way is to do it in the main configuration file: /protected/config/main.php
[...]
17 0
31 followers
Viewed: 62 041 times
Version: 1.1
Category: Tutorials
Tags: jquery ui CJuiWidget theme theming
Written by: Luis Lobo Borobia
Last updated by: Ivan Wilhelm
Created on: Dec 4, 2010
Last updated: 13 years ago
Update Article
Revert to #2 | Revert to #3

Revisions

View all history