Here is our login form in FranchiseBlast.  We think it's a pretty cool login form and it was not that hard to do.  It only requires basic CSS and some jQuery.

How we did it

The only things you need is an image like this one here:


Then we used the following CSS to define our text boxes style.  The "Login" css class is applied to the ASP.NET Login control and the class "TextBox" are applied to both textboxes in the login control.

.Login .Textbox, .Login .Hover
    width: 337px;
    height: 17px;
    background:transparent url(images/inputlogin.png) no-repeat top left;
    color: Black;
    border: none;
    padding: 5px;
    font-weight: bold;
.Login .Hover
    background:transparent url(images/inputlogin.png) no-repeat bottom left;


Has you can see, the only difference for .Hover class is that we tell the background to show the bottom of the picture (the orange part) instead of the top of the image.  If Internet Explorer supported the "focus" CSS pseudo class then it would be much simpler, but IE doesn't support it, so we have to use jQuery to achieve the effect.

Don't forget to add jQuery.js somewhere in the page and then you can add the following script to your page:

$('.Login .Textbox').focus(function(){
  $(this).attr('class', 'Hover');
$('.Login .Textbox').blur(function(){
  $(this).attr('class', 'Textbox');


Basically the code above registers an event to all DOM elements which have the "Textbox" CSS class and are children of a control of the "Login" CSS class. The first call registers an event handler on the focus event of the text box which changes the class to Hover.  We do the exact opposite for the blur event when we the text box loses it's focus.   There may be a better way to do this why jQuery; if you know how, let us know.

Finally, as a special added touch, we use an AnimationExtender after a successful login:

<ajax:AnimationExtender ID="animLogin" runat="server" TargetControlID="LoginButton">
            <FadeOut Duration=".5" Fps="20" AnimationTarget="pnlLogin" />


One last thing, if you use this AnimationExtender, you have to make sure your validators don't run on the client side. Validation must occur on the server otherwise the fade out animation will still occur and the login control will disappear. For example, we used a RequiredFieldValidator for both the username and password text boxes and we had to set the EnableClientScript property to false on both these validators.

This concludes how to do a skinned Login control à la LavaBlast.

kick it on