background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount

Changing the user login block to a horizontal layout
Eric.London's picture
Submitted by Eric.London on 2/3/2009
Tags:

At some point your design may call for a horizontal user login block. Luckily this can be accomplished with just a few lines of CSS. I added the following CSS to my theme:

.block #user-login-form { text-align: left; }
.block #user-login-form #edit-name-wrapper { float: left; margin-right: 10px; }
.block #user-login-form #edit-pass-wrapper { float: left; margin-right: 10px; }
.block #user-login-form #edit-submit { float: left; margin-top: 25px; }
.block #user-login-form .item-list { clear: both; text-align: right; }

Before:

After:

This was quick and easy.

Submitted by Anonymous on Wed, 01/25/2012 - 07:03.

Thanks, I have also tried other ways but all of them bored me to death and I gave up. This was quick and easy. Thanks. Now if I could just figure out how to make the login button, and the Facebook connect buttons line up as well and tighten it all up. Then maybe I could squeeze it in my header or even the very top of the main page content. Right now its at the very bottom in the footer,which isn't ideal. Take a look if you want, I would love suggestions. http://www.xantaz.net/

Great solution.

Submitted by Anonymous on Tue, 01/05/2010 - 17:35.

I've seen so many other descriptions of how to do this, and even tried many of them. This is by far the simplest and most elegant. Thanks very much for sharing it!

Thanks

Submitted by Anonymous on Sat, 09/26/2009 - 23:45.

This was very helpful for moving the username, passwd; easy fix. Thanks

Wow!

Submitted by Anonymous on Sat, 08/01/2009 - 21:21.

I've seen others do this, but with more code and effort than your solution. It's very elegant. Thank you!

horizontal user login block

Submitted by Anonymous on Mon, 11/23/2009 - 04:19.

Thank you that worked for my drupal site. I changed only the "Register" & "Forgot Password" part.

You mentioned that you added

Submitted by Anonymous on Sat, 08/22/2009 - 17:23.

You mentioned that you added the CSS to your theme...which file did you add the above code to? Sorry but I'm a newbabe. thanks!

Eric.London's picture

style.css

Submitted by Eric.London on Sun, 08/30/2009 - 12:05.

This CSS is usually added to your theme's style.css file.

nice

Submitted by Anonymous on Fri, 05/14/2010 - 16:20.

very nice! but I'm new to drupal, so where in the style.css do you want me to add the code. thanks for your help

You may add the code to the

Submitted by Anonymous on Fri, 12/03/2010 - 13:22.

You may add the code to the end of the file.