Using custom JUI Themes

Hi!

I know, this topic have been discussed several times, but there are still some lowpoints, e.g. it is not working for me at all.

What I need: I need to use my JUI theme, that I’ve created using the ThemeRoller.

The problem: Every approach, using my very own jui.css-File failed.

What have I done:

I tried it in differend ways. First I followed the the tutorial in the wiki (http://www.yiiframework.com/wiki/107/theming-your-zii-widgets).

Then I discovered, that Yii loads my jui.css File, but then continues to load its own base-JUI-theme, overwritting my css-File.

I tried to use the new excludeFile method for the assetManager, without success. It still tried to load the base-JUI.css but then complained about an error, not finding the base-JUI css File.

(I thought, using excludeFile would prevent the assetManager to look for that file/directory).

Then I followed a differend approach, wich is mentioned here in the forum:

<?php Yii::app()->clientScript->registerCoreScript( 'jquery.ui' ); ?>

<?php $phoenix = Yii::app()->assetManager->publish( Yii::app()->basePath . '/resources/jquery' ); ?>

<?php Yii::app()->clientScript->registerCssFile( $phoenix . '/jquery-ui-custom.css' ); ?>	 

Then it’s loading my css File, just overwriting it’s once more later on, when the assetManager comes around. First it loads my css File, then it loads the standard CSS file, coming with YII.

So it all come down to one question: Is there an easy way to prevent YII from ‘deploying’ the standard JUI theme (‘base’) and using my own theme like called ‘pusemuckel’?

I thought, the widgetFactory or the assetManager->publish method will do the job…

Best regards

You have to set the cssFile property of the widget to false.

You can do it even in CWidgetFactory:

		'widgetFactory'=>array(

			'class'=>'CWidgetFactory',

			'widgets'=>array(

				'CJuiAutoComplete'=>array('cssFile'=>false),

				'CJuiDatePicker'=>array('cssFile'=>false)

			),

		),

Hi zaccaria,

thanks a lot for your reply.

...

				'CJuiAutoComplete'=>array('cssFile'=>false),

				'CJuiDatePicker'=>array('cssFile'=>false)

...

Well, I followed your instructions, but without any effect. Firebug shows me, that Yii is still loading the jquery-ui.css of the framework.

My first guess was, that I have to set the cssFile=>false for every widget I use (at the beginning I forgot one widget). With one widget left, maybe the assetManager want to load the default css-File for that widget. But after putting all widgets into the main.php, defining the properties throu the widgetFactory, nothing changed at all.

Here the snipplet of the main.php:

       'widgetFactory' => array(

        		'class'=>'CWidgetFactory',

            'widgets' => array(

                'CJuiAutoComplete' => array(

                   // 'themeUrl' => '/rma/ticker/themes/phoenix/jquery',

                   // 'theme' => 'phoenix',

                    'cssFile'=>false,

                ),

                'CJuiDialog' => array(

                   // 'themeUrl' => '/rma/ticker/themes/phoenix/jquery',

                   // 'theme' => 'phoenix',

                    'cssFile'=>false,

                ),

                'CJuiDatePicker' => array(

                   // 'themeUrl' => '/rma/ticker/themes/phoenix/jquery',

                   // 'theme' => 'phoenix',

                    'cssFile'=>false,

                ),

                'CJuiSlider' => array(

                   // 'themeUrl' => '/rma/ticker/themes/phoenix/jquery',

                   // 'theme' => 'phoenix',

                    'cssFile'=>false,

                ),

            ),

Here, for better understanding, something from Firebug:

http://phoenixap01t.example.org/rma/ticker/assets/3c304b7f/jquery-ui-custom.css

(loading some more css-Files)

http://phoenixap01t.example.org/rma/ticker/assets/6475d040/jui/css/base/jquery-ui.css

Ideas are welcome

Best regards

That’s really strange, with this configuration it works properly for me.

Try to do a new view with only one CJuiAutocomplete, for example, and test if it includes the css anyway. It can be you have some widget you forgot.

I will investigate a little bit more. Thanks for your answers!

Best regards

rall0r

Try this mate:

'clientScript'=>array(

      'scriptMap'=>array(

        'jquery-ui.css'=>false,

      ),

    ),

In main.php:

'clientScript' => array(

            'scriptMap' => array(

                'jquery-ui.css' => 'path/to/your/theme/jquery-ui.css',

            ),

        ),

I’ve had the same problem a time ago

In my case it was the line

cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');

in my layout code

Hi Mr.Switcher

I’ve had the same problem,too