There are many ways to go about creating a single page login. There are also many different styles that you can use when creating these logins. Before you start it is a good idea to have a good idea of what you are creating, this way you can always use it as a template in case things start to go wrong.
The design I would like to create is going to consist of the title of the site, a quick description and the forum to login with. For this tutorial I will be creating the login so it will look similar to WordPress’ login screen except it will be off center and there will be no header. These types of login pages are great if the login information is in its own folder or you have a site that requires users to login prior to seeing any of the information.
The first step to creating a login that looks good knowing where the content will be placed. Because I plan on having my content in the middle area of the screen I am going to have to rely on percent based margin properties. After I get all of the padding and margin properties sorted out It will then be time to create a functional and easily useable text.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Login || Code With Design</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
</head><body>
<div id=”container”>
<div id=”mainContent”>
</div>
</div>
</body>
</html>
By using the code above you will create the base structure for the design. It contains all of the div tags required to line this all up later with the CSS file. Now all we need to do is create a functioning form that users can enter their password and username.
<h1>Code With Design</h1>
<form id=”form1″ name=”form1″ method=”post” action=”somepage.php”>
<table width=”375″>
<tr>
<td width=”142″><label>
<div align=”right”>Username:</div>
</label></td>
<td width=”162″><input type=”text” name=”username” id=”username” /></td>
<td width=”55″> </td>
</tr>
<tr>
<td><label>
<div align=”right”>Password:</div>
</label></td>
<td><input type=”password” name=”password” id=”password” /></td>
<td><input type=”submit” name=”login” id=”login” value=”Login” /></td>
</tr>
</table>
<h5><a href=”somelink.php”>Lost your password?</a></h5>
<label></label>
</form>
If you read over the information above you will notice that the information in the tables has been moved around with the tables and not with the CSS sheet. Whatever method you use is up to you, Normally its safer to go with the CSS method but at the time of creating this login I wanted to keep the CSS clean for creating more login pages.
@charset “utf-8″;
body {
font: 100% Plantagenet Cherokee;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
body a {
text-decoration:none;
color:#333333;
}
body a:hover {
text-decoration:none;
color:#666666;
}
.oneColElsCtr #container {
width: 100%;
margin: 0 auto;
text-align: left;
}
.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent h1 {
background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}
Now we are going to go through the CSS file that was entered above. The body is pretty standard here and doesn’t have a whole lot to do with the placement of the login container. The placement of the login container is built up within the one column elastic container main content. If you look at the code you will see that there is padding so the information is not touching the outside of the div. There is also a lot of margins created here and as mentioned above its measurement is percent based. This will help the login div stay within the central areas of the page. There is also a set width, this is so the div doesn’t extend all the way to the right.
.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
The next thing on the page that you will notice is how the content is wrapped in a round border. This is because of the following code. It is a simple way to make the content rounded inside of your browser. It is also possible to make a border with this style method, however the look of this login is flat so a boarder is not going to be needed.
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
The third and final thing that you will notice is how the login box contains the same font as the rest of the page and the button does not look like a normal forum button. This is because of the following code in the CSS file.
.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}
It forces the input properties within the MainContent to have a background that matches that of the rest of the page and also creates square borders around the button and input text lines.
Here are the final results
Caleb Jonasson
Related posts:
