Customizing the login form
Last modified: June 20, 2009 - 18:30
Description
These snippets allow you to override the default login layout using a custom user_login.tpl.php.
If you want to customize the full page layout, click through to the Customizing 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.
For use with Drupal 4.7.x and Drupal 5.x
<?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));
}
?>For use with Drupal 6.x
_phptemplate_callback is deprecated in Drupal 6 in favor of the theme registry and preprocess functions. See the Drupal 6 theme guide for more information.
<?php
function mytheme_theme() {
return array(
'user_login' => array(
'template' => 'user-login',
'arguments' => array('form' => NULL),
),
// other theme registration code...
);
}
function mytheme_preprocess_user_login(&$variables) {
$variables['intro_text'] = t('This is my awesome login form');
$variables['rendered'] = drupal_render($variables['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>For use with Drupal 6.x
<p><?php print $intro_text; ?></p>
<div class="my-form-wrapper">
<?php print $rendered; ?>
</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
- 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'. )
user_login_block, not user_login for D6
I had to change "user_login" to "user_login_block" to get it to work.
<?php
function mytheme_theme() {
return array(
'user_login_block' => array(
'template' => 'user_login',
'arguments' => array('form' => NULL),
),
// other theme registration code...
);
}
function mytheme_preprocess_user_login_block(&$variables) {
$variables['intro_text'] = t('This is my awesome login form');
$variables['rendered'] = drupal_render($variables['form']);
}
?>
Note that the template also needed to be "user_login" instead of "user-login".
Manipulate the Login-Form-Fields
Thx. Works great. I manipulate also the Username and Password Input-Field in this way: (I Think this is very useful !)
<?php
function mytheme_preprocess_user_login_block(&$variables) {
$variables['form']['name']['#value'] = $variables['form']['name']['#title'];
$variables['form']['pass']['#value'] = $variables['form']['pass']['#title'];
$variables['form']['name']['#attributes']['OnClick'] = 'this.value=""';
$variables['form']['pass']['#attributes']['OnClick'] = 'this.value=""';
$variables['form']['name']['#required'] = false;
$variables['form']['pass']['#required'] = false;
$variables['rendered'] = drupal_render($variables['form']);
}
?>
Greetings
Sepp
Not working
Probably I´m doing something wrong here, but it just won´t work.
I´ve created the tpl, added the code inside the template, and the form shows exactly the same.
I haven´t changed the style.css yet, but the code should at least show the intro_text
$variables['intro_text'] = t('This is my awesome login form');.I´ve try disabling and enabling again the login block, and clearing all cache... with no luck.
It´s probably a silly mistake... but cannot get this to actually work.
I´ve tried the alternative solutions above too (the ones commented above).
Thanks for your help.
Rosamunda, I got it to work
Rosamunda,
I got it to work (i.e. I now see "This is my awesome login form") by...
1. using lavignej's directions (i.e. renaming mytheme_preprocess_user_login to mytheme_preprocess_user_login_block)
2. renaming the user_login.tpl.php file to user-login.tpl.php
cheers
-Rob
Finding the correct ID
Thanks to Addison Berry at Lullabot, you can accurately get the proper ID by looking for a hidden input with the name "form_id" in the generated source:
<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block" />Not to be confused with the id of the form tag itself.
Her article: Modifying Forms in Drupal 5 and 6
Since we're customizing the
Since we're customizing the login block, here are a couple useful things I found while doing my first one.
I wanted my login in a nice, tight block, but the default form layout had too much vertical space. While there seem to be plenty of tips for putting the login in a nifty bar layout, I didn't find anything for theming a box, so here's the CSS I came up with. This fits my login form in an area 200px wide by 100px high (with a font size of 12px, that is), with plenty of room for Register and Forgot Password? links below the login button (see http://rageagainstthecubefarm.com).
/* put prompts on same line as fields */#user-login-form label, #user-login-form input, #user-login-form .form-item, #edit-name, #edit-pass { display : inline; }
#block-user-0 h2, #user-login-form .item-list { display : none; }
#user-login-form { text-align : right; }
#user-login-form input { font-size : 0.9em; }
#user-login-form .form-text { width:120px; } /* sets the field widths */
.form-submit, #edit-submit { /* puts the login button right under the password field */
margin-top:0;
}
Second useful thing is more of a newbie trap. Since we're hooking into Drupal's own user_login block, we get the default behavior, which is that the login block just goes away on a successful login. Very discouraging when you've finally gotten your first custom-themed login working and suddenly find yourself with a blank space where you don't want one. Getting something to replace the login form, like a Welcome message with links to log out or the user's account, is a simple matter of going to Admin > Site Building > Blocks, creating a new block with the desired content and putting it in the same region as the login block.
salud,
Bill
PS--Correction, 14 Feb: I should have mentioned this is in a theme based on Frameworks. Element names for Zen and other themes will likely be different. For your theme, do a View Source to see the HTML for your login form and change element names accordingly. Sorry about that.
putting the links first
for Drupal 5
I often get the request from my clients to put the links above the textfields (can't rly blame them as it's a little bit more logical)
anyway, the solution is pretty easy, like described above set it to use a user_login.tpl.php and then inside that file, use this:
<?phpprint drupal_render($form['links']); // renders only the links
$form['links'] = array(); // set the links to an empty array
print drupal_render($form); // this displays the rest of the login form
?>
you could add a check to see if $form['links'] is already an empty array (like on the /user page) and avoid a useless call to the drupal_render function, but it isn't rly needed that bad unless u need every drop of performance u can get
Granular Control in Drupal 6
If you want more exact control in Drupal 6, here is a good reference..
http://thefaultandfracture.blogspot.com/2009/04/theming-drupal-user-logi...