Twitter style Login box for Drupal

In this tutorial I'll show just how easy it is to do a Twitter style drop-down login form in Drupal 6 (probably just as easy if not identical in Drupal 5 and 7). If you don't know what this looks like these days you better get over to http://twitter.com/ and scope it out so you know that I'm on about - see the link in the top right corner...

Requirements

* We're gonna cheat and use the LoginToboggan module
* Moderate CSS skills

Login Toboggan

* Download and install the module
* Go to the Blocks configuration page for your theme and configure the user login block:
* Set the block title to <none>
* Under "Block Type" choose "Collapsible form"

Save the block settings and then place your block in a region. In the screen-shots below I am using Adaptivetheme's Leaderbord region in one of our new themes.

CSS

Strait away you're going to have the collapsible block effect, however when it opens it will push the content below it down. What we need is some CSS.

The following will position the block using absolute positioning and set a z-index on it so it shows above other stuff - when it opens it will show "over" the other content instead of pushing it down.

This is what you absolutely need in terms of CSS (pun not intended...):

#block-user-0 {
  position: absolute; /* You must have this */
  z-index: 10; /\* and probably this also, or even higher \*/
}

The following brings some style to it all and I have included a set of screen-shots showing the two states - open and closed (see bottom).

/* User Login block  not unlike Twitter */
#block-user-0 {
  margin: 0;
  position: absolute;
  right: 0;
  top: 89px;
  z-index: 10;
}
#block-user-0 .block-inner {
  color: #222;
  padding: 0;
}
#block-user-0 .content {
  padding: 3px 7px;
}
#user-login-form {
  margin: 0;
  padding: 0;
}
#toboggan-login-link {
  background: url(images/user.png) no-repeat right 0;
  display: block;
  padding: 0 22px 0 0;
  text-align: right;
}
#toboggan-login {
  padding: 5px 10px 10px;
  background: #CCC;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

Twitter style login block for Drupal - closed
Twitter style login block for Drupal - open

Last updated 18th August, 2010 - 12:39am

Authored by Jeff Burnz on