HowTo: Create a custom user login bar

In this how-to, I will show you how to create a user bar, that:

• Displays a compact, nice user login form that can fit in one line.
• Once user is logged in, It will display a welcome message and a couple of helpful links.

This is the final result we will be trying to achieve:

As you can see, this how-to is written for Garland theme, the default theme for Drupal 5. But I'm pretty sure it can be easily used in any other theme.

Decide on the approach..

Drupal is very powerful, it's so flexible that you have many ways to do things. That's why a 5 minutes of thinking is very recommended before we get our hands dirty.

The solution I thought of will work like this:

• We will write a separate function, will call it garland_user_bar(). It decide, and return HTML for the login form, or the welcome message. It will contain the necessary code to check which one it should return.
• In page.tpl.php, we will place a call to this function somewhere where it gets displayed in the top.
• Back to the function, If it should show a login form, then it will just borrow the default login form, we will not try to create our own. Why? Because likely, the default form, while it looks rectangular in shape and fits in many lines, by checking view-source I could tell that we can style it using CSS just like in the screenshots without changing anything in the form itself.
• If the user is already logged in, the function will instead return a nice welcome message, and some helpful links.
• Now we have the logic, after that we will write some CSS to style it, to change how it looks.

Oh, let's place the function in page.tpl.php first

Let's do this first, let's place a call to garland_user_bar() (even if it doesn't exist yet), that's better so while we are working on garland_user_bar() we can hit 'refresh' in our browser to see the result any time we want to.

1. Open themes/garland/page.tpl.php, at around line 16 you will find:
   
   <div id="navigation"></div>
   
   This <div> is the container for the top bar in Garland theme, so let's add our call to garland_user_bar() there..
   
   <div id="navigation"><?php print garland_user_bar() ?></div>

Write the necessary code, garland_user_bar()

Before giving you the whole piece of code, I will explain how we go for writing this..

1. Open themes/garland/template.php, at the of the file, let's start an empty function.. we will add code inside it in the next steps..
   
   function garland_user_bar() {
}
2. We will need access to the global $user variable, which Drupal makes available for us, and it's going to tell us whether a user is logged in already or not. So first line we add inside the function is going to be:
   
   global $user;
3. I will also define a new variable called $output, so I can keep adding whatever I want to that variable, and at the end, I will return its contents to be placed on where we placed the function itself in page.tpl.php. Alright, So that's extra line..
   
   $output = '';
4. I want to check if the user is logged in or not. We do this by checking if $user->uid exists or not, because when Drupal logs a user in, it will automatically change $user->uid to reflect the user id, which is always > 0. That's what we need to add..
   
   if (!$user->uid) { // if user is NOT logged in..
   
   Notice the ! here, it translates to NOT, so this code means "if not $user->uid" which means if the user is NOT logged in already...
5. Alright, if the user is NOT logged in.. do what? Give him/her a login form! Remember what we concluded in the deciding step? We said that the default login form is okay, it just needs a bit of CSS love, no need to write another form. So let's just use that form.. this is how..
   
   $output .= drupal_get_form('user_login_block');
   
   drupal_get_form() is a very handy function, you give it the name of a form, and it returns it to you, ready for user consumption.
6. Okay, now we handles the case when user is not logged in, but what if they are already logged in?? let's continue our code to handle this case.. add:
   
   }
else {
   
   This allows us to handle the other case.
7. If user is logged in already, we want to display a welcome message, and a few helpful links. Let's see how we display the welcome message first..
   
   $output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
   
   t() function encapsulates the whole message, so it can be translated. theme('username', $user) is what you should always use for displaying usernames.
8. Well, now the links.. I want two links, "Your accont" and "Sign out". Drupal has a function called theme_item_list() that you can give a list of items, and it will return a HTML <ul> list out of them. "Your account" should link to user/<uid>, and "Sign out" should link to logout. These are standard URLs in Drupal. Alright, let's do this..
   
   $output .= theme('item_list', array(
  l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
  l(t('Sign out'), 'logout')));
}
   
   Oh well, new function here, l(), this one is used to generate links. You simply pass it the title and the URL, and it will generate a sound and safe <a href="..." title="..">....</a>.
9. Now one more last thing before we exit and return the output, I want to encapsulate all this in a <div id="user-bar">...</div>. Why? because it will make it easier for us to write the CSS that will apply to this bar. How I do this? Easy, using the . (dot) operator. Like this:
   
   $output = '<div id="user-bar">' . $output . '</div>';
10. Oh, now everything is ready, let's return the HTML we generated..
    
    return $output;

So what's the final overall function? this is it..

Styling time!

Now that login form and welcome message are displayed correctly for users, we only need to make them look better. That's where CSS comes in.

1. First, let's create a new file to place all our user bar CSS into, that way we keep organized. So create a new file themes/garland/user_bar.css.
2. Now the file exists, but nobody knows about it, we should modify page.tpl.php to include it. How? Open themes/garland/page.tpl.php and AFTER line 11 add this:
   
   <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style>
   
   That will include our user_bar.css file.
3. Let's write the magical CSS inside user_bar.css
   Notice that it's not too big really. It's just the comments consuming too much space :p.
   
   /*
this will expand the default garland bar, make it bigger so our form and message can fit in.
*/
#navigation {
  height: 3em;
}
 
/*
by default, the default form adds some surrounding space, this cancels it
*/
#navigation div.form-item,
#navigation div.content {
  margin: 0; padding: 0;
}
 
/*
this adds some space in top and bottom, so anything inside can look vertically
centered
*/
#user-bar {
  padding: .65em 0;
}

/*
by default, fields labels tries to reserve a whole line for itself, this
cancels that and and sends it to the left.
it also adds some space on the right and left of the label to look easy on
the eye.
*/
#user-bar label {
  float: left;
  margin-left: 10px;
  margin-right: 2px;
}

/*
inputs too, they try to reserve a whole line for itself, this
cancels that and sends it to the left
*/
#user-bar input {
  float: left;
}

/*
I don't like the required * (asterisks), so I hide them.
*/
#user-bar span.form-required {
  display: none;
}

/*
the form submit button, it's so tight so we expand it a bit, and give it some
free space around.
*/
#user-bar input.form-submit {
  margin-top: -1px;
  margin-left: 10px;
  padding: 0 .5em;
}

/*
now this is for the links list, lists by default tries to reserve a whole line
also they add space surrounding them. we cancel all that and send the list
to the right
*/
#user-bar div.item-list ul {
  float: right;
  margin: 0; padding: 0;
  margin-right: 10px;
}

/*
remember, stylign above was for the whole list, now for each item,
we all know each item in the list by default exists on a separate line, also
has that bullet on the left. we cancel all that. and makes all items sit beside
each other
*/
#user-bar div.item-list ul li {
  float: left;
  background: none;
  margin: 0 5px;
  padding: 0 10px;
  border: 1px solid #b8d3e5;
}

/*
this is the "Hi user, welcome back message".
by default <p> tries to exist on a separate line, we cancel that.
also by default <p> has some surrounding space, we cancel that too, and give it
only space on the left.
*/
#user-bar p.user-info {
  float: left;
  padding: 0;
  margin: 0 0 0 10px;
}

The end..

That was it, A solution that works and doesn't override or modify any existing code. And since it doesn't have any custom hardcoded HTML for forms, that means it will rarely need to be maintained after new releases of Drupal.
Post any improvements you can think of in the comments, and I will add them here.