Customizing the login form
Task · How to customize the login form · Themers · Drupal 4.6.x · Drupal 4.7.x · Drupal 5.x · Drupal 6.x
Last modified: August 26, 2009 - 02:50
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
Buenos Aires | Argentina
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
Is there a good way to do
Is there a good way to do this and remove the OpenID login when using the inline custom login form? I wouldn't mind having OpenID but right now it messes up the inline form pretty badly. I can't find where to edit the openid info on the inline form.
Thanks!
user_login_block and user_login both work
user_login_block and user_login are two different hooks. user_login_block is for the block, and user_login is for your /user/ login page. You can point both hook registrations at the same template if you like and just differ the content (example below). Note: I found I had to clear the Drupal cache to see my changes.
It also doesn't matter what you name your template as long as it matches the file name:
user-login -> user-login.tpl.phpshiver-me-timbers -> shiver-me-timbers.tpl.php
<?php
function mythemename_theme()
{
return array(
'user_login_block' => array(
'template' => 'user-login',
'arguments' => array('form' => NULL),
),
'user_login' => array(
'template' => 'user-login',
'arguments' => array('form' => NULL),
),
// other theme registration code...
);
}
function mythemename_preprocess_user_login_block(&$variables)
{
$variables['intro_text'] = t('This is my awesome login BLOCK');
$variables['rendered'] = drupal_render($variables['form']);
}
function mythemename_preprocess_user_login(&$variables)
{
$variables['intro_text'] = t('This is my awesome login PAGE');
$variables['rendered'] = drupal_render($variables['form']);
}
?>
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...
What if mytheme_theme() is already defined?
The D6 method given here is kind of problematic, because mytheme_theme() is a really generic and common name for a theme function, so many themes already have a function by that name defined. If you try to define it a second time, your entire site will die with a PHP fatal error.
For example, in the Zen subtheme I'm trying to make this work in, there is already the following:
function austin_theme(&$existing, $type, $theme, $path) {$hooks = zen_theme($existing, $type, $theme, $path);
// Add your theme hooks like this:
/*
$hooks['hook_name_here'] = array( // Details go here );
*/
// @TODO: Needs detailed comments. Patches welcome!
return $hooks;
}
Is there some way to use that to do what this tutorial is trying to do with mytheme_theme()?
Lynna
Spider Silk Design: http://www.spidersilk.net
Hello, I just did this in my
Hello,
I just did this in my zen subtheme and it works :
<?php$hooks['user_login_block'] = array('template' => 'user_login', 'arguments' => array('form' => NULL));
?>
In the mytheme_theme() function (like the example in the comments of the function).
<?phpfunction myzensubtheme_theme(&$existing, $type, $theme, $path) {
$hooks = zen_theme($existing, $type, $theme, $path);
// Add your theme hooks like this:
/*
$hooks['hook_name_here'] = array( // Details go here );
*/
$hooks['user_login_block'] = array('template' => 'user_login', 'arguments' => array('form' => NULL));
// @TODO: Needs detailed comments. Patches welcome!
return $hooks;
}
?>
Can some one help?
I am new to drupal using drupal 6 and trying to customize the user login following the steps provided but getting the below message.I tried lots of things but with no luck.
* warning: include(./sites/all/themes/newmarine/user-login.tpl.php) [function.include]: failed to open stream: No such file or directory in C:\wamp\www\includes\theme.inc on line 1020.
* warning: include() [function.include]: Failed opening './sites/all/themes/newmarine/user-login.tpl.php' for inclusion (include_path='.;C:\php5\pear') in C:\wamp\www\includes\theme.inc on line 1020.
Can some one explain what it is please?
Thank you in advance.
That means you don't have the
That means you don't have the template files user-login.tpl.php in your newmarine theme folder. Placing them will fix that problem.
See my tutorial at:
http://bri-space.com/content/themeing-drupal-6-login-form-or-login-block
Brian
http://bri-space.com - Drupal information and more