1. WANTED: Forum Moderators >> and YOU can help!


    April Responsive Joomla template for Interior Design - JA Decor is out >> Demo | More info


    April Responsive Magento theme JM Leathercraft >> Demo | More info


User Tag List

+ Reply to Thread
 
Results 1 to 2 of 2
  1. #1

     ExpiredJoomla Developer Membership - 1 year Expired
    pixelzombie's Avatar
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    339
    Points
    921.94
    Downloads
    562
    Uploads
    0
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    31
    Thanked 164 Times in 117 Posts

    Cool Tutorial: Custom checkboxes and radio buttons

    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
    Code:
    <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
    Code:
    <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
    Attached Files

  2. The Following 2 Users Say Thank You to pixelzombie For This Useful Post:

    jwbrett (01-28-2012), TomC (01-29-2012)

  3. #2
    Global Moderator jwbrett's Avatar
    Join Date
    Mar 2007
    Location
    Washington, DC
    Posts
    2,337
    Points
    15,311.60
    Downloads
    261
    Uploads
    0
    Mentioned
    9 Post(s)
    Tagged
    1 Thread(s)
    Thanks
    122
    Thanked 622 Times in 493 Posts
    Very cool idea and tutorial
    Thanks, Frank!
    Please, remember to click "THANKS" if I've been a help to you.
    JWBrett on Google+

  4. The Following User Says Thank You to jwbrett For This Useful Post:

    pixelzombie (01-29-2012)

+ Reply to Thread

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Stop working on Weekend!X

If your Boss broke your Joomla template or extension and ask you to fix it today. Here is the immediate solution. Then leave your request on the right forum, we will be helping after the Weekend Happy hours
Our Happy Hours: Friday 18:00 - Monday 9:00

No working during happy hours. Keep calm and don't break anything.