Community Documentation

Style a horizontal login block in the footer

Last updated August 27, 2009. Created by joachim on May 17, 2008.
Edited by bekasu, bryan kennedy. Log in to edit this page.

It's quite simple to restyle the standard user login block so it appears all on one line. You can then put it your footer, and it's out of the way on sites where most users don't need to (or can't) log in.

Here's the code for your stylesheet:

/**
* user login block in footer
*/
#block-user-0 {
  margin: 2em 0 1em;
}
#block-user-0 *
{
  display: inline;
  color: white; /* match the text colour of your theme here */
}
#edit-user-login-block {
  display:none; /* rehide hidden form element */
}
#block-user-0 h2 {
  font-size: 92%; /* match .content font size... change this for your theme */
}
#block-user-0 .form-item {
  margin-left: 1em;
}

Comments

A question about the universal selector in this howto

Hi,

I'm a beginner when it comes to Drupal and CSS. I'm trying to understand how the universal selector works so as an exercise I've been trying to produce the same or similar result to the above code without using the universal selector.

In other words I want to test with various combinations of #block-user-0 element name. But so far I've not been able to construct something that works. Whereas using the universal selector works fine.

Could someone please provide a hint or example of how to construct the equivalent of this #block-user-0 * without using the universal selector?

With thanks,

Warren.

replying to self

In the end I achieved the desired style with this code

#edit-name-wrapper, #edit-pass-wrapper, #edit-name-wrapper *, #edit-pass-wrapper *
  {
   display:inline;
  }

you saved me!

thanks for posting this css style, i couldn't for the life of me figure out how to get the username and password input forms on one line and this worked perfectly.
Gracias!

what .css file did you add

what .css file did you add this to?

same question

For the starter theme, which css file does this go in, and where do you change things so that it appears at the bottom?

The Bar Furniture

The Bar Furniture

latest product are

Bath Furniture, Anna Collection by JCPenney - Black
Chelsea Corner Linen Storage Cabinet I - 67.5"Hx22"W, Red
Belle Foret French Country Single Basin Corner Bathroom Vanity 80060R

login footer horizontal for drupal 6

someone know how to create this code compatible for drupal 6.x ?

Luxury Furniture
http://www.luxury-furniture.biz

this is already in

this is already in compatible with drupal 6. it is just css and nothing else

didn't work as expected for me :(

...

am I doing something wrong? this code needs to be added to the theme's style.css file right?

A .css file needs to be

A .css file needs to be modified and it MAY be the style.css. In my case, using Acquia + Fusion Core in D6.16 +Ubercart, I am instructed to ONLY modify the "local-sample.css" and rename it to local.css

Is user login pointed to footer in blocks. Not trying to be a smartA$$

Video Tutorial

Hi. I have done a video tutorial for doing this in a Zen Subtheme using a fresh.css file. Check it out at https://mark-fuller.org/drupal-blog/horizontal-login-bar-using-zen-subtheme

Not there

The whole site seems to be gone.

Page status

No known problems

Log in to edit this page

About this page

Drupal version
Drupal 5.x, Drupal 6.x
Audience
Themers

Theming Guide

Drupal’s online documentation is © 2000-2012 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.
nobody click here