Tutorial: Custom checkboxes and radio buttons - JoomlArt
Resume & Portfolio J! Template Download
version RC is available Free Download
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • pixelzombie Friend
    #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


    1. pz_custom_inputs.zip
    John Brett Moderator
    #435875

    Very cool idea and tutorial
    Thanks, Frank!

Viewing 2 posts - 1 through 2 (of 2 total)

This topic contains 2 replies, has 2 voices, and was last updated by  John Brett 4 years, 4 months ago.

You must be logged in to reply to this topic.