The ASP.NET membership Login control provides several properties you can use to manage its appearance. For example you can use the different style settings supported by the Login control as follows:
<form id=”form1″ runat=”server”>
<div align=”center”>
<asp:Login ID=”LoginCtrl” runat=”server” BorderColor=”Blue” BorderStyle=”Solid” BorderWidth=”1px”
Font-Bold=”True” Font-Names=”Arial Narrow” Font-Size=”Medium” TextLayout=”TextOnTop”
OnAuthenticate=”LoginCtrl_Authenticate”>
<LoginButtonStyle BackColor=”Silver” ForeColor=”Black” />
<TextBoxStyle BackColor=”LightCyan” ForeColor=”Black” Font-Bold=”true” />
<TitleTextStyle Font-Bold=”true” Font-Names=”Arial Narrow” BackColor=”Blue” ForeColor=”White”
HorizontalAlign=”Center” />
</asp:Login>
</div>
</form>
You can also use CSS classes for customizing the Login control’s appearance, because every style property supported by the Login control includes a CssClass property. You can set a CSS class name for your Login control that was added to the website previously. For example you added the following CSS stylesheet with the filename MyStyles.css to your project:
.MyLoginTextBoxStyle
{
cursor: crosshair;
background-color: yellow;
text-align: center;
border-left-color: black;
border-bottom-color: black;
border-top-style: dotted;
border-top-color: black;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: black;
border-bottom-style: dotted;
font-family: Verdana;
vertical-align: middle;
}
The content of the CSS file defines the style .MyLoginTextBoxStyle and you can use it for the text boxes displayed on your Login control. You can include this style file in your login page so that you can use the style for the Login control as follows:
<html xmlns=”https://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Your Login Page</title>
<link href=”MyStyles.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<div style=”text-align: center”>
<asp:Login ID=” LoginCtrl” runat=”server”
BackColor=”aliceblue”
BorderColor=”Black” BorderStyle=”double”>
<LoginButtonStyle BackColor=”darkblue” ForeColor=”White” />
<TextBoxStyle CssClass=”MyLoginTextBoxStyle” />
<TitleTextStyle Font-Italic=”true” Font-Bold=”true”
Font-Names=”Arial” />
</asp:Login>
</div>
</form>
</body>
</html>
The next table lists the styles supported by the Login control. Every style works in the same way. You can set color and font properties directly, or you use the CssClass property for assigning a CSS class.
| Style | Description |
| CheckBoxStyle | Defines the style properties for the Remember Me check box. |
| FailureTextStyle | Defines the style for the text displayed if the login was not successful. |
| HyperLinkStyle |
The Login control allows you to define several types of hyperlinks (for example to a registration page) and this style defines the appearance of these hyperlinks. |
| InstructionTextStyle |
The Login control allows you to specify help text that is displayed directly in the Login control. This style defines the appearance of this text. |
| LabelStyle | Defines the style for the UserName and Password labels. |
| LoginButtonStyle | Defines the style for the login button. |
| TextBoxStyle | Defines the style for the User Name and Password text boxes. |
| TitleTextStyle | Defines a style for the title text of the Login control. |
| ValidatorTextStyle |
Defines styles for validation controls that are used for validating the user name and password. |