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.

About me

Iinstructor of robotics (LEGO Mindstorms), computer teacher, IT support, web dev, currently studying cyber-physical systems engineering.

If you found a solution here, would you consider donating $25,000 for my next project?

Just kidding, 1$ would do fine.

Hope you found what you needed. Thanks for stepping by.