Last updated July 3, 2013. Created by AmrMostafa on November 2, 2006.
Edited by LeeHunter, bekasu, bryan kennedy, Senpai. Log in to edit this page.

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:

 the login form

 the welcome message after a successful login

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..

<?php
function garland_user_bar() {
  global
$user;
 
$output = '';
  if (!
$user->uid) {
   
$output .= drupal_get_form('user_login_block');
  }
  else {
   
$output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
   
$output .= theme('item_list', array(
     
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
     
l(t('Sign out'), 'logout')));
  }
 
$output = '<div id="user-bar">'.$output.'</div>';
  return
$output;
}
?>

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.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

A great way to further customize each of the parts of the login form would be to change number 5 from

$output .= drupal_get_form('user_login_block');

to for example

$output .= drupal_get_form('custom_login_block');

and then in template.php add

function custom_login_block() {
  $form = array(
    '#action' => url($_GET['q'], drupal_get_destination()),
    '#id' => 'user-login-form',
    '#base' => 'user_login',
  );
  $form['name'] = array('#type' => 'textfield',
    '#title' => t('Username'),
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => TRUE,
  );
  $form['pass'] = array('#type' => 'password',
    '#title' => t('Password'),
    '#maxlength' => 60,
    '#size' => 15,
    '#required' => TRUE,
  );
  $form['submit'] = array('#type' => 'submit',
    '#value' => t('Log in'),
  );
  $items = array();
  if (variable_get('user_register', 1)) {
    $items[] = l(t('Create new account'), 'user/register', array('title' => t('Create a new user account.')));
  }
  $items[] = l(t('Request new password'), 'user/password', array('title' => t('Request new password via e-mail.')));
  $form['links'] = array('#value' => theme('item_list', $items));
  return $form;
}

The form action is not correct. If an error occurs, for example omitted a required field, then the error message is not displayed.

'#action' => url($_GET['q'], drupal_get_destination()),

It is strange because the original drupal_get_form('user_login_block'); has the same action!
http://api.drupal.org/api/5/function/user_login_block

I haven't found out yet what the right action should be.

-----------------------------------------
CompuBase, websites and webdesign

-----------------------------------------
Joep
CompuBase, Dutch Drupal full service agency

Creating a custom login block will not call the validation for the user_login in the correct order -- so the error messages are delayed until page refresh, regardless of the action.

Instead of creating a new custom block; adjust the form via hook_form_alter() in your module. This keeps the user_login_block functioning as intended.

To change the action / adjust the links:

<?php
function YOURMODULENAME_form_alter($form_id, &$form) {
    global
$form_values;
    switch (
$form_id) {
        case
'user_login_block':
           
$form['#action'] = url($_GET['q'], drupal_get_destination());
           
$items = array();
            if (
variable_get('user_register', 1)) {
               
$items[] = l(t('Register'), 'user/register', array('title' => t('Create a new user account.')));
            }
           
$items[] = l(t('Forgot Password?'), 'user/password', array('title' => t('Request new password via e-mail.')));
           
$form['links'] = array('#value' => theme('item_list', $items));
            break;
    }
}
?>

Also, it seems to work better when you create a block via the block administration than just having it in the template

If you're using the Login_Destination module, replace

$form['#action'] = url($_GET['q'], drupal_get_destination());

with

$form['#action'] = login_destination_get_destination();

--
Fredric

--
Fredric

A little twist on this great HOW-TO to get the best of both worlds. In order to get the error message to display if a user enters incorrect login info, add the call to the YOURTHEMENAME_user_bar() function in a block.

<?php
 
// output custom user bar login function defined in template.php file
 
print YOURTHEMENAME_user_bar();
?>

Then to display this above the header info add a region to your template file. In this example I'm adding the region "above_header"

<?php
function YOURTHEMENAME_regions() {
  return array(
   
'right' => t('right sidebar'),
   
'content' => t('content'),
   
'header' => t('header'),
   
'footer' => t('footer'),
   
'above_header' => t('above header'),
  );
}
?>

Finally, add this code in your page.tpl.php where you want to output the login form:

<div id="custom_user_login">
  <?php print $above_header; ?>
</div>

-----------------------------------------------------------------
Petafoo - We Love Animals

I wanted to add a login / pwd link on the header and found an awesome link for login blocks - that might allow a user to place the login blocks or refer to the login blocks more cleanly.

http://nossdutytask.com/node/228

I dont want to 'copy' everything but here is a quick snapshot from that link - create a block with these.

