Hello Everybody,
I am new to Drupal.

I want to create a login page like This
http://www.freeimagehosting.net/x2ev1

How could i do that ?

http://localhost/mydrupal/user ------------> User login
http://localhost/mydrupal/admin ------------> Admin login
http://localhost/mydrupal/ -------------> Website Front Page

Drupal version 7.19
localhost wampserver.

Is this possible to create different login page for User and Administrator. ??

If Yes Then How Could I Do That ?
I have Read this article but it is not working.. http://drupal.org/node/350634

Comments

1 - Add this code to your theme "template.php" file. Change all "your_themename" strings (there is two don't forget any of them) with the name of your theme. With this code we tell Drupal that we want a "user-login.tpl.php" file in our /sites/all/themes/your_themename/templates folder.

function your_themename_theme() {
  $items = array();
  // create custom user-login.tpl.php
  $items['user_login'] = array(
  'render element' => 'form',
  'path' => drupal_get_path('theme', 'your_themename') . '/templates',
  'template' => 'user-login',
  'preprocess functions' => array(
  'your_themename_preprocess_user_login'
  ),
);
return $items;
}

2 - Create the "user-login.tpl.php" file and put it in your /sites/all/themes/your_themename/templates folder.

3 - Render the fields in the "user-login.tpl.php" file.

    <?php
   
// split the username and password so we can put the form links were we want (they are in the "user-login-links" div bellow)
   
print drupal_render($form['name']);
    print
drupal_render($form['pass']);
   
?>

    <div class="user-login-links">
<span class="password-link"><a href="/user/password">Forget your password?</a></span> | <span class="register-link"><a href="/user/register">Create an account</a></span>
    </div>
    <?php
       
// render login button
   
print drupal_render($form['form_build_id']);
    print
drupal_render($form['form_id']);
    print
drupal_render($form['actions']);
   
?>

<!-- /user-login-custom-form -->

4 - You can wrap the content with div's containing classes and then use CSS to style them.

I'm very happy with Drupal. Drupal is really powerful and you can build almost everything with it.

Hi Dropthatdrop,

I tried your code, but it did not work quite smoothly. I got the http 500 error. I checked the error log and realized that the code maybe conflict with the theme I am using---Marinelli.

In the Marinelli theme, there is a theme folder which contains a file named "theme.inc". In that file, there is a function called marinelli_theme(), so if I follow your step to change the "your_themename" string, it will end up that I will use a function that is pre-declared. Any suggestion to work around?

Thank you so much!

Just wanted to say thank you. I was struggling trying to figure out how to do this, and this answer was exactly what I needed.

Please note this is the Login Page only (as requested in your title).

If you want the "Register Page" and the "Recover Password Page", the process is the same. Just create a "user-register.tpl.php" and "user-pass.tpl.php" files in the "templates" directory and customise them. After setting up the login page you may want to explore it.

This is the basic. From here you can keep going customising and crafting as much as you like, adding images, divs, spans, text... you name it.

But this will get you started. It worked for me in D7.21 so far but I'm only working it this last 30 minutes...

You may want to look at this link for more core templates:
http://drupal.org/node/190815

You may want to look at this link for the register template and password recovery pages:
http://drupal.org/node/350634

Good luck!

I'm very happy with Drupal. Drupal is really powerful and you can build almost everything with it.

I see so much trouble for simple things. I just scrolled for a bunch of posts how to theme the "Login Page" but actually people are theming the login block, imitating each other posts all over their blogs and websites.

Do you want to achieve a minimal designed and beautiful page like this?
Login page: http://s10.postimg.org/42qaumbbt/login.png
Password page: http://s22.postimg.org/lv2psotsh/password.png

1 )
Create the login and password empty page files and place them in your theme "templates" folder.
The name of the files are page--user--login.tpl.php and page--user--password.tpl.php. There's no need of all those steps of "hook", "alter", blablabla... Drupal will use those files automatically without any call or whatever.

2 )
Put this code inside your files.

page--user--login.tpl.php

<?php print $messages; ?>
<?php print drupal_render(drupal_get_form('user_login')); ?>
<a href="user/password">Request new password"</a>

page--user--password.tpl.php

