Drupal 7 – Customize the login block

There is a default user login block in every Drupal instance. If you want to customize it layout, you could create your own user-login-block.tpl.php.

1. Edit your theme template.php and implement the following 2 functions.

function <theme-name>_theme(&$existing, $type, $theme, $path) {
  $hooks['user_login_block'] = array(
    'template' => 'templates/user-login-block',
    'render element' => 'form',
  );
  return $hooks;
}

function <theme-name>_preprocess_user_login_block(&$vars) {
  // For debug only
  //print '<pre>';
  //print_r($vars['form']);
  //print '</pre>';
  //exit;
  $vars['name'] = render($vars['form']['name']);
  $vars['pass'] = render($vars['form']['pass']);
  $vars['submit'] = render($vars['form']['actions']['submit']);
  $vars['rendered'] = drupal_render_children($vars['form']);
}

 

2. Create the user-login-block.tpl.php in your theme templates folder.

<div id='user-login-block-container'>
  <div id='user-login-block-form-fields'>
    <?php print $name; // Display username field ?>
    <?php print $pass; // Display Password field ?>
    <?php print $submit; // Display submit button ?>
    <?php print $rendered; // Display hidden elements (required for successful login) ?> 
  </div>
  <div class='links'>
    <a href='/user/register'>Create an Account</a> | <a href='/user/password'>Forgot Password</a>
  </div>
</div>

 

3. Clear the cache and refresh the page. The new layout should be ready.

Done =)

Reference: Drupal Forum – Alter User login block D7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s