We were recently asked by one of our members how to use the jQuery form masking plugin that we developed on their sites login form. I figured this would be a nice example of one of the many ways to take advantage of the custom code editor in Configurator.

This themelet used in this tutorial is Liquorice, but the same principles apply to all themelets.

Previews of the before and after

Default login module before password masking has been added:

Login form with masking added and unchecked:

Login form with masking added and checked:

Step 1: Include the plugin file

Since the plugin already exists in Configurator, all we need to do is include the javascript file on the frontend of the site.

To do this, we are going to use the built in Code Editor tool in Configurator to inject the jQuery plugin into the html head.

Go to the Tools > Code Editor tab in Configurator, then select the custom php option (for the themelet you have active) from the drop down.

{code}

addScript('administrator/components/com_configurator/js/showpassword.js'); ?>{/code}

Step 2: Include the plugin javascript

You should now see the showpassword.js file included in the head of your site, so now you need to activate the plugin from your custom javascript.

Still in the Code Editor, select the custom javascript option this time and paste in the following javascript:

{code} $('#passwd').showPassword(); {/code}

Step 3: Add some custom css to tweak the layout

The inputs in the login form have a set width, so we are going to override this with some custom css.

Now select the custom javascript option this time and paste in the following javascript:

{code} #bd #login-mod .login-password input.undefined{width:16px;} {/code}