<?php print $messages; ?>
<?php print drupal_render(drupal_get_form('user_pass')); ?>
<a href="user/login">Go back</a>

3 )
Done!
In thee steps. Now style your css as much you need and pimp your new fancy login page. "Inspect" your html output of your new login page and see how clean it is now. ; D

Afterwords )
I just spent this last hour reading posts and questions about this all over the internet, and the work around in some cases are simply crazy like using the dpm(get_defined_vars()); function, copying html and paste all of those input forms and attributes, blablabla.
I didn't found a concise post like this. It's crazy!!!

Also, you will need (if you still don't have it and if you want it) to disable "label/description" and enable "placehover" for the inputs. You can do it all together like this:

<?php
/*
 *  Remove labels and add HTML5 placeholder attribute to login form
 */
function THEMENAME_form_alter(&$form, &$form_state, $form_id) {
  if (
TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) )
   
$form['name']['#attributes']['placeholder'] = t( 'Username' );
   
$form['pass']['#attributes']['placeholder'] = t( 'Password' );
   
$form['name']['#title_display'] = "invisible";
   
$form['pass']['#title_display'] = "invisible";
}
/*
 *  Remove login form descriptions
 */
function THEMENAME_form_user_login_alter(&$form, &$form_state) {
   
$form['name']['#description'] = t('');
   
$form['pass']['#description'] = t('');
}
?>


PS )
Do you have the "header", "footer" and "sidebar" visible and want to remove them too? No problem.
Go to #overlay=admin/structure/block and click "configure". Scroll down and include this on "Show block on specific pages" option:
user/login
user/password

Done!
Drupal it's incredible powerful. I think people complicate things a lot and if you see it in a simple way it will be more efficient... Most of the things you can do it inside Drupal environment.

Your answer is by far the BEST I seen to custom login page.
Indeed true login page (not the block/node).
Thanks a lot.

However I improved your code to include javascript placeholder for older browsers not supporting HTML5 placehold attribute.
Don't know if it's needed since most nowadays support HTML5.
However it's here for backup reasons if you need it.

Also I removed the label and included a placeholder to the E-mail recovery page...

This is how mine looks:
Login page: http://img34.imageshack.us/img34/2019/71fg.png
Recover password page: http://img24.imageshack.us/img24/7176/cdw7.png

<?php
/*
 *    Custom Login form
 */
function YOURTHEMENAMEHERE_form_alter(&$form, &$form_state, $form_id) {
    if (
TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) ) {
       
// Javascript placeholders for Username and Password (old browsers)
        // Almost all browsers support HTML5 nowadays
        // If you don't want it remove it : )
       
$form['name']['#title_display']['onblur'] = "if (this.value == '') {this.value = 'Username';}";
       
$form['name']['#title_display']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
       
$form['pass']['#title_display']['onblur'] = "if (this.value == '') {this.value = 'Password';}";
       
$form['pass']['#title_display']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
       
// "Login" form (no label, no description and with HTML5 placeholder)
       
$form['name']['#title_display'] = "invisible";
       
$form['pass']['#title_display'] = "invisible";
       
$form['name']['#attributes']['placeholder'] = t( 'Username' );
       
$form['pass']['#attributes']['placeholder'] = t( 'Password' );
       
$form['name']['#description'] = t('');
       
$form['pass']['#description'] = t('');
    }
    if (
$form_id == 'user_pass') {
       
// Javascript placeholders for Request Password page (old browsers)
        // Almost all browsers support HTML5 nowadays
        // If you don't want it remove it : )
       
$form['name']['#title_display']['onblur'] = "if (this.value == '') {this.value = 'Type your username or e-mail address';}";
       
$form['name']['#title_display']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
       
// "Request new password" form (no label and with HTML5 placeholder)
       
$form['name']['#title_display'] = "invisible";
       
$form['name']['#attributes']['placeholder'] = t( 'Type your username or e-mail address' );
    }
}
?>

Now will custom the css... : )

hey dropal - u rock ! thx bro - in 2 minutes, you answered 8 - 10 hours of labor (plus calls to the wilderness on stack and IRC - where my chi-town peeps at?)

thx !

ken d
creative director
grateful creative

Hi!

Have you checked out the project Better Login? https://drupal.org/project/betterlogin

Sincerely,
Robi