Customize Login Page Drupal 7

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.

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 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:

/*
 *  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.

Hi!

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

Sincerely,
Robi

You can use the module mentioned below to create separate login pages for different kind of roles.

https://www.drupal.org/project/role_login_page

Hi,

hope you are doing well.

my question is that can I customize login form as admin level.

Actually I want to that when i submit the form after submit and after inspect in browser login details should not be shown in browser.

Thanks