Styling the Drupal User Login Block – PHP Code & CSS

This tutorial goes through the steps of one way to create a custom user login block for Drupal. Best is to disable the original login block in the admin/build/block section, start with a new block with custom code, and then style the details with CSS. The requirements for this project are a rounded corner, blue background block with two custom tabs at the top.

1. in admin/build/blocks – click on the “add new block” tab

2. enter the following code:

<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs"> 
<span class="utabs1">Log In</span><span class="utabs2"><a href="http://webdevnews.net/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="http://webdevnews.net/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>

This code originally came from: http://nossdutytask.com/node/240

There are also some nice examples at: http://nossdutytask.com/node/228

I modified the code to add some css IDs, classes, span tags, and also the text/links for the top tabs.

3. Select PHP code for the input and save the block.

4. From the main blocks page, click on “configure” for the block you just created. I selected to show this block only for “anonymous user” because I did not need the simplified display after the user has been logged in. The code generates a block that can also be customized to show the site status for authenticated users, but usually the navigation menu does this sufficiently. Enable the block and position it where you like in the display.

5. The rest is basically CSS – setting the image as the background for the login area and the tabs, positioning the text elements and fields. This example is based on a 250px wide column with a two column layout. It includes bold text on the display and overrides the default styling of the Drupal user login form elements.

There is a vertical-alignment fix to standardize the display in IE, and a 1px addition to the lower input field so that the form will align evenly on both ends. Add the following CSS to your theme in style.css, blocks.css, or wherever fits best.

#block-block-4 {
color: #fff;
}
#block-block-4 a {
color: #fff;
}
#umain {
font-weight: bold;
height: 127px;
width: 250px;
background: transparent url("../img/login_bg.jpg") no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url("../img/tabs1.jpg") no-repeat top left;
}
#usertabs a {
color: #333;
}
.utabs1 {
font-weight: bold;
float: left;
padding-top: 4px;
padding-left: 25px;
}
.utabs2 {
font-weight: bold;
float: right;
color: #333;
padding-top: 4px;
padding-right: 60px;
}
.utabs3 {
font-weight: bold;
float: left;
padding-left: 25px;
padding-top: 4px;
}
#umain #edit-name {
margin-bottom: 5px;
width: 147px;
}
#umain #edit-pass {
margin-bottom: 10px;
width: 148px;
}

Note: the “block-block-4” value will be contingent on the name of the block that was created to input the custom PHP code of the login form.

IMAGES:

Upload to your theme’s “image” folder (in this case named ‘img’):

Tabs Background image: tabs1.jpg:

tabs1.jpg

Login Background image: login_bg.jpg

login_bg.jpg

7. To add a custom button, also upload and add this CSS:

#umain #edit-submit {
float: right;
margin-right: 20px;
background-color: transparent;
color: #333;
border: none;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
font-weight: bold;
background-image: url("../img/button1.jpg");
background-repeat: no-repeat;
height: 24px;
width: 58px;
cursor: pointer;
}

BUTTON IMAGE:

button1.jpg

button1.jpg

FINAL RESULT:

screenshot-login.jpg

Hopefully, this will save some people a lot of time and is also a good base for doing further customization with the background images and CSS.

FURTHER REFERENCES:

http://drupal.org/node/134319
http://drupal.org/node/19855
http://drupal.org/node/92657
http://drupal.org/node/84724

Pings/Trackbacks