<?php global $user; ?>
<?php if ($user->uid) : ?>
Welcome: <?php print l($user->name,'user/'.$user->uid); ?> |
<?php print l("logout","logout"); ?>
<?php else : ?>
For full access and to post messages and comments please Login/Register: <?php print l("Login/Register","user/login"); ?>
<?php endif; ?>

or if you wanted to go all the way, do this:

<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <b><?php print ($user->name); ?> </b> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<form action="/drupal/?q=user&amp;<?php print drupal_get_destination() ?>" method="post" id="user-login">
Username:
<br>
<input type="text" maxlength="60" name="edit[name]" id="edit-name" size="15" value="" class="form-text required" />
<br>
Password:
<br>
<input type="password" maxlength="" name="edit[pass]" id="edit-pass" size="15" class="form-text required" />
<br>
<input type="submit" name="op" value="Login" class="form-submit" />
<br>
<a href="/drupal/?q=user/register" title="Create account">Create account</a>
<br>
<a href="/drupal/?q=user/password" title="Retrieve lost password"> Retrieve lost password</a>
<input type="hidden" name="edit[form_id]" id="edit-user-login" value="user_login" />
</form>
<?php endif; ?>

IN my block, i enclosed the php code in a class as described above
e.g. <div id="custom_login_bar"></div>

I put the block in the header, and in the stylesheet, i added

.custom_login_bar {
   float: right;
}

To return the user to the same page after logging out, change

<?php
      l
(t('Sign out'), 'logout'),
?>

to
<?php
      l
(t('Sign out'), 'logout', array(), drupal_get_destination()),
?>

I needed to two additional parentheses added to the code to get working. Thanks for everyone on this thread, worked out Great!

l(t('Sign out'), 'logout'),

to

l(t('Sign out'), 'logout', array(), drupal_get_destination())));

www.sligoyouth.com

Where theres a will, theres a way.

This has been a great tutorial but upon testing I found an error when using the custom login bar with other user forms (i.e 'create new account' and 'request new password').

For example, when you click on the 'request new password' link from the custom login bar, the login bar still appears at the top of the password form/page but if you use the standard user login form you'll notice it disappears when you access the 'create account' or 'request password' forms.

It would be good if the custom login bar disappeared when you accessed the other user forms, but I can't think of a way to do this.

You could add your code inside an if statement so the login bar does not show on these pages. For instance, to not show on the 'create new account' page add:

<?php
if (arg(0) != 'user' && arg(1) != 'register') {
 
// login bar code here
}
?>

-----------------------------------------------------------------
Petafoo - We Love Animals

This article seems dated and should be updated to reflect the changes. Instruction #1 is incorrect since there is no longer a DIV named "navigation" in the page.tpl.php file.

I wonder if the template.php code portion is also out of date? When inserting this into my template.php file I get the wsod. I've tried various basic syntax changes just to see if I am in error but beyond that I don't understand why it doesn't work as described.

<?php
function garland_user_bar() {
  global $user;                                                               
  $output
= '';
  if (!$user->uid) {                                                          
    $output
.= drupal_get_form('user_login_block');                           
 
}                                                                           
 
else {                                                                      
    $output
.= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
 
    $output
.= theme('item_list', array(
      l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
      l(t('Sign out'), 'logout', array(), drupal_get_destination())));
  }
   
  $output
= '<div id="user-bar">'.$output.'</div>';
     
 
return $output;
}
?>

I had to modify this for it work. Added this function to the module code I was implementing:

<?php
function MODULENAMEHERE_form_alter($form_id, &$form) {
    global
$form_values;
    switch (
$form_id) {
        case
'user_login_block':
           
$form['#action'] = '/?q=user&' .drupal_get_destination();
           
$form['#method'] = 'post';
           
$form['form_id'] = array(
            
'#type' => 'hidden',
            
'#default_value' => 'user_login'
            
);
           
$items = array();
            if (
variable_get('user_register', 1)) {
               
$items[] = l(t('Register'), 'user/register', array('title' => t('Create a new user account.'))). ' | &nbsp;';
            }
           
$items[] = l(t('Forgot Password?'), 'user/password', array('title' => t('Request new password via e-mail.')));
           
$form['links'] = array('#value' => theme('item_list', $items));
            break;
    }
}
?>

The login form needs a hidden field to be passed in as well (at least for Drupal 5.6), so I needed to add that. The action has also been updated. Then I dropped this function into the template.php:

