Yii 1.1: pixelmatrix-uniform

Sexy forms with jQuery
30 followers

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

Total 12 comments

#8346 report it
inverse at 2012/05/28 03:56am
checkBoxList Problem

Hi all

I am using this widget and everything is just great about it.

Recently I encountered a problem when I used checkBoxList. The check-box and the label are appearing in different line. If you are not using this widget then you have to change the form.css and add this line and you are done.

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }

When I searched for it then I got to know that this problem should not appear while using this widget, but I was unluckily getting it.I tried everything but nothing helped. Later I changed the default selector value of "input" to "input:no(:checkbox)" and add the above line in uniform.default.css. And it work with the cost of simple look of check-box.

If anyone knows the solution apart from above then please do tell me. If everyone is facing the same problem then I hope this problem will be rectified in next release.

Thanx for this great widget

#6621 report it
ianaré at 2012/01/22 12:03pm
re: Bootstrap

Uniform doesn't add or change behaviours, it's just for skinning form elements. Bootstrap styles form elements AND provides other functionalities.

However, crucially for my requirements, Bootstrap doesn't have a style-able select element.

Uniform's element selectors can be easily configured, so it should be possible to use Bootstrap with Uniform – but not for the same elements. Using Bootstrap for dropdows or modal windows shouldn't interfere with Uniform.

#6620 report it
ianaré at 2012/01/22 11:50am
re: Huge fonts

The base CSS styles included in the extension have been slightly modified to work better with Yii forms. Using the default Yii CSS the elements work quite nicely, but if you're using your own stylesheets you may need to modify the uniform CSS.

#6619 report it
Wiseon3 at 2012/01/22 07:01am
Different from bootstrap

@radoo Actually this is different from what bootstrap does, as it is specifically only for selects, checkboxes, radios and file input fields. It could be used together with bootstrap to improve the aspect of the page/site, but unfortunately they are not compatible.

#6615 report it
radoo at 2012/01/21 07:48pm
bootstrap

This is similar to what bootstrap does (available also as an yii extension), right?

#6609 report it
jmariani at 2012/01/20 08:02pm
Huge fonts

Hi!

Thank you very much for this. I've tried this one in Drupal also, and have the same issue as here.

Fonts are much bigger, elements are also much bigger, Buttons disappear and file upload controls are aligned to the right of previous element instead of into their own row.

Do you have any idea or tip on how to fix this?

Thank you in advance!

#5785 report it
inverse at 2011/11/13 11:34am
not working

Is it compatible with 1.1.2. The form is not getting display when i use this widget. I simply enter one line in view file

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

After entering the above line the form disappears.

#4485 report it
ianaré at 2011/07/13 05:25am
thanks

Extension updated. I'm not sure what that was doing in there but it needed to be removed.

#4470 report it
arash at 2011/07/12 02:58am
a problem

in provided css files, somewhere you used "*display: inline;" which is not a valid styling (i think). what do you mean by this?

#4439 report it
Peter JK at 2011/07/09 03:34am
Yes.. Thank You.. thank you very much...

wow,

thank you, ianare... i have been waiting so long for extension like this. You know, other css extension has designed for interface but not for form. so, i still using 'ugly' yii-blog-sample form.css .. :-D

thx once again...

#4434 report it
bryglen at 2011/07/08 10:59am
Great

haven't tried it.. but great, i love uniform js also

#4433 report it
Haensel at 2011/07/08 10:15am
Love it

Thanks, great idea!

Leave a comment

Please to leave your comment.

Create extension