(Tutorial) Styling the Drupal User Login Block - PHP Code & CSS

Tutorial : 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:

view plaincopy to clipboardprint?
<?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; ?> 

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

  Read more..

Courtesy : Webdevnews.net