Tutorial: Custom checkboxes and radio buttons

[pixelzombie]

PixelZombie Custom Inputs



It's time for a little help again! I'm currently developing a very dark Joomla Template and I thought "Man, those checkboxes and radio buttons look really bad on a dark background". So I searched the web and found a nice tutorial to make myself some nice inputs myself here. I needed to modify the css a little to make it work on all joomla pages.

Features

I made 10 styles for you guys. Five for a light background and five to fit dark themed sites. I packed it all up and you can find inside the archive attached to this post:

• the css file
• the source file (.psd)
• the 10 styles as .png graphic

This technique features four states of your checkbox and radio button:

• normal
• mouseover (hover)
• click (focus)
• disabled

Restrictions

VERY IMPORTANT
To make this css awesomeness work, your <input> must be BEFORE your <label>. This is crucial! You have to modify every module or extension that way. Here's the Joomla default login module "remember me" checkbox as an example:

/modules/mod_login/tmpl/default.php

wrong

<label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label>
<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />

right

<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />
<label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label>

Since this is css only, you probably know what comes now: IE is not supported before version 9! If you use an Internet Explorer 5, 6, 7 or 8 it will only display the default inputs as a safe fallback. Working browsers are:

• Firefox 1.5+
• Opera 9.6+
• Safari 3.2+
• iPhone/iPod Safari
• Chrome 4+
• IE9+

Working Extensions [tested] (to be continued)

Every extension and module that has the <input> before the <label> in it's html output.

• Joomla Default - Search
• Joomla Default - Polls
• BreezingForms

How to make it work

#1 Simply copy the css code found in the css folder of the attached zip-file anywhere in your templates/your_template_name/css/template.css file! Change the filename to one of the files respecting your cholor choice or make your own custom input file.

#2 copy the chosen file to your templates/your_template_name/images folder.

#3 upload the template.css and the image to your webspace.

#4 be happy and click the thanks-button

Cheers!
Frank | PixelZombie

[jwbrett]

Very cool idea and tutorial
Thanks, Frank!