Change remind username / password view

If you want to change the way your Joomla site’s password resetting or username reminding view looks, you have to edit Joomla’s core files or create template overrides for those files.

The file for remind username view: \components\com_user\views\remind\tmpl\default.php

The file for reset password view: \components\com_user\views\reset\tmpl\default.php

Both files look almost the same. To alter the looks of the input forms, the simpliest way is to add a div around the form.

Before:

{code}

<form action=”” method=”post” class=”josForm form-validate”>
    <table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” class=”contentpane”>
        <tr>
            <td colspan=”2″ height=”40″>
                <p></p>
            </td>
        </tr>
        <tr>
            <td height=”40″>
                <label for=”email” class=”hasTip” title=”::”>:</label>
            </td>
            <td>
                <input id=”email” name=”email” type=”text” class=”required validate-email” />
            </td>
        </tr>
    </table>

    <button type=”submit” class=”validate”><?php echo JText::_(‘Submit’); ?></button>
    <?php echo JHTML::_( ‘form.token’ ); ?>
</form>

{/code}

After:

{code}

<div class=”login_form gray_bg_box”>
<form action=”” method=”post” class=”josForm form-validate”>
    <table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” class=”contentpane”>
        <tr>
            <td colspan=”2″ height=”40″>
                <p></p>
            </td>
        </tr>
        <tr>
            <td height=”40″>
                <label for=”email” class=”hasTip” title=”::”>:</label>
            </td>
            <td>
                <input id=”email” name=”email” type=”text” class=”required validate-email” />
            </td>
        </tr>
    </table>

    <button type=”submit” class=”validate”><?php echo JText::_(‘Submit’); ?></button>
    <?php echo JHTML::_( ‘form.token’ ); ?>
</form>
</div>

{/code}

Add the CSS to your template’s CSS file and youre done:

{code class=”brush:css;”}

.login_form  input {
height: 25px;
width: 250px;
border: 3px solid #333;
background: #FAFFBD;
}

.gray_bg_box {
background: #333;
padding: 20px;
}

{/code}

You can of course add your own CSS styles.

Hope this helps.

Post Author: Tom Pai