Drupal 7 with Horizonal Login Bar

In Drupal 7, I would like to have horizontal login block instead of the original one. Searched around and it seems like it's quite difficult to find one. But then, I found it at Victheme.com. It seems to work according to the instruction. However, as misteryes commented on that page that you can type in the password input box and hit Enter in Firefox.  By hitting Enter in Internet Explorer (IE), it will not work. Nothing happen. I tried that with Safari 6.02 and I also got that problem. I, then, follow what misteryes instructed in the CSS file.

In this tutorial, I did not do anything with template.php per duckz instructed. What I did was to put the whole code into a new block. Set the Text Format to PHP Code. it will works just fine. Then, put that block to the area that you want it to appear. Below is what I did.

1. Start by create a new block, then, put below code into it. Do not forget to set Text Format to PHP Code. If you do not see PHP Code Text Format, you have to enable PHP filer in the module page first.

<?php

function horizontal_login_block($form) {
  $form['#action'] = url($_GET['q'], array('query' => drupal_get_destination()));
  $form['#id'] = 'horizontal-login-block';
  $form['#validate'] = user_login_default_validators();
  $form['#submit'][] = 'user_login_submit';
  $form['#prefix'] = '<div id="loginbar">';
  $form['#suffix'] = '</div>';
  $form['name'] = array(
    '#type' => 'textfield',
    '#prefix' => '<div class="usericon">',
    '#suffix' => '</div>',
    '#maxlength' => USERNAME_MAX_LENGTH,
    '#size' => 15,
    '#required' => TRUE,
    '#default_value' => 'Username',
    '#attributes' => array('onblur' => "if (this.value == '') {this.value = 'Username';}", 'onfocus' => "if (this.value == 'Username') {this.value = '';}" ),
  );
  $form['pass'] = array(
    '#type' => 'password',
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => TRUE,
    '#prefix' => '<div class="passicon">',
    '#suffix' => '</div>',
  );
  $form['actions'] = array('#type' => 'actions');
  $form['actions']['submit'] = array('#type' => 'submit', '#value' => '');
  return $form;
}

function login_bar() {
  global $user;
  if ($user->uid == 0 ) {        
   $form = drupal_get_form('horizontal_login_block');
   return render($form);
  } else {
   // you can also integrate other module such as private message to show unread / read messages here
   return '<div id="loginbar"><p>' . t('Welcome back ') . ucwords($user->name) . '<p></div>';
  }
}

// Print out the login block into the screen
print login_bar();

?>

2. After put the code in the block, you still need to do the custom CSS. Put below CSS in your theme custom file :

/** Login Bar **/
.usericon, .passicon {
float: left;
width: 180px;
height: 24px;
}
#loginbar {width: auto; float: right;}
#loginbar .form-actions {position: absolute; z-index: -99;}
#loginbar p { color: #fff; font-size: 1.1em; font-weight: bold;}

Once done, try it, you will see the login block as below:

Note :

1. In Zerotheme, round corder CSS will work with in Search Area, not Banner Area.
2. Here is the PHP Code that you have to select while create a new block to make this works  :

Software Tested :

• Drupal 7.17
• Zeropoint Theme 7.x-1.4

Reference :

• http://www.victheme.com/blog/drupal-7-creating-horizontal-login-bar-without-module