You are viewing revision #4 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.
- 1 - Create a Zii Widgets Design
- 2 - Include the necessary files into Yii
- 3 - Configure the Zii Widget components to use our "theme"
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)
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
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]
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', ), ), ), ...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\CJuiWidget.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...
@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', ),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.
@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
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.
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";
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 :)
jqueryui Folder
Hi
I still cannot get it work. Wondering what should be inside jqueryui folder.
Thank you
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.
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', ), ),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
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', ), ), ),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 ?
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.