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:
<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="::"><?php echo JText::_('Email Address'); ?>:</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>
After:
<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="::"><?php echo JText::_('Email Address'); ?>:</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>
Add the CSS to your template's CSS file and youre done:
.login_form input {
height: 25px;
width: 250px;
border: 3px solid #333;
background: #FAFFBD;
}
.gray_bg_box {
background: #333;
padding: 20px;
}
You can of course add your own CSS styles.
Hope this helps.
Change remind username / password view