<?php
function phptemplate_user_bar() {
    global
$user;
   
$output = '';
    if (!
$user->uid) {
   
$output .= drupal_get_form('user_login_block');
    }
    else {
   
$output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username', $user)));
   
$output .= theme('item_list', array(
     
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
     
l(t('Sign out'), 'logout')));
    }
   
$output = '<div id="user-login-form">'.$output.'</div>';
    return
$output;
}
?>

Also be aware that you'll need to make several changes to the above user_bar.css file. Most notably, the #user-bar should be changed to #user-login-form. I also made things smaller, brought the links underneath and aligned left, and spiced up the submit button a bit.

Here is mine:

/*
by default, the default form adds some surrounding space, this cancels it
*/
.content div.form-item,
.content div.content {
  margin: 0; padding: 0;
}
/*
this adds some space in top and bottom, so anything inside can look vertically
centered
*/
#user-login-form {
  padding: .65em 0;
  margin-top:30px;
  width:370px;
}
/*
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-login-form 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-login-form input {
  float: left;
}
/*
I don't like the required * (asterisks), so I hide them.
*/
#user-login-form span.form-required {
  display: none;
}
/*
the form submit button,
*/
#user-login-form input.form-submit {
  margin-top: -1px;
  margin-left: 10px;
  padding: 0em .5em .1em .5em;
  font-size:.9em;
  border:1px solid #999;
  background-color:#E3A332;
  color:white;
  cursor:pointer;
}
#edit-name, #edit-pass {
width: 70px;
font-size:.9em;
}
/*
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-login-form div.item-list ul {
  margin: 10px; padding: 0px;
  padding-top:5px;
  text-align:left;
  clear:both;
}
/*
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-login-form div.item-list ul li {
  margin:0px;
  padding: 0px;
  margin-top: 6px;
  background: none;
  list-style:none;
  display:inline;
}
/*
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-login-form p.user-info {
  float: left;
  padding: 0;
  margin: 0 0 0 10px;
}

Tom Wheeler
wheelercreek.com

Am using 6.15 and it works great but the CSSis a some work and am glad it well set up so its not hard to find what you need to edit.

for a view look at : http://soqko.com

is it possible to make a horizontal login block like facebook? Please Help me with that. only CSS would be great.

I used this snippet of code to make a horizontal login bar. I used CSS to shift the login elements around into a horizontal stripe. It wouldn't be helpful to share my code because it's specific to my design layer, but you could start by leveraging the display:inline attribute very heavily for all the classes. I used Firebug for Firefox to pick apart and experiment with the CSS files. See the end result, pick apart my CSS too: http://www.cctvcambridge.org

I've come to the same problem of delayed messages ..
I found that the easiest solution is to add a block anywhere in your theme with the function you've made without adding "print"

<?php
YOURTHEMENAME_login_bar
();
?>

and everything will go fine ..

Hi- I have two questions: #1. As in one comment I saw above, my login bar looks great when i am NOT logged in. As soon as I log in, however, the links ( * Your account & * Sign out) shift vertically below the welcome message. I'd like to put the links alongside the welcome message. I can't figure out where to do this. And #2. I'd like the form/bar/welcome message to be aligned against the right margin of my page. If anyone can help with these two issues, I would be most appreciative. And thanks for all the helpful tips so far.

The formatting is all done in the CSS file. My advice is to use a tool like Firebug (a plug in for Firefox) so that you can load the page and tweak the CSS on the fly - and when you have the layout the way you like it then you can make the final edits to the CSS file manually.

To make it easy, I often wrap the whole custom_login_bar function in a DIV tag with a specific ID so I can handle alignment more easily.

Thanks.

I managed to move the login bar over to the right using the user_bar.css with Firebug.
It looks perfect when I am logged out.

But I am still having trouble when I log in.

It shifts back over to the left and screws up the theme. I should mention I am working in a custom theme.

Firebug indicates that the welcome message and links are somehow defined by the theme css. I'd like to override this and just keep working in the user_bar.css if possible.

Thanks again.

If you translate User Name. You will add a large number of Users into the translation database, making that DB very large, and slowing everything down!

I've got this working great, except:

- when the user logs out, it still shows him logged in (although he's not).

How do I get this to display correctly?

BTW, everything works as per the original post. I followed it as suggested and it works on my custom theme. The only issue is I can't get the bullet points to go away. Somehow this doesnt seem to happen to anyone else or it isnt bothering anyone else.

Which is it?

The other point I want to ask is how to change the two texts "Create new account" and "Request new password" to something smaller. You see my vertical bar is not very wide and I am having to include these two within the space available. It would be nice if someone told me what line to add to change these two texts as well as removing the bullet points
Thanks in advance.
Navs

You can achieve that with the hook_form_alter like this:

/**
* Immplementation of hook_form_alter
*/
function <your_custom_module>_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'user_login_block') {
    // To change the default Username to just User:
    $form['name']['#title'] = t('User');
    // To change the "Create new account" to "Register Now!
    $items[] = l(t('Register Now!'), 'user/register', array('title' => t('Create a new user account')));
    // To change the "Request new password" to "Forgot your password?"
    $items[] = l(t('Forgot your password?'), 'user/password', array('title' => t('Request new password via e-mail.')));
    $form['links'] = array('#value' => theme('item_list', $items));
  }
}

