Customizing looks (Advanced)
In this recipe we will look at the various options to customize the look of page elements. Yii provides attributes such as htmlOptions, labelOptions, and cssFile to add your own CSS rules to the page elements.
How to do it...
Use your own class for the form as follows:
$form=$this->beginWidget('CActiveForm', array( 'id'=>'user-form', 'htmlOptions' => array('class' => 'myclass'), ));Set the HTML options (name, ID, class, and so on) for elements as follows:
$htmlOptions = array('class'=>'myClass', 'id'=>'myId') $form->textField($model, $attribute, $htmlOptions)
Using Skins, we can proceed as follows:
Enable Skins in the application configuration with the following code:
'widgetFactory'=>array( 'class'=>'CWidgetFactory', 'enableSkin'=>true, )
To create a new skin for a widget, create a file with the name of the widget in the Skins folder, that is,
/protected/views/skins/CDetailView.php, with the following code:return array( 'default'=>array( 'htmlOptions'=>array( 'class'=>'class_1', ), 'template'=>'<span>{label}</span><span>{value}</span>', ), 'stripped'=>array( 'htmlOptions'=>array( 'class'=>'stripped', ), 'template'=>'<span>{label}</span><span>{value}</span>', ) );Use the widget with a Skin.
Use a default skin.
$this->widget('CDetailView);Or, use our created Skin as follows:
$this->widget('CDetailView, array('skin'=>'stripped'));
How it works...
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:
The
errorCssClassattribute allows you to set the CSS class to be assigned to the container whose associated input has the AJAX validation errorWith the
successCssClassattribute, you can set the class for the container whose associated input passes AJAX validationThe
validatingCssClassattribute allows you to set the CSS class to be assigned to the container whose associated input is currently being validated via AJAXThe
errorMessageCssClassattribute sets the CSS class to the error message returned by AJAX validationYou can also change the container element for an input field with the
inputContainerattribute
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.
There's more...
You can find more details on customizing Yii widgets on the link http://danaluther.blogspot.in/2012/02/leveraging-widgets-widget-factory-and.html.