Style a horizontal login block in the footer
Last modified: August 27, 2009 - 02:42
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;
}
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-0element 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!
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