Horizontal User Login Block - Using CSS and jQuery

Posted December 4th, 2008 by jeremy

There are many ways to style and reorganize the user login block, especially with the power that Drupal 6 provides themers. As you probably know, the user login block displays vertically by default. A few of our themes require that the user login block be displayed horizontally to better fit the look and feel of the theme. I set out to find a way to achieve this without editing any *.tpl files. By just editing the theme’s CSS I was able to get the results we were looking for and have complete control over the styling of the user login block. I also learned some neat tricks using jQuery to help with the display of the labels for the input fields.

Adding the necessary scriptsIn this example using Drupal 6 I am going to show you how to style the user login block to be horizontal rather than vertical and also incorporate the use of the jQuery overlabel script. This makes your input labels be displayed in the input forms themselves and hide when there is text in them and display when they are empty (check out an example). This makes for a nice clean horizontal user login block and requires no custom programming.

Being that Drupal 6 ships with jQuery there is no need to download it. All we need is to download the jQuery overlabel file and add it to our theme’s directory. Be sure to remove the “_.txt” from the end of this file so it is named “jquery.overlabel.js”.

We then need to create a script.js file if there already isn’t one in your theme’s directory. Create and open the script.js file and add this bit of code to use the jQuery overlabel script on your user login input fields.

$(document).ready(function() {$("#header-top label").overlabel();});In the code you see above, “#header-top label”, refers to the region I am loading my user login block. In this case I am loading it in the “header-top” region. You can change this to suit your needs but for this example my CSS will also be referencing this region, so change as needed.

Editing the .info fileNow we need to call the jQuery overlabel through your theme’s .info file. Open the .info file and add these two lines:scripts[] = script.jsscripts[] = jquery.overlabel.jsThis will make sure that when you are viewing your site with your theme the “script.js” and “jquery.overlabel.js” files will be loaded and ready for use. You may need to clear your cached data so your theme loads these files correctly. To be sure navigate to this page “/admin/settings/performance”

and click the button that says “Clear cached data”. Once the cache has been cleared check the source code for the page and make sure these two files are loading now.

Now that we have the necessary jQuery scripts in place we need to place the user login block in the appropriate region. I chose to place my user login block in the “header-top” region. Once it’s in place go ahead and log out of your site so the user login block is displayed in the appropriate region. Now we can begin our styling as needed.

CSS MagicThere’s a bit of CSS code below so I recommend copying it to your theme and editing there to make it fit your theme better. Again, the CSS is targeting the user login block when placed in the “header-top” region. So rename the divs as needed to fit your site.

html.js #header-top #block-user-0,#header-top #block-user-0 {display: block;height: 4em;margin: 0;padding: 0;position: relative;width: 500px;}#header-top #block-user-0 {height: 6em;margin-top: -35px;}#header-top #block-user-0 .content {padding: 0;margin: -10px 0 0 0;}#header-top #block-user-0 h2.title {display: none;}#header-top #block-user-0 #edit-pass-wrapper {display: block;float: left;margin-left: 10px;margin-right: 10px;}#header-top #block-user-0 #user-login-form {margin: 0;padding: 0;}html.js #header-top #block-user-0 #user-login-form label {color: #4e4e4e;font-size: 85%;font-weight: normal;margin-left: 7px;position: absolute;text-align: left;}#header-top #block-user-0 #user-login-form label {position: static;margin-left: 2px;

text-align: left;}#header-top #block-user-0 #user-login-form input.form-text {border: 1px solid #ccc;padding: 1px;width: 115px;}#header-top #block-user-0 #edit-name-wrapper {display: block;float: left;}html.js #header-top #block-user-0 #user-login-form input.form-submit,#header-top #block-user-0 #user-login-form input.form-submit {clear: none;float: right;margin: 12px 0 0 0;}#header-top #block-user-0 #user-login-form input.form-submit {clear: none;margin: 30px 0 0 0;}html.js #header-top #block-user-0 .item-list,#header-top #block-user-0 .item-list {float: none;margin: 2px 0 -15px 0;padding: 5px 0 0 0;text-align: left;width: auto;}#header-top #block-user-0 .item-list {float: right;margin: -17px 105px -15px 0;}#header-top #block-user-0 .item-list ul {margin: 0;padding: 0;}#header-top #block-user-0 .item-list li {margin: 0;padding: 0 0 0 20px;list-style: none;font-size: 77%;}This bit of CSS will get your user login block to transform into a horizontal login rather than vertical. You may need to tweak the margins and padding to suit your theme but this should get you most of the way there. It also accounts for the lack of javascript so it degrades nicely and displays the labels for the input fields above rather than inside the input fields in case javascript is disabled.

So whether your user has javascript enabled or disabled they will see the horizontal user login block and still be able to log in to the site without problems.

OpenIDAnother bit of CSS you may want to add is the styling for the OpenID portion of the user login. Things look a little off if the OpenID module is enabled and not styled to fit this new look for the horizontal user login block, so it takes some more CSS to make it look good again. Add this CSS to style the OpenID options in the user login block correctly.

/* OpenID */#header-top #block-user-0 #edit-openid-identifier {display: block;text-align: left;}#header-top #block-user-0 #user-login-form input#edit-openid-identifier.form-text {margin-top: 1px;padding: 1px 1px 1px 20px;width: 130px;}#header-top #block-user-0 #user-login-form input#edit-openid-identifier.form-text {padding: 1px 1px 1px 20px;width: 130px;float: left;margin: 0 10px 0 0;}#header-top #block-user-0 #edit-openid-identifier-wrapper {float: left;width: 160px;}#header-top #block-user-0 #edit-openid-identifier-wrapper .description {font-size: 77%;text-align: left;}html.js #header-top #block-user-0 #edit-openid-identifier-wrapper label {padding: 0 0 0 20px;}#header-top #block-user-0 #edit-openid-identifier-wrapper label {padding: 0;margin: 0;}#header-top #block-user-0 #user-login-form li.openid-link,#header-top #block-user-0 #user-login li.openid-link {background: none;}#header-top #block-user-0 #edit-openid-identifier-wrapper .description a,#header-top #block-user-0 .item-list li a {text-decoration: none;}#header-top #block-user-0 #edit-openid-identifier-wrapper .description a:hover,#header-top #block-user-0 .item-list li a:hover {text-decoration: underline;

}

IE Fixes..Just like anything good on the web, IE comes along and ruins it. Here are a few fixes to get your horizontal user login block looking and working correctly in IE7 and IE6.

IE6Add this bit of CSS to your IE6 stylesheet.

#header-top #block-user-0 .item-list {position: relative;}#header-top #block-user-0 .item-list li {padding: 0 0 0 10px;}

IE7Add this bit of CSS to your IE7 stylesheet.

#header-top #block-user-0 .item-list {position: relative;}#header-top #block-user-0 .item-list li {padding: 0 0 0 10px;}Again, this code is targeting the user login block when displayed in the “header-top” region. So change that as needed throughout the scripts and CSS files so it fits your theme correctly. You may want to display the user logon block in other regions so that is key to making it look and function correctly.

ConclusionThis is just one example of taking a default Drupal block and molding it to your needs, and the attention to detail and polishing we provide for our themes. Just wanted to share this bit of information because I know it would work well for a lot of people (wish I would have found jQuery overlabel earlier!) and it’s quite easy to modify to fit your needs.

It’s good to know the user login block can be so flexible, especially since it’s used so much and in so many different instances it needs to be flexible. The power of CSS really does the work here and it’s a bit cleaner with the addition of the jQuery overlabel script. This example can be used in many many different ways so feel free to rip it apart and mold it to your theme and your needs. Enjoy!