Customising the login form
description
These snippets allow you to override the default login layout using a custom user_login.tpl.php.
If you want to customise the full page layout, click through to the Customising the login, registration and request password full page layout handbook page.
Step 1 of 2
In a text editor like notepad.exe, create a file called template.php using the the following snippet. If you already have a template.php file, simply add it to your existing one.
<?php
/**
* This snippet catches the default login form and looks for an
* user_login.tpl.php file in the theme folder
*/
function phptemplate_user_login($form) {
return _phptemplate_callback('user_login', array('form' => $form));
}
?>Step 2 of 2
- In a text editor paste the following snippet into your user_login.tpl.php file
- Edit the style sheet classes and content to suit
- Upload your edited user_login.tpl.php to your active theme folder
For use with Drupal 4.7.x
<div class="login_form"><p>Extra login instructions can go here, just above the Login form</p>
<?php
print form_render($form); // this displays the login form.
?>
<p>Extra login instructions can go here, just below the Login form</p>
</div>For use with Drupal 5.x
<div class="login_form"><p>Extra login instructions can go here, just above the Login form</p>
<?php
print drupal_render($form); // this displays the login form.
?>
<p>Extra login instructions can go here, just below the Login form</p>
</div>Style sheet reference
For controlling how your login form looks using your style sheet, this is what the rendered login form HTML and class names are by default:
<div class="form-item">
<label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name" size="30" value="" tabindex="1" class="form-text required" />
<div class="description">enter your username</div>
</div>
<div class="form-item">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" name="pass" id="edit-pass" size="40" tabindex="2" class="form-text required" />
<div class="description">enter your password</div>
</div>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
<input type="submit" name="op" id="edit-submit" value="Log in" tabindex="3" class="form-submit" />
<p><a class="textlink" href="?q=user/password">Forgotten your Password?</a></p>notes
- Click through for a more advanced login form override
- Recommended reading for more information and an explanation of how the snippets work: Dominating the User Login Form at Nick Lewis' blog
- If you have an even more advanced snippet that has been tested, please add a child page to this handbook page
- This snippet was tested with Drupal 5.x (June 24th 2007) by Dublin Drupaller (Note: If you have the locale.module enabled you may need to refresh your search_index by editing any text string related to the user page before your changes take effect, such as 'password'. )