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="/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="/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(&amp;amp;amp;quot;../img/login_bg.jpg&amp;amp;amp;quot;) no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url(&amp;amp;amp;quot;../img/tabs1.jpg&amp;amp;amp;quot;) 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, &amp;amp;amp;quot;Lucida Grande&amp;amp;amp;quot;, sans-serif;
font-weight: bold;
background-image: url(&amp;amp;amp;quot;../img/button1.jpg&amp;amp;amp;quot;);
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
Related Posts:
31 Responses to “Styling the Drupal User Login Block – PHP Code & CSS”
Leave a Reply
Pings/Trackbacks
-
[...] Source [...]
Recommended by Web Dev News
Thanks for pointing that out, I took care of it.
Seems like nice "trick".
Is there some live demo/example ?
Thanks.
I have released three themes for a Drupal 5.x Drigg installation that use this custom login block:
http://www.typehost.com/free-downloads
Many thanks for the level of detail here. Much appreciated
Thanks for the thorough tutorial. The tabs are a nice touch!
I would recommend to place the coding in a block override, so coding is in a file in your theme folder.
PHP in your Dbase has got a few issues: version control & bugsquating are the most important ones. Because this doesn't have to be manageable from cms, that's no problem
Umm that first code block has been escape when it shouldn't have been….
@theme garden: this was created for http://www.echodemic.com - I think it is based on the mySpace login block style
In the http://www.community.hendricks.comthe same concept i used earlier………….! :)
thanks for helpful tutorial, but I want to know how make css for drupal custom form,
Does this work on drupal 6 or 5.
If its not for 6 are there any similar tutorials for 6?
Thanks
This is for a 5.x installation.
Thanks for the tutorial, my login form now looks much better than the default.
A very slick tutorial, was wondering if this was possible.
I like the addition of the custom button, really stands out now from your typical form.
The tabs are wonderful, actually decide to use them elsewhere too! Thanks for the tutorial.
I was trying to do something similar, but couldn't get it aligned vertically, thanks for the tutorial. I have it sorted out now.
Hi guys, it's very interesting to make the Drupal Login Box aligned horizontally. I did this at Horizontal Custom Drupal Login Block
i got this work with D6. but i can’t seems to make it stay at the current page (frontpage for my case) after logged in. it keeps on going to the user’s profile page.
any idea how can i force it to be at current page?
thanks in advance.
it’s certainly not a good practice to hardcode the form-part. The original one is generated by the Drupal Forms API and goes the through the Theme API. I suggest using either form_alter in order to modify the already existing block, or creating a custom theme function for it.
more infos: http://api.drupal.org/api/file/developer/topics/forms_api.html
and / or: http://api.drupal.org/api/function/hook_form_alter/6
the two blocks Username and Password are not aligned. I’hv chabged CSS but no success (Username width :147px)
(Password width : 148px). How to fix it !
Nice.. eye catching web designs
Thanks a lot!
trying to do something similar
very great and good information I like the addition of the custom button, really stands out now from your typical form.
thank you for sharing
This is quite applicable to our project.
Just what I needed to know regarding how make css for drupal custom form, vigilon security.
-
Really a nice article for customizing the login form.My search ends here for customizing the login block in drupal.
Since both Dupral and WordPress use PHP codes, is it possible to integrate these two interphase and make a hybride website?
Hy, i use this, but i meet some proble, how to insert captcha in login tab.? Can You tell me.?
Nice and useful tutorial.Thanks for sharing