Yii 1.1: Theming your Zii Widgets

36 followers

One aspect of User Interface Design has to do with the coherence of the design and the use of the colors between the different User Interface Components used.

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 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, and written by me.

1 - Create a Zii Widgets Design

Every Zii Widgets use JQuery UI.

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, 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.

In my case, I created a 'jqueryui' folder inside css: /css/jqueryui This folder will be assigned to CJuiWidget's property themeUrl.

Then I created an other folder, with the name of the theme I want to use, in my case, 'fc'. The name of this folder will be assigned to CJuiWidget's property theme.

Then, inside fc folder (or the name you used for your theme), you have to copy some of the files inside the archive you downloaded from Theme Roller.

It is only necessary to copy the files inside the /css/custom-theme/ folder into the 'fc' folder.

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

Following is a sample of my configuration:

$config = array(
'components' => array(
        // enables theme based JQueryUI's
        'widgetFactory' => array(
            'widgets' => array(
                'CJuiAutoComplete' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
                'CJuiDialog' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
                'CJuiDatePicker' => array(
                    'themeUrl' => '/css/jqueryui',
                    'theme' => 'fc',
                ),
            ),
        ),

This way, the three components, CJuiAutoComplete, CJuiDialog and CJuiDatePicker, will use the defined theme.

(Spanish Version: Cambiando el diseño de JuiWidgets)

(Versão em Português (Brasil): Ativando temas no Zii Widgets)

Total 16 comments

#12112 report it
sanguina at 2013/02/27 03:05pm
CWebApplication.CJuiAutoComplete" is not defined

@ #7495 - Don Felipe - Hi Don Felipe,

Following your ZII theming method, I get this error:

CWebApplication.CJuiAutoComplete" is not defined

Where in main/config do we add this property ?

#11769 report it
kutukampret at 2013/02/02 12:12pm
i got to change a little bit

i am using yii 1.1.13

and i got to change a little bit the config for main.php into something like this. *monitoring is the name of the webapp, and kp is the name of the theme

'widgetFactory' => array(
            'widgets' => array(
                'CJuiAutoComplete' => array(
                    'themeUrl' => '/monitoring/css/jqueryui',
                    'theme' => 'kp',
                ),
                'CJuiDialog' => array(
                    'themeUrl' => '/monitoring/css/jqueryui',
                    'theme' => 'kp',
                ),
                'CJuiTabs' => array(
                    'themeUrl' => '/monitoring/css/jqueryui',
                    'theme' => 'kp',
                ),
            ),
        ),
#10241 report it
sirin k at 2012/10/13 11:33am
Sorry to say that

Sorry to say that non of your solution worked fine for my datepicker so that i have just added a line in my basic layout file ie main.php.

ie

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/jqueryui/south-street/jquery-ui.css" />

the theme i needed was south-street.and it worked fine for me.:)

-Sirin

#9822 report it
Kkk at 2012/09/13 02:51am
Response to Bluyell

I resolved the same issue like this: In main.php inside 'components' array:

'clientScript' => array(
            'scriptMap' => array(
                'jquery-ui.css' => 'path/to/your/theme/jquery-ui.css',
            ),
        ),
#7495 report it
Don Felipe at 2012/03/26 08:38am
How to download jQuery UI theme and where to put it?

@SammyGh (and others)

Customize and download your theme from here, then extract the ZIP file and copy the content of the "css" subfolder into your local "/css/ui/" folder of the webapp:

/htdocs/webapp/css/ui/themename/images/
/htdocs/webapp/css/ui/themename/jquery-ui-1.8.11.custom.css

Then, in your main.php, add these values:

'CJuiAutoComplete' => array(
    'themeUrl' => '/css/ui',
    'theme' => 'themename',
    'cssFile' => 'jquery-ui-1.8.11.custom.css',
),

Last not least just replace "webapp" and "themename" as well as the name of the CSS file (it may change depending on its version) accordingly, and you're done.

#7258 report it
Liz at 2012/03/07 11:41am
jqueryui Folder

Hi

I still cannot get it work. Wondering what should be inside jqueryui folder.

Thank you

#6430 report it
bumslayer at 2012/01/10 12:19am
Re: Alternative Method

Another method that worked for me is to copy your theme folder into /path/to/yii/framework/web/js/jui/css. Inside this folder is a base folder similar to what can be found at the assets folder specified by tommo. For this to work, you only need to clear the assets folder first, in order for the framework to rebuild it and include your themes to the assets folder.

I discovered this when I upgraded to yii 1.1.9 :)

#6396 report it
coderkk at 2012/01/06 08:43pm
scriptMap