I have this working on a Drupal 6 installation; but I guess it works in Drupal 5 as well...

Good luck!

Esteban Solano
PHP + Drupal Developer
AchieveInternet
(506) 8845-6097

http://www.achieveinternet.com

Above works fine but you need to assign attributes....

<?php
function custom_form_alter(&$form, &$form_state, $form_id) {
switch (
$form_id) {
case
'user_login_block':
unset(
$form['links']);
$items = array();
if (
variable_get('user_register', 1)) {
$items[] = l(t('Register'), 'user/register', array('attributes' => array('title' => t('Register a new account'))));
}
$items[] = l(t('Reset Password'), 'user/password', array('attributes' => array('title' => t('Have you lost your password?'))));
$form['links'] = array('#value' => theme('item_list', $items));
$form['name']['#required'] = FALSE;
$form['pass']['#required'] = FALSE
break;
}
}
?>

Here is an article on how to get granular control of the user login form for each individual element:

http://thefaultandfracture.blogspot.com/2009/04/theming-drupal-user-logi...

How to Concatenate this with your form which is great.

I want users after login to get a welcome message just like the garland_user_bar but concatenated with your form.

Can this be done? Thank you !

http://thefaultandfracture.blogspot.com/2009/04/theming-drupal-user-logi...

...so what do we have to do to make this work in Drupal 6, ideally with a "Zen" subtheme?

Thanks, -asb

