Style a horizontal login block in the footer

Last updated on
8 September 2016

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

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.

Drupal 7


/**
 * User login block in footer.
 */
#block-user-login {
  margin: 2em auto;
  text-align: center;
}
#block-user-login .block-title {
  display: inline-block;
  margin-bottom: 0.5em;
  text-align: center;
}
#block-user-login .content * {
  display: inline;
}
#block-user-login .form-item {
  margin-left: 1em;
}
#block-user-login .form-actions {
  margin-left: 1em;
}

Drupal 6

/**
* 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;
}

Help improve this page

Page status: No known problems

You can: