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;
}
Comments
Nice post! simple and
Nice post! simple and effective way of not cluttering a page visually.
Thanks!
Web usability
Simple but great for web usability : it avoids a page load or a not-always-needed block.
Nice looking “hack”,
Nice looking "hack", thanks.
Is it possible to have something similar, but without LoginToboggan module?
I would also like this nice
I would also like this nice feature, but without the LoginToBoggan since it makes (strange enough) some things worse in some of our cases.
Nice Post
Nice post, going to give this a shot.
position: relative
don't you need to declare position: relative for any of the parent divs in order to do this?
Yes
In short, yes. You can set position: relative; on the region DIV.
love it
I love twitter therefore i love this too!
Where does the CSS go?
Forgive my ignorance. Could you please tell me where the CSS should go? Does it go into the theses CSS file? or elsewhere?
Dave - its doesnt really
Dave - its doesnt really matter where it goes, your theme will have at least one stylesheet, possible called styles.css, and it should ideally go in there. Take a look in the folder for your theme and see what CSS files it has.
CSS in style.css
Please confirm if there is any particular position this code you fit or it can be placed anywhere?
...
Put it in your themes main CSS file, whatever that is named, possible styles.css, but themes can name their stylesheets whatever they want so it could be different.
love
I LOVE TWITTER
same here
same here
Login Box pops up briefly on site load then dissapears
Everything works great, except that when i navigate to my site the login box pops up briefly and then reverts to the the normal drop down functionality. Any ideas on what could cause that?
Probably a performance thing,
Probably a performance thing, sounds like the files are either being loaded or served very slowly - make sure you have JS and CSS aggregation turned on.
EXcellent as Usual
Another fantastic tutorial. It would be great if you guys got your themes up sometime soon too.
Thanks for sharing this, it works damn good!
Oh man, yeah, we have 3
Oh man, yeah, we have 3 coming soon, I've been slaving my ass off all Summer to get them ready, but, as per the past TWO YEARS I'm snowed under with Drupal 7 development! They're coming, I might post post some screenshots and previews of them tonight, they're HOT.
Drupal 7
Where can i find this option in D7 - Under “Block Type” choose “Collapsible form"?