An important section that needs tuning is the admin login form. The default login form, shown in the following section, remembers the style of the Magento admin and replicates it to some degree:
But now that we have customized it, we are going to see how to customize the admin access page with a custom logo and a custom design.
The login file is login.phmtl, placed under app/design/adminhtml/default/ default/template/.
If you take a look at the code of the login.phtml file, you can see that its structure is a full HTML document and we have full control of the login page. This means that you can totally customize it, creating your own custom structure. The final result that we are going to reach is shown in the following screenshot, and we will use a custom code structure to make it unique:
1. Creating the custom login.phtml file
To create your custom login file, create the login.phtml file in your theme admin folder under app/design/adminhtml/default/bookstore/template.
We start by creating a basic HTML5 structure using the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset= “utf-8”>
<title><?php echo Mage::helper(‘adminhtml’)-> ( ‘Bookstore Admin Login’) ?>
</title>
<!–[if IE]>
<script src= “http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>
</head>
<body id=”login_page”>
…
</body>
</html>
Note: As you can see, inside the <head> tag, we inserted a conditional script for Internet Explorer to make it HTML5 ready.
To insert our CSS modifications, we need to call the custom.css file. This can be done by adding the following code inside the <head> tag, which will take the CSS from the custom adminhtml skin folder:
<link type= “text/css” rel= “stylesheet” href= “<?php echo $this-
>getSkinUrl(‘../../default/bookstore/custom.css’) ?>” media= “all” />
2. Creating the login form
Now, let’s create the HTML file of the form container that will include the form with the input, the button to sign in, and the link to retrieve the password.
- First, we create a container that will include all the elements:
<div id=”loginContainer”>
</div>
- Then, create a logo image named logo-login.gif.
- Inside the <div id=”loginContainer”> tag, create the logo box within the logo image as follows:
<div class= “login_logo”>
<img src= “<?php echo $this->getSkinUrl(‘../../default/ bookstore/images/logo-login.gif’) ?>” alt= “<?php echo Mage::helper(‘adminhtml’)-> (‘Log into Magento Admin Page’) ?>”>
</div>
<!– /.login_logo –>
- Then, let’s create the form with all the elements using the following code:
<div class= “login_form”>
<form method= “post” action= “” id= “loginForm”>
<div class= “form-title”>
<h1>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Welcome to the login panel’) ?>
</h1>
<h2>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Log into Magento Admin Page’) ?>
</h2>
</div>
<!– /.form-title –>
<div class= “input-container”>
<input type= “text”
class= “form-control” id=”login-username”
name= “login[username]” placeholder= “
<?php echo Mage::helper(‘adminhtml’)-> ( ‘User Name:’) ?>” required>
<input type= “password” class= “form-control”
id= “login-password” name= “login[password]”
placeholder= “
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Password:’) ?>” required>
</div>
<!– /.input-container –>
<button type= “submit”
id= “login-btn” class= “btn-login”>
<?php echo Mage::helper(‘adminhtml’)-> (‘Login’) ?> »
</button>
</form>
</div>
<!– /.login_form –>
Note: As you can see in the preceding code, we added the required attribute to the input to avoid a blank form submission.
- After the form, insert the link to retrieve the password using the following code:
<a href= “
<?php echo Mage::helper(‘adminhtml’)->getUrl( ‘adminhtml/index/forgotpassword’,
array(‘_nosecret’ => true)) ?>”>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Forgot your password?’) ?>
</a>
Note: We will later see how to customize the Forgot Password page as well.
- Now, at the very bottom of the page, outside <div id=”loginContainer”>, we will add a custom link to go back to the frontend using the following code:
<a href= “
<?php echo $this->getBaseUrl() ?>” class= “link-frontend”>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘« Back to the store’) ?>
</a>
- Finally, the script that will make the form work is given as follows:
<script type= “text/javascript”>
var loginForm = new varienForm(‘loginForm’);
</script>
Done. The HTML code for the custom login page is finished. But if you refresh the page, we will have a blank form, shown in the following screenshot:
3. Styling the login form
Now, let’s customize the login form with CSS. Open the custom.css file and start customizing all the elements as follows:
- Let’s begin with the background and styles of the page; use the following code:
/* Login Page */
#login_page {
background: url(images/bg.gif) repeat #000;
font-family: ‘Open Sans’, Arial, Helvetica, sans-serif;
}
- Then add simple customization for the heading titles using the following code:
#login_page h1 {
font-size: 24px; margin: 0;
}
#login_page h2 {
font-size: 14px;
font-weight: normal;
margin: 0 0 15px;
}
- We will now customize the login container, styling it with CSS3 features such as a border radius and box shadow using the following code:
#loginContainer {
/* Border Radius */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* Box Shadow */
-moz-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
-webkit-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
background-color: #FFFFFF;
border-radius: 3px;
box-shadow: 0 0 47px 4px rgba(0, 0, 0, 0.24);
margin: 100px auto 20px;
padding: 10px 20px 20px;
text-align: center;
width: 460px;
}
- Customize the logo at the top a little bit, positioning it at the center, just above the form, using the following code:
#loginContainer .login_logo {
text-align: center;
margin: 20px auto;
}
- Finally, customize the login form and all the elements inside it using the following code:
#loginContainer .login_form {
background: none repeat scroll 0 0 #F69235;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #FFFFFF; display: block;
margin-bottom: 15px;
padding: 20px;
}
#loginContainer .login_form .form-title {
color: #fff;
text-align: center;
}
#loginContainer .login_form input {
border: 0 none;
display: block;
margin-bottom: 20px;
padding: 10px;
width: 410px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#loginContainer .login_form .btn-login {
background: none repeat scroll 0 0 #333;
border: 0 none;
clear: both;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 50px;
width: 100%;
}
#loginContainer .login_form .btn-login:hover {
background: #000;
}
And in the end, style the link at the bottom
#loginContainer a {
text-align: center;
color: #fb903d;
font-size: 12px;
}
#login_page .link-frontend {
color: #888888;
display: block;
font-size: 14px;
margin: 0 auto;
padding: 10px;
text-align: center;
text-decoration: none;
}
- Refresh the page and the login page should now look like the following screenshot:
4. Adding the alert message if the data is incorrect
If a user inserts a wrong combination of username and password, the system returns an alert message. To make it appear in our custom form, you can insert the following code just after the code for the logo image:
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
You can style the preceding code with CSS using the following code:
#loginContainer .messages {
background: none repeat scroll 0 0 #FFEBDA;
border: 1px solid #FF7C0A;
color: #DD6700;
font-size: 15px;
list-style-type: none;
margin: 0 0 10px;
padding: 10px;
text-transform: uppercase;
}
#loginContainer .messages li {
list-style-type: none;
}
Now try to insert a wrong password, and the following message will appear:
5. A quick recap of the complete form.phtml file
The final code of the custom login page is as follows. Note that this structure is very important for the next topic:
<!DOCTYPE html>
<html lang= “en”>
<head>
<meta charset=”utf-8″>
<title>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Log into Magento Admin Page’) ?>
</title>
<link type= “text/css” rel= “stylesheet” href= “<?php echo $this->getSkinUrl(
‘../../default/bookstore/custom.css’) ?>”
media= “all” />
<!–[if IE]>
script src= “http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>
</head>
<body id= “login_page”>
<div id= “loginContainer”>
<div class=”login_logo”>
<img src=”<?php echo $this->getSkinUrl( ‘../../default/bookstore/images/logo-login.gif’) ?>” alt=”<?php echo Mage::helper(‘adminhtml’)-> (
‘Log into Magento Admin Page’) ?>”>
<div id=”messages”>
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
</div>
</div>
<div class=”login_form”>
<form method= “post” action= “” id= “loginForm”>
<div class= “form-title”>
<h1>Welcome to the login panel</h1>
<h2>Please sign in to access</h2>
</div>
<div class= “input-container”>
<input type= “text”
class= “form-control” id= “login-username”
name= “login[username]”
placeholder= “
<?php echo Mage::helper(‘adminhtml’)-> ( ‘User Name:’) ?>” required>
<input type= “password” class= “form-control”
id= “login-password” name= “login[password]”
placeholder= “<?php echo Mage::helper( ‘adminhtml’)-> (‘Password:’) ?>” required>
</div>
<button type= “submit”
id= “login-btn” class= “btn-login”>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Login’) ?> »
</button>
<a href=”
<?php echo Mage::helper(‘adminhtml’)->getUrl( ‘adminhtml/index/forgotpassword’, array(
‘_nosecret’ => true)) ?>”>
<?php echo Mage::helper(‘adminhtml’)-> ( ‘Forgot your password?’) ?>
</a>
</form>
</div>
</div>
<a href= “
<?php echo $this->getBaseUrl() ?>”
class=”link-frontend”> « Back to Frontend
</a>
<script type=”text/javascript”>
var loginForm = new varienForm(‘loginForm’);
</script>
</body>
</html>
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.