Customising CJuiDialog

Archives Yii 1.0.x Discussions
1

Hello can anyone help me with CJuiDialog I tried to the following:

<?php

$this->beginWidget(‘zii.widgets.jui.CJuiDialog’, array(

                'id' =&gt; 'mydialog',


                'options' =&gt; array(


                    'autoOpen' =&gt; false,


                    'buttons' =&gt; array(


                        &quot;1&quot; =&gt; 'js:function(){ setOccupancy(1);}',


                        &quot;2&quot; =&gt; 'js:function(){ setOccupancy(2);}',


                        &quot;3&quot; =&gt; 'js:function(){ setOccupancy(3);}',


                        &quot;4&quot; =&gt; 'js:function(){ setOccupancy(4);}',


                        &quot;5&quot; =&gt; 'js:function(){ setOccupancy(5);}',


                        &quot;6&quot; =&gt; 'js:function(){ setOccupancy(6);}',


                        &quot;7&quot; =&gt; 'js:function(){ setOccupancy(7);}', ),


                ),

));

$this->endWidget(‘zii.widgets.jui.CJuiDialog’); ?>

<?php echo CHtml::endForm(); ?>

the widget work fine but i need to add style to the buttons and all widget, i didn’t know how to chenge the css :S

the zii documentation about this is not so clear :S I’ll appreciate any fast reply :S

2

Sorry for late answer, but maybe others will make a use of this.

As far as I’m informed, jQuery UI itself does not let you change buttons style easily. I.e. There isn’t such option among all available, that would allow you to do this. In I’m not mistaken, the only way to do it, is to alter CSS file that comes with jQuery UI to modify or overload class these buttons uses.

And since CJuiButton is only a simple helper that helps rendering jQuery UI code responsible for generating dialogs, but does not introduces any new behaviour to it, it is also impossible or not so easy in Yii.

3

Hi there,

The easiest way is by changing your jquery UI css as Trej said, the other option is that you change manually the following classes:

ui-button

ui-widget

ui-state-default

ui-corner-all

ui-button-text-only

ui-state-hover

and

ui-button-text

Here an example of the HTML




<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">

<span class="ui-button-text">I am a button</span>

</button>

Now, there is no need to change all of them, every one of them has a functionality, check which one is the one you want customize (by reading its CSS file) and do it manually.

Again, the easiest way is to create your own theme: http://jqueryui.com/themeroller/

Cheers