Sometime you see the yii reload 2 times jquery ui css file like

So, I wrote this script at layout/main.php to remap the path /* zii.widget use it own assets path, so we can remap the script to specify path. */ $cs = Yii::app()->getClientScript(); $cs->scriptMap["jquery-ui.css"]=Yii::app()->request->baseUrl . "/css/jui/humanity/jquery-ui-1.8.16.custom.css"; $cs->scriptMap["jquery-ui.min.js"]=Yii::app()->request->baseUrl . "/js/jquery-ui-1.8.16.custom.min.js";

#5899 report it
artjc at 2011/11/23 12:20pm
assets conflict when theming Jui widget

if you have problems loading the wrong resource, delete the entire directory info assets, YII re-create the resources required in the directory assets.

Use forum for such questions, thanks.

#5898 report it
Asgaroth at 2011/11/23 11:46am
@christiansalazarh

The reason for that can only be tha tyou have more than 1 jQuery UI widget in your page, so when you call your CJuiDatePicker it includes the redmond theme, but another widget (which you have not yet configured to use redmond) is still using the base theme and thus includingn it as well

#5896 report it
bluyell at 2011/11/23 09:49am
assets conflict when theming Jui widget.

after i configure the widgetFactory component in config/main.php :

// enables theme based JQueryUI's
        'widgetFactory' => array(
            'widgets' => array(
                'CJuiDatePicker' => array(
                    'themeUrl' => 'jquery-ui',
                    'theme' => 'redmond',
                ),
            ),
       ),

the generated html code in main layout is:

<link rel="stylesheet" type="text/css" href="jquery-ui/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/p1/assets/71aff896/jui/css/base/jquery-ui.css"/>
<script type="text/javascript" src="/p1/assets/71aff896/jquery.js"></script>
<title>bla bla</title>

as you can see, the asset "/p1/assets/71aff896/jui/css/base/jquery-ui.css" replaces the desired css theme 'redmond' file, and the resulting theme is: 'base' and not 'redmond'.

my question is: how to avoid this.

#4496 report it
Asgaroth at 2011/07/13 11:41am
@artjc

If you use that you still have to mape the cssFile to false, otherwise it wont work:

'CJuiAccordion'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiAutoComplete' => array(
                            'cssFile'=>false,
                        ),
                         'CJuiButton'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiDatePicker'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiDialog'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiDraggable'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiDroppable'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiInputWidget'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiProgressBar'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiResizable'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiSelectable'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiSlider'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiSliderInput'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiSortable'=> array(
                            'cssFile'=>false,
                        ),
                         'CJuiTabs'=> array(
                            'cssFile'=>false,
                        ),
                    'CJuiWidget' => array(
                        'themeUrl' => '/css/jqueryui',
                        'theme' => 'my-theme',
                    ),
#4417 report it
Peter JK at 2011/07/07 01:01am
Alternative method #2

1. put the new theme on \framework\web\js\source\jui​\css\

there is a default theme (base theme) there

2. edit \framework\zii\widgets\jui\C​JuiWidget.php

change the line #45 (on yii 1.1.8) from public $theme='base' to public $theme='new_theme'

3. make empty the asset folder..

done...

#4340 report it
artjc at 2011/06/27 12:38pm
Set better ZiiWidget

A better way to optimize the configuration of ZiiWidgets with fewer lines would be:

...
                'widgetFactory' => array(
                    'widgets' => array(
                         'CJuiAccordion',
                         'CJuiAutoComplete',
                         'CJuiButton',
                         'CJuiDatePicker',
                         'CJuiDialog',
                         'CJuiDraggable',
                         'CJuiDroppable',
                         'CJuiInputWidget',
                         'CJuiProgressBar',
                         'CJuiResizable',
                         'CJuiSelectable',
                         'CJuiSlider',
                         'CJuiSliderInput',
                         'CJuiSortable',
                         'CJuiTabs',
                         'CJuiWidget' => array(
                                            'themeUrl' => '/css/jqueryui',
                                            'theme' => 'fc',
                                        ),
                    ),
                ),
...
#4178 report it
dinhtrung at 2011/06/13 02:07pm
Have to add application name before css folder

I tried to call Yii::app()->request->baseUrl to get the relative path of my yii app into the configuration but it not works.

The instruction only works when you put your css folder in the server root folder. Something like:

http://localhost/css/jqueryui/[your theme]

#3358 report it
Tommo at 2011/04/05 11:21pm
Alternative method

Alternatively you can locate the existing "base" theme in your assets folder and put the new theme alongside it.

Then you only have to specify theme instead of both theme and themeUrl

Leave a comment

Please to leave your comment.

Write new article