Good question! I managed to get it so that the login forms and the welcome message show up at the top of the page, however they wont show up next to each other which is aggravating. I have tested this on multiple browsers still same problem :(

Any help from anyone would be great!

-E

Elie Khoury

<style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style>

How does this help find the css file? its not working for me and if I understood how it worked maybe I can figure out a work around

Elie Khoury

You can make your own style sheets for a theme. Personally I change most of the classes and add a lot of new html in my templates so by doing so most of the provided css files don't apply to my theme. What I do is in my theme info file I add the style sheets... stylesheets[all][] = node.css. then I add my custom style sheets to my template file like so... drupal_add_css(path_to_theme() .'/node-type.css', 'mythemename');

I have do as what you as said, and it is works. Thank you. But compare with original login block, the new login blog is lacking the title, which is 'user login'. May I know that how to create it??

<?php
echo "<h2 class='title'>Whatever block title you want</h2>";
?>

Very inspirational! But I really didn't feel the need to write a new function for this.
What I did was just creating a new region and put the standard login block (and in my case the "LoginToboggan logged in" block) in it.
Some custom CSS styling and you're done.

OK, but how did you manage to create a region in the first place? I am using the ADT theme and I find it puzzling about creating a topbar region. Let me know what you think.
Thanks
Tafa

Visit our Startups group on Drupal

Currently available for freelance if needed

First off I'd like to say great article, there is a module that does the same thing but somehow I prefer to use this approach. Maybe because its much more presentable. However when my site is loading I am seeing the login fields changing positions through the page load and it looks rather unsightly please advise why this is so. Here is the link to the site. Observe what happens when the site loads.

On your site the login fields are inserted before the <head> where as they should be after the </head>
I'm guessing you have placed them in the wrong place in your page.tpl.php?

hi

First off, thanks for a great article. But i'm stuggling a little. Why is my theme displaying two login forms? I have User login set to <none> in Blocks. I'm using Drupal 6.x. So why is my site: http://webtechnologies.me.uk/drupal/ displaying two forms?

my code:

//page.tpl.php
...
  <body<?php print framework_body_class($left, $right); ?>>
   <!-- Layout -->
<div id="outer-container">
<div class="container"> <!-- add "showgrid" class to display grid -->
  <?php echo framework_user_bar(); ?>
<div id="header" class="clearfix">
<?php print $header; ?>
<?php if ($logo): ?>
<a href="<?php print check_url($front_page); ?>" title="<?php print check_plain($site_name); ?>">
<img src="<?php print check_url($logo); ?>" alt="<?php print check_plain($site_name); ?>" id="logo" />
</a>
<?php endif; ?>
...

and

//template.php
function framework_user_bar() {
global $user;
$output = '';
if(!$user->uid) { //If user is NOT logged in...
$output .= drupal_get_form('user_login_block');
}
else{
$output .= t('<p class="user-info"> Hi !user </p>', array('!user' => theme('username',$user)));
$output .= theme('item_list', array(
l(t('Your Account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
l(t('Sign Out'), 'logout')));
}
$output .= '<div id="user-bar">'.$output.'</div>';
return $output;
}

help...

"Experience is the ultimate teacher"

I've got this funny feeling that your theme has a built in user login block. Some do, some don't. Garland has a built in search box and when it and the search block are enabled then I hear people asking similar questions. Check your theme page and configure your active theme, check if there are special theme elements enabled that shouldn't be.

Also, only one set of your user login elements is contained in the <div id="user-bar"> division, so that makes me think the other one is being created by something else. I can see that in your page source code on the link you gave us.

hi

"
I've got this funny feeling that your theme has a built in user login block
"

I checked my settings see: http://webtechnologies.me.uk/img/Screenshot.png for a screen shot, and this gives me no indication to the above?

"
Also, only one set of your user login elements is contained in the division, so that makes me think the other one is being created by something else.
"

That is evident, yes. I didn't notice that - it's very strange. I'm still at a loss though..

"Experience is the ultimate teacher"

thank you., its working fine.

kalidasan-india

After using MODULENAME_form_user_login_block_alter for altering a specific form ID (user_login_block) on D6 - error messages are not displayed when I call drupal_get_form('user_login_block') in custom front tpl.php file?
No error is visible if I insert an incorrect username or password. On "/user" error message block is displayed.

Followed this to the dot except that I want to display my login bar in the right-side-bar and so placed the function in step 1 in the appropriate DIV. All I get is a WSOD. Any help would be appreciated. Code and more details are available here : http://drupal.org/node/1078342

Acer Aspire 5745
[i5 430M, 3GB, 320GB]
Ubuntu 12.04 (Precise Pangolin)
Drupal 6.15, 7.x
Aware Hosting, DigitalOcean, Go Daddy, LimeDomains, Rackspace, Tata Instacompute

The reason that I got a WSOD was because there was some code that I had copied from http://drupal.org/node/350634 and had forgotten to remove when I followed the "More up-to-date method" by @wheelercreek. Once I cleaned it up I got this working.

I have placed the login bar in my right-side-bar and its a bit lengthy and hence messes up the layout. I'd like to remove the text box labels and put them as values into the text box itself. See the image at http://www.flickr.com/photos/sridharpandu/5511442921/ to see what I want to achieve.

To do that I followed the instructions "Do it with a form alter..." by @esolano. I am not sure if I need to change my script as per "Above works fine but you need" by @walker2238. So I left it aside.

Now when I login using the login bar I get the apache "It works!" page the #action that takes the value from drupal_get_destination() seems to be the problem.

On searching I found this post http://drupal.org/node/478328. Only to notice that the comments are dated earlier than the post itself. I guess the post was revised! Let me try this out and post my experiences.

Acer Aspire 5745
[i5 430M, 3GB, 320GB]
Ubuntu 12.04 (Precise Pangolin)
Drupal 6.15, 7.x
Aware Hosting, DigitalOcean, Go Daddy, LimeDomains, Rackspace, Tata Instacompute

Hi, I tried this out and it's pretty cool! I'm using Firefox 9.0.1 and I notice a funny behavior when the page loads. The username, password boxes and the submit button are drawn and then they shift to the left, settling in their correct location.

This moving around of elements looks messy and I'm wondering if there is a way to fix the CSS or HTML so that the input and submit button elements are initially drawn in their final location.

I'm not sure if this is a Firefox thing. Could it be the order of the CSS, or missing properties such as width and height? Could it have something to do with the floating elements?

Thanks!

I figured out why the input boxes were moving and changing size. It has something to do with using a non-standard font-family. It seems like the browser loads the standard font first and then realizes it has to use the custom font, so it resizes and positions the input boxes.

How to do this in D7?

Many of these tutorials suggest altering or creating tpl files. I am new to drupal, so forgive me, but is this not modifying core drupal files. Will the changes survive updates?

The work of making a custom theme is not done in core, but instead in a separate place designed to survive updates. "Create theme template files" is another way of saying "bypass core".