Theming the user login block

I wanted to style the login block to be horizontal rather than vertical, to make better use of the space, as it was taking too much vertical space. Among the different ways to customize the user login block, I went for a combination of css+jquery, without editing any *.tpl file or modifying markup. Results can be seen in the picture below:

The trick here consisted of using a jquery overlabel script and adding it to the theme´s js folder, and creating a script.js file with the following code to make the labels be displayed in the input forms and hide when text is inputted or display when they are empty:

$(document).ready(function() {

$(“#header label”).overlabel();


CSS did the rest. I created an overlabel stylesheet to take care of the custom login block, and updated the theme´s .info file to include the mentioned stylesheet and scripts. Once again, drupal wouldn’t see the changes until the modules page at the backend is refreshed. For cross-browser compatibility, some styles had to be tweaked for the internet explorer browser to render appropriately.

Following link served as reference:


Posted on March 2, 2010, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: