Login a Little Liveler

The user login block is one of the most common blocks on any Drupal site. It might be in this region, or that region, or this header, footer, or block... the idea of this post is that it is that you, at some point, you will probably want to theme it... and maybe you'll use this post to help you through. I have spent part to the day working with a flexible way to make the user login block a little cooler. Specifically, I wanted it horizontal, and I wanted to change some of the values, and finally some css to finish it off... and eventually some jQuery if I can find the time. Through this process I was once again reminded of the power of Drupal. The ability to use these hooks and theme overrides is truly valued by me... and I am sure many of you out there in cyberspace as well... Onward...

Default User Login Block

I am using nothing fancy. It's just the User Login block placed in a region I created and called 'user_area' (and identified with css as id (user-area). My goal was... (1) use as little code as I can (2) make it re-usable so I can continue to use it and adjust it (3) keep it in the theme layer (for now).

template.php

It was a little different from the typical overides I have used, specifically I had to move up the $items. I also left in (but commented out) the print-r command I used to make the variables and arrays visible. Here's the code (basically), I used in my file.


function YOURTHEMENAMEGOESHERE_theme() {
  return array(
    // The form ID.
    'user_login_block' => array(
      // Forms always take the form argument.
      'arguments' => array('form' => NULL),
    ),
  );
}

  function YOURTHEMENAMEGOESHERE_user_login_block($form) {
  $items = array();
  if (variable_get('user_register', 1)) {
    $items[] = l(t('sign up!'), 'user/register', array('attributes' => array('title' => t('Create a new user account.'))));
  }
  $items[] = l(t('get help!'), 'user/password', array('attributes' => array('title' => t('Request new password via e-mail.'))));
 
  $output = '';
      //print "<pre>";
      //return print_r($form);
      //print "</pre>";
      // Our kickin' mods go here.
      $form['name']['#title'] = t('Member');
      $form['pass']['#title'] = t('Combo');
      $form['links'] = array('#value' => theme('item_list', $items));
 
  $output .= drupal_render($form);
  return $output;
}

The CSS

The rest of it came in the form of some CSS. Here is the 'basics' of what I used... it doesn't have all of the images, but it has enough of the good stuff to make it work.


#block-user-0 input.form-text,
#block-user-0 input.form-submit,
#block-user-0 textarea,
#block-user-0 .form-item label {
float: left;
color: #424242;
}
#block-user-0 .content {
margin: 0;
padding: 0;
}
#block-user-0 input.form-text {
margin: 0 .5em;
}
#block-user-0 input.form-submit {
margin: 0 .5em;
background: none;
border: none;
outline: none;
color: #424242;
}
#block-user-0 input.form-submit:hover {
color: #AA893F;
}
#block-user-0 .item-list ul li {
display: inline;
padding: 0 20px 0 10px;
float: left;
}
#block-user-0 .item-list ul {
display: inline;
float: right;
}
#block-user-0 .item-list ul li a {
color: #424242;
font-size: 80%;
}
#block-user-0 .item-list ul li a:hover {
color: #AA893F;
}
#block-user-0 label {
padding-left: 10px;
}
#user-area #block-user-0 {
padding-bottom: 10px;
}





I'm still doing some adjustments and playing with some of the values... we'll see where it takes me.