1. Requirements
2. Usage
3. Customizing
4. Resources

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Requirements ¶

Yii 1.1.x, created and tested with 1.1.7

Usage ¶

Extract to your extensions folder.

Basic usage is very simple. In your view file init the widget and then start building your form :

$this->widget('ext.pixelmatrix.EUniform');

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

Options ¶

Uniform works by calling a jQuery selector on applicable elements. By default the selector is 'select, input, textarea' so all of those elements will be converted.

You can set the following parameters :

$this->widget('ext.pixelmatrix.EUniform', array(
    //
    // Use your own jQuery selector. Useful to avoid classes of elements.
    'selector' => 'select:not(.no-uniform), input:not(:button), textarea',
    //
    // Styling theme, options available are 'default' and 'aristo'
    'theme' => 'aristo',
    //
    // Uniform options, see the documentation
    'options' => array('useID' => false)
));

Using by default ¶

If you want to use the styles across your site by default, extend CActiveForm as follows :

class UniActiveForm extends CActiveForm
{
    public $uniform = array();
	
    public function init()
    {
        $this->widget('ext.pixelmatrix.EUniform', $this->uniform);
        parent::init();
    }
}

And then do a search / replace of CActiveForm with UniActiveForm across your site. You can set Uniform parameters through the 'uniform' array.

$form = $this->beginWidget('UniActiveForm', array(
'uniform' => array('theme' => 'aristo'),
'id' => 'my-form',
'enableClientvalidation' => true,
));

Customizing ¶

The 'Aristo' theme available for download on the Uniform web site has been updated to take many bugfixes found in the default theme.

The default theme has very minor modifications for a better look using Yii's default form.css.

To customize the extension, simply use one of the current themes and start hacking ! "Just" modify the CSS and make your own sprite image.

Changing the color scheme on Aristo is super simple, just open up the sprite and modify the color balance in GIMP. Done !

Resources ¶

• Try out a demo
• Uniform Documentation