(Tips) Horizontal User Login Block - Using CSS and jQuery

Tips : Horizontal User Login Block - Using CSS and jQuery

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 scripts-
In 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.

| Read more..

Courtesy : Topnotchthemes.com