Drupal 7 : Creating Horizontal Login bar without module

Do you know that you can create a new form directly from theme template.php without the need of creating a module in Drupal 7?

Armed with that knowledge, we will build a new login form and transform it to become a horizontal login bar.

You might asked, why create a new login form while you can form alter the standard login block form (user_login_block) ?

The reason for this is very simple, the standard login block form will be altered by other contribution module such as captcha module and it would not be possible to display the captcha in a tight spaced horizontal bar.

Not to mentioned other standard module such as openid will also altered the module and adds its own html tag.

So by creating a new login form we will be able to create a clean and slim horizontal login bar without the worry about other contribution module messing the layout of our horizontal login bar.

To do this we need to add a few functions to the theme template.php.

Function 1 : Create a $form array for our new login form

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'] = '
'; 
  $form['#suffix'] = '
'; 
  $form['name'] = array( 
    '#type' => 'textfield', 
    '#prefix' => '
', 
    '#suffix' => '
', 
    '#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' => '
', 
   '#suffix' => '
', 
  ); 

  $form['actions'] = array( 
    '#type' => 'actions' 
  ); 
  
  $form['actions']['submit'] = array(
    '#type' => 'submit', 
    '#value' => '' 
  ); 

  return $form; 
}

This function will create a div wrapper for the login form and div wrapper for the login textfield and password textfield.

Also the function will embed a javascript function to display "Username" in the username textfield which will be changed when the textfield is clicked.

This is important because the function didn't have any title field to let user differentiate between username field and password field.

Next we will need to create the actual function for building the form array and output it as html tag.

Function 2 : Determine if user is not logged in -> show the login form but if user is logged in -> display greeting message instead

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 '
' . t('Welcome back ') . ucwords($user->name) . '
'; 
  } 
}

This function will switch between anonymous user and logged in user.

You will need to call this function in the area that you wish for the login bar to appears.

Last thing is the css, you will need to create a new css / use the theme css to add these simple css code :

/** Login Bar **/
.usericon, .passicon {
float: left;
width: 180px;
padding-left: 36px; /** create space for small 24px x 24px icon **/
height: 24px;
}
#loginbar {width: auto; float: right;}
#loginbar .form-actions {display: none;}
#loginbar p { color: #fff; font-size: 1.1em; font-weight: bold;}

If you notice, the functions still build the login submit button, without this the form will not submit thus no login process will ever happen.

To tackle this, we just need to hide the login submit button via css To see this code in action, you can visit : http://zenith.victheme.com

27 comments

User Comments

Meppy says :

I tried this and had to fix your code:

if ($user->uid == Innocent {

should read:

if ($user->uid == Innocent) {

But then what do I do? How do I add this form to my site? I don't see it in blocks, how do I actually add the logon form?

• reply

NotWorking says :

I tried this with a Zen subtheme in Drupal 7

Now I have no user login block and I can't login to my own site...

Great.

• reply

duckz says :

I've not tried this with a subtheme, but afaik you will need to clear cache upon changing anything with a subtheme template.php?

Anyway try to use /user to login. the code above will not affect the page since it is altering the user_login_block form. if you still cant use the /user page then something else is broken

• reply

NotWorking says :

I tried this with a Zen subtheme in Drupal 7

Now I have no user login block and I can't login to my own site...

Great.

• reply

Meppy says :

I tried this and had to fix your code:

if ($user->uid == Innocent {

should read:

if ($user->uid == Innocent) {

But then what do I do? How do I add this form to my site? I don't see it in blocks, how do I actually add the logon form?

• reply

duckz says :

actually I put the code correctly but the bbcode module see "0)" as Innocent, anyway, you can either :
1. put the function in template.php then create a new block, use php as the filter and call the function there
2. omit the function and put the function content directly in the new block, use php as the filter for the block
3. put the function in template php and call it directly in node.tpl or page.tpl also works

• reply

Robert says :

I really like what you have done, but I have also tried this and cannot get anything to display. I tried all methods mentioned above. Currently putting both functions in the template.php and calling it from the page.tpl but nothing shows. Tried calling from a new block also. It is probably something very easy because I am a novice user. here is my call from page.tpl. Do I need my loginbar div? doesn't it create it's own div? Do I put it in the header wrapper? I can get "Hello" to show, but the call to login_bar returns nothing.

<? //print "Hello"; ?>

<?php
print render($page['login_bar']);
?>

Thank you for any further insight.

• reply

duckz says :

try do print login_bar()

• reply

Anonymous says :

If you put the functions in the block as well, you have it independent from your theme. This allows you to reuse the entire thing on another theme as well, if you decide to switch ...

• reply

noamik says :

If you put the functions in the block as well, you have it independent from your theme. This allows you to reuse the entire thing on another theme as well, if you decide to switch ...

• reply

GDippe says :

Thanks!
Small typo ...
Should be
print login_bar ()

• reply

duckz says :

Thanks for the notice

• reply

misteryes says :

Got it working after all.

I put the 2 functions in a block with php code enabled, but the second function I put it not as a function, just the code as "global $user;
$form = drupal_get_form('horizontal_login_block');
return render($form);"

then used the block settings to display it only for anonymous users. I also had to download a png to have the icons.

Thanks.

• reply

duckz says :

Glad to hear it working

• reply

misteryes says :

The login bar works well in Firefox, but it's not submitting in Internet Explorer when I press "Enter". Any idea what could cause that?

• reply

misteryes says :

I found where the problem was coming from.

The CSS for form-actions is "display:none". This will cause IE9 not to submit the form when you press Enter.

The solution is to hide the login button by using position:absolute and z-index. You can hide the button under another element of the page, then it works in IE.

• reply

duckz says :

Thanks for the useful information :)

• reply

Love it! says :

Love this .. but .. forgive me for being a noob .... how do I get my own icons in there? Peace ;)

• reply

Anonymous says :

When i fallow the steps it doesn't appear horizontal. why is this? and the login is still underneath just very thin.

• reply

duckz says :

you should check the parent wrapper css and play around with it

• reply

Anonymous says :

Is there a way to add create login functions below this? So horizontal login then under it links to create a new account.

• reply

duckz says :

You can add the links in the $form array something like

$form['links'] = array(
   '#type' => 'markup',
   '#markup' => l(t('Register'), 'user/register'),
}

• reply

Anonymous says :

Hitting enter to login works only for Firefox. So I tried to re-hide button in css, but it seems that there is no input-button type in html at all.
I would appreciate any advice how to make this form to work on Chrome/IE hitting enter or how to put there submit button.

• reply

balram says :

how to fix the submit button i want to add submit button.
help please

• reply

MannyGlamy says :

i think there is an error in the HTML ?

• reply

Zerkos says :

Awesome! Working great after customizing the css. Thanks!

• reply

pery says :

Hi, thank very much for the info, I changed a little of code. Put this in it:

  $form['name']['#attributes']['placeholder'] = t( 'Username' );
  $form['pass']['#attributes']['placeholder'] = t( 'Password' );

and delete:

    '#default_value' => 'Username',
    '#attributes' => array(
      'onblur' => "if (this.value == '') {this.value = 'Username';}",
      'onfocus' => "if (this.value == 'Username') {this.value = '';}"
     ),
  );

this work for me.

regards and sorry for my bad english :P

• reply

Post New comment

Your name *

E-mail *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage

Comment *

More information about text formats

Text format Filtered HTMLPlain text

Filtered HTML

• Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd><pre>
• Syntax highlight code surrounded by the <pre class="brush: lang">...</pre> tags, where lang is one of the following language brushes: bash, css, diff, jscript, java, perl, php, plain, python, ruby, sass, scala, sql, xml.
• Web page addresses and e-mail addresses turn into links automatically.
• Lines and paragraphs break automatically.
• To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.

Plain text

• No HTML tags allowed.
• Syntax highlight code surrounded by the <pre class="brush: lang">...</pre> tags, where lang is one of the following language brushes: bash, css, diff, jscript, java, perl, php, plain, python, ruby, sass, scala, sql, xml.
• Web page addresses and e-mail addresses turn into links automatically.
• Lines and paragraphs break automatically.

Word verification * (verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.