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:
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>
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" />
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.
<div id="loginContainer"> </div>
logo-login.gif
.<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 -->
<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 -->
<a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword',array('_nosecret' => true)) ?>"> <?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?> </a>
<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>
<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:
Now, let's customize the login form with CSS. Open the custom.css
file and start customizing all the elements as follows:
/* Login Page */ #login_page { background: url(images/bg.gif) repeat #000; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
#login_page h1 { font-size: 24px; margin: 0; } #login_page h2 { font-size: 14px; font-weight: normal; margin: 0 0 15px; }
#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; }
#loginContainer .login_logo { text-align: center; margin: 20px auto; }
#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; }
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:
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>
3.128.78.30