Public Forums 71,145 posts

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#170950

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 (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

---

Attachments:

1. pz_custom_inputs.zip

2 users say Thank You to pixelzombie for this useful post

1. John Wesley Brett
2. TomC

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#435875

Very cool idea and tutorial
Thanks, Frank!

1 user says Thank You to John Wesley Brett for this useful post

1. pixelzombie

[Author]

Posts