Posted by & filed under Uncategorized.

Here is the lowdown on theming jQuery:

  • Create the Theme: jqueryui.com/themeroller/
  • Extract and upload the contents of the theme’s css directory to /css/jui (we set this later on…)
  • Add themeUrl, theme, and cssFile (see example below). Be sure to set them according to the path of the files you just uploaded.
    themeurl is the base folder for the theme… usually in the css folder. I use /css/jui.
    theme is the folder name inside e.g. /css/jui/humanity
    cssfile is the theme’s cssfile.


$this->widget('zii.widgets.jui.CJuiAccordion', array(
'panels'=>array(
...
),

/* optional: change visual
* themeUrl: "where the themes for this widget are located?"
* theme: theme name. Note that there must be a folder under themeUrl with the theme name
* cssFile: specifies the css file name under the theme folder. You may specify a
* single filename or an array of filenames
* try http://jqueryui.com/themeroller/
*/
'themeUrl' => Yii::app()->baseUrl.'/css/jui' ,
'theme'=>'humanity', //try 'bee' also to see the changes
'cssFile'=>array('jquery-ui.css' /*,anotherfile.css, etc.css*/),

'options'=>array(
'autoHeight'=>false,
'navigation'=>true,
'animated'=>'bounceslide',
),
));

Leave a Reply

You must be logged in to post a comment.