Customizing looks (Advanced)

Using Skins, we can proceed as follows:

We can change the default CSS rules applied to the form elements with the parameter htmlOptions. Here we can specify a custom CSS class or provide inline styling rules as follows:

$htmlOptions => array('attribute' => 'value');
$form->textField($model, $attribute, $htmlOptions);
$form->dropDownList($model, $attribute, $data, $htmlOptions);

In the same way, elements such as textfield and dropdownlist and the label radioButtonsLists provide an optional parameter $htmlOptions to customize the look of a given element.

If all forms across your application are supposed to use the same styling rules, instead of repeating htmlOptions for each form, you can add these rules to widgetFactory in the application configuration. In protected/config/main.php, add the following lines:

...
'components'=>array(
  'widgetFactory'=>array(
    'class'=>'CWidgetFactory',
    'widgets'=>array(
      'CActiveForm'=>array(
        'htmlOptions'=>array(
          'class'=>'myClass1 myClass2',
        ),
      ),
    ),
  )
...
)

Now you can specify the element with the following:

$form=$this->beginWidget('CActiveForm', array(
	'id'=>'user-form',
));

If you want some forms to use different CSS rules than the ones specified in widgetFactory, you can do it by specifying the htmlOptions array for this form. Additionally, you can customize form styles with the following clientOption attributes:

$form=$this->beginWidget('CActiveForm', array(
  'clientOptions'=>array(
    'errorCssClass'=>'errorClass', 
    'successCssClass'=>'successClass',
    'validatingCssClass'=>'inProgress',
    'errorMessageCssClass'=>'msgClass',
)));

These attributes are explained as follows:

For widgets such as detailView, gridView, and listView, you can specify the template to be used to change the way these widgets are rendered.

$this->widget('zii.widgets.CDetailView', array(
  'htmlOptions'=>array( 'class'=>'myClass'),
  'template'=>'<span>{label}</span><span>{value}</span>',
  ...
));

We can use Skins to customise the look of Yii widgets; all the rules we specified under widgetFactory in main.php can be moved to the Skin files. Additionally, we can specify multiple Skins for each widget and decide which Skin to use when we need it. When the enableSkin option for widgetFactory is set to true, Yii will try to find the Skins before rendering the widgets. If the Skins are not available, Yii's inbuilt styling will be used.

You can find more details on customizing Yii widgets on the link http://danaluther.blogspot.in/2012/02/leveraging-widgets-widget-factory-and.html.