In this article we will see how to style asp .net login control using custom CSS
and HTML. Some days back I have written an article about
how to style Gridview and pager with custom CSS. I receives many
requests about any article about how to style asp .net Login control with custom
CSS and HTML . So I decided to write article about styling Login control with custom
CSS and HTML.
Most of the time developers
receives website designs built by web designers or they download website designs
from internet. Some asp .net developers might find hard to integrate Login control
with the provided theme but it is very easy to integrate pre build Login control
with any HTML, HTML5 or CSS3 Theme.
For this article I will use Login control created by Ian Quinn from CSSDeck. You can find HTML, CSS used in this
article from
here. Our final output will be as:
Step1: Create a new asp .net website or open
existing asp .net website.
Step2: Add a new Style-sheet file. I have named
it StyleSheet.css .
Step3: Copy following CSS in your style sheet
file.
body{
background:#161616;
color:#888;
font-family: 'Ubuntu Mono', sans-serif;
text-transform:uppercase;
}
.box{
width:90%;
max-width:450px;
height:auto;
margin:0 auto;
margin-top:100px;
background:#222;
border-radius:7px;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.9);
}
.content{
width:85%;
height:auto;
position:;
margin:0 auto;
padding:30px 0px;
background:;
text-align:center;
}
.content h1{
font-size: 24px;
font-weight:400;
color:#FFBF00;
letter-spacing:0.125em;
text-align:center;
}
.field{
width:100%;
margin:10px auto;
padding:10px;
background:#2c2c2c;
border:none;
box-shadow: 0px 1px 0px 0px #111;
border-radius:3px;
outline:none;
color:#FFBF00;
font-weight:700;
letter-spacing:0.125em;
text-align:center;
text-transform:uppercase;
}
::-webkit-input-placeholder{
color:#5A5A5A;
}
:-moz-placeholder{
color:#5A5A5A;
}
::-moz-placeholder{
color:#5A5A5A;
}
:-ms-input-placeholder{
color:#5A5A5A;
}
.btn{
width:100%;
margin:10px auto;
padding:10px;
background:#161616;
border:none;
box-shadow: 0px 1px 0px 0px #111;
border-radius:3px;
outline:none;
color:#FFBF00;
font-weight:700;
letter-spacing:0.125em;
text-align:center;
text-transform:uppercase;
}
.btn:hover{
background:#FFBF00;
color:#333;
}
.btn:active{
background:#FACC2E;
color:#333;
}
|
Step4: Add a new Login page in your website and insert asp .net
Login control. After inserting Login control you will see following HTML.
<asp:login id="Login1" runat="server">
</asp:login>
|
Step5: Go do designer and click small icon situated
at right top corner of login control and click "Convert to Template" option.
When you click this option your login control will convert into HTML and will
look like this:
<asp:login id="Login1" runat="server">
<layouttemplate>
<table cellpadding="1" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td>
<table cellpadding="0">
<tbody>
<tr>
<td align="center" colspan="2">
Log In
</td>
</tr>
<tr>
<td align="right">
<asp:label id="UserNameLabel" runat="server" associatedcontrolid="UserName">User Name:</asp:label>
</td>
<td>
<asp:textbox id="UserName" runat="server"></asp:textbox>
<asp:requiredfieldvalidator id="UserNameRequired" runat="server" controltovalidate="UserName" errormessage="User Name is required." tooltip="User Name is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td align="right">
<asp:label id="PasswordLabel" runat="server" associatedcontrolid="Password">Password:</asp:label>
</td>
<td>
<asp:textbox id="Password" runat="server" textmode="Password"></asp:textbox>
<asp:requiredfieldvalidator id="PasswordRequired" runat="server" controltovalidate="Password" errormessage="Password is required." tooltip="Password is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:checkbox id="RememberMe" runat="server" text="Remember me next time."></asp:checkbox>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color: Red;">
<asp:literal id="FailureText" runat="server" enableviewstate="False"></asp:literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:button id="LoginButton" runat="server" commandname="Login" text="Log In" validationgroup="Login1">
</asp:button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</layouttemplate>
</asp:login>
|
Step6: Remove extra HTML.
We do not need all the HTML generated by the Login control so we will remove extra
code. Remove all the HTML excepts Textboxes, Validators, Login Button and Literal
control. After removing unnecessary HTML only these control should left in your
page:
<asp:login id="Login2" runat="server">
<layouttemplate>
<asp:textbox id="UserName" runat="server"></asp:textbox>
<asp:requiredfieldvalidator id="UserNameRequired" runat="server" controltovalidate="UserName" errormessage="User Name is required." tooltip="User Name is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
<asp:textbox id="Password" runat="server" textmode="Password"></asp:textbox>
<asp:requiredfieldvalidator id="PasswordRequired" runat="server" controltovalidate="Password" errormessage="Password is required." tooltip="Password is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
<asp:literal id="FailureText" runat="server" enableviewstate="False"></asp:literal>
</layouttemplate>
</asp:login>
|
Step7: Copy HTML from the template and paste
in your page:
<div class="box">
<div class="content">
<h1>
Authentication Required</h1>
<input class="field" type="text" name="user" placeholder="Operative ID"><br>
<input class="field" type="password" name="pass" placeholder="Access Code"><br>
<input class="btn" type="submit" value="Validate">
</div>
</div>
|
Step8: Replace textboxes and Buttons with the
input controls present in the Login template and apply CSS classes, Placeholder
tag as applied to input controls in the template. Now your HTML will look like this.
<asp:login id="Login1" runat="server" style="width: 100%;">
<layouttemplate>
<div class="box">
<div class="content">
<h1>
Authentication Required</h1>
<asp:textbox class="field" placeholder="Operative ID" id="UserName" runat="server"></asp:textbox>
<asp:requiredfieldvalidator id="UserNameRequired" runat="server" controltovalidate="UserName" errormessage="User Name is required." tooltip="User Name is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
<br>
<asp:textbox class="field" placeholder="Access Code" id="Password" runat="server" textmode="Password"></asp:textbox>
<asp:requiredfieldvalidator id="PasswordRequired" runat="server" controltovalidate="Password" errormessage="Password is required." tooltip="Password is required." validationgroup="Login1">*</asp:requiredfieldvalidator>
<br>
<asp:button class="btn" id="LoginButton" runat="server" commandname="Login" text="Log In" validationgroup="Login1"></asp:button>
<br>
<asp:literal id="FailureText" runat="server" enableviewstate="False"></asp:literal></div>
</div>
</layouttemplate>
</asp:login>
|
Step9: Add reference of css file into login page.
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
|
Once again thanks to
Ian Quinn for this awesome login design.
Final Output
