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; ?>

Read the rest of Styling the Drupal User Login Block – PHP Code & CSS »