If we are building a Drupal 6 site, there will be time where we are facing the needs to modify the user login block.

Sometime we can get away by just modifying the css for it but have you ever got the need to remove the "username" and "password" legend element from the block?.

Sure you can just use css to "hide" them but is it the right way to do it?. This is where we need to do some template preprocessed within our theme template.php. Some example for this : We call the theme function to register the new theme override for the user login block :

/**
* theme function 
*/
function yourtheme_theme() {
  return array( 'user_login' => array('arguments' => array('form' => NULL));
}

Next is providing the theme override function and overriding the user login block :

/**
* Theme override for user login block.
*/
function yourtheme_user_login_block($form) {
	unset($form['name']['#title']); // remove the username legend
	unset($form['pass']['#title']); // remove the password legend
	unset($form['captcha']['#description']); // remove the captcha description if you have captcha module installed
	unset($form['captcha']['captcha_widgets']['captcha_response'] ['#description']); // remove the captcha response description if you have captcha module installed
	unset($form['captcha']['captcha_widgets']['captcha_response']['#title']); // remove the captcha title if you have captcha module installed
  
	// add a new div to wrap the username and password textfield... why? we want to use some icon to replace the legend
	$form['name']['#prefix'] = '
'; $form['name']['#suffix'] = '
'; $form['pass']['#prefix'] = '
'; $form['pass']['#suffix'] = '
'; // set the default value for the username.. this is important because we are going to put jQuery bling bling in this textfield $form['name']['#value'] = 'Username'; // Additionnaly, hide the text when editing - you can change/delete this // Remember to change the value 'search' here too if you change it in the previous line, the jQuery bling bling stuff $form['name']['#attributes'] = array( 'onblur' => "if (this.value == '') {this.value = 'Username';}", 'onfocus' => "if (this.value == 'Username') {this.value = '';}" ); $form['links']['#prefix'] = '
'; $form['links']['#suffix'] = '
'; return drupal_render($form); }

Note: do var_dump($form) to get the whole form array and modify it as you wish and don't forget to clear your drupal cache for thing to work.

Now you got yourself a very clean drupal login block, after this you'll need to get creative and do the css formatting to beautify the login form.

Some simple css for icon on the left side to replace the username and password legend :

.usericon, .passicon { padding-left: 42px;}
.usericon { background: transparent url(images/username.png) no-repeat 8px 1px;}
.passicon { background: transparent url(images/password.png) no-repeat 8px 1px;}

With this knowledge if you are creative enough you can modify the form to display the login bar horizontally. Enjoy!