Styling the ASP.NET login controls

Today, I was handed a piece of HTML which featured a login form. My assignment: create this in Umbraco, using the default Membership provider.

This could be considered as an "Umbraco tip of the week", however this applies to ASP.NET webforms in general as well.

I thought about applying styles and maybe some Javascript hacking to make the login form look exactly like the design. Then, after some searching on the internet, I found out that it is actually extremely easy to apply any layout to your login form.

I started out with this:

<form runat="server">

<asp:Login id="Login1" runat="server" />

</form>

The designer had made some prettier input boxes with background images and the "Login" button was actually style link.

You can actually use something called a LayoutTemplate from
within your login control.

The easiest way to do this is to:

• Open up your master page in Visual Studio
• Go to the designer view Right-click the Login control and choose "Convert to template"
• Start customizing the HTML

However, if you want to do this manually (and who doesn't love some manual tinkering), you have to keep in mind that you need to put at least three controls in your login control:

• An asp:TextBox control* with an ID of: UserName
• An asp:TextBox control* with an ID of: Password
• Either an asp:Button an asp:ImageButton or an asp:LinkButton control with a property: CommandName="Login"

* When I say a TextBox control, I actually mean a web control that implements ITextControl.

If you want to show an error when the login fails, add an asp:Literal with an ID of: FailureText

In the end, you'll end up with a piece of code that looks a bit like this (custom styling removed to keep this nice and short):

<form runat="server">

<asp:Login id="Login1" runat="server">

<LayoutTemplate>

<asp:TextBox ID="UserName" runat="server"></asp:TextBox>

<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>

<asp:LinkButton ID="submitLoginBtn" CommandName="Login" runat="server">Login</asp:LinkButton>

<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>

</LayoutTemplate>

</asp:Login>

</form>

Update: As Dirk and Jan point out, this method will still produce a table surrounding the login controls. This is only a wrapper though, no table element go between the input tags, not to worry.

Dirk is actually working on getting the ASP.NET 2.0 CSS Friendly Control Adapters to work with Umbraco. Mind you, these adapters are available for .NET 2.0 only.

I personally set-up all my Umbraco installations with the .NET 3.5 config, so this method would not work for me. I don't view this as a big problem, I just style the wrapping table and ignore it.