Magento Admin: Personalizar el acceso a Magento
28

oct

 

Magento Admin: Personalizar el acceso a Magento

Magento Admin: Nuevo diseño del acceso a Magento admin.

Como administradores de tiendas online en Magento, una de las zonas que estamos obligados a ver día tras día es el acceso al panel de Magento admin. Si, efectivamente, me refiero a esta panel de acceso que much@s ya tendréis mas que visto:

Magento admin diseño predefinido

 

Como medida de seguridad, Magento ofrece la posibilidad de cambiar la ruta de que da acceso al formulario de registro al panel de Magento admin desde las opciones de administrador. En esta entrada, veremos como podemos personalizar d una forma sencilla el estilo del formulario de acceso a nuestro Magento admin.

Magento admin: La diferencia está en los detalles.

Una forma sencilla de aportar un toque distintivo de calidad  a nuestros proyectos puede ser personalizar este acceso al panel de administración de nuestra tienda online Magento. Aportar un acceso personalizado al panel de Magento admin, es una tarea sencilla, que nos llevará muy poco tiempo y en la que podemos dejar nuestro sello de calidad como empresa ó desarollador de soluciones de comercio electrónico. En esta entrada, veremos como dejar atrás el panel por defecto de acceso a Magento e integrar el siguiente panel de acceso a nuestro Magento admin:

Magento admin personalizado

Como veis, funcionalmente logramos el mismo efecto. Sin embargo, nuestro cliente verá que como empresa le estamos aportando un toque mas de calidad y personalización. Si quisiéramos ir todavía mas lejos, podríamos inclusive personalizar el diseño de nuestro panel de Magento admin en si. La entrada de este blog, no tiene como finalidad cubrir toda esta funcionalidad. Sin embargo, si estáis interesados en ello aquí podéis ver de una forma my sencilla como actualizar el estilo de nuestro Magento admin con el tema empleado en Magento Go.

Magento admin: ¿Que ficheros debo tener presente?

En nuestro caso, no nos vamos a centrar en modificar todo nuestro panel de Magento admin. Únicamente nos vamos a centrar en integrar un nuevo diseño al formulario de Magento admin. Por lo tanto, haremos uso del tema default. El fichero a modificar para personalizar nuestro formulario de Magento admin es login.phtml. Debemos dirigirnos a la ruta que se muestran en la siguiente imagen y buscar el fichero correspondiente:

app/design/adminhtml/default/default/template/login.phtml

Magento admin login

 

El código que emplearemos para personalizar nuestro Magento admin es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php echo Mage::helper('adminhtml')->__('Magento Admin Login') ?></title>
    <link type="text/css" rel="stylesheet" href="<?php echo $this->getSkinUrl('custom.css') ?>" media="all" />
</head>

<body id="login_pagina_personalizada">
    <div id="login_contenedor_ppal_personaliz">
        <!-- Logo + Mensajes -->
        <div  class="login_logo">
            <img src="<?php echo $this->getSkinUrl('../../default/default/images/especialistaenmagento.jpg') ?>" alt="<?php echo Mage::helper('adminhtml')->__('Log into Magento Admin Page') ?>">
            <!-- Magento admin: Cargo los mensajes para mostrar avisos del tipo invalida user or password -->
            <div id="messages"> <?php echo $this->getMessagesBlock()->getGroupedHtml() ?> </div>
        </div>
        <!-- Formulario -->
        <div class="login_form_personalizada">
            <form method="post" action="" id="loginPersonalizado">
                <div class="intro_form">
                    <h1><?php echo Mage::helper('adminhtml')->__('Magento Admin Panel Access') ?></h1>
                </div>
                <div class="data_form_personalizada">
                    <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-passowrd" name="login[password]" placeholder="<?php echo Mage::helper('adminhtml')->__('Password:') ?>" required>
                </div>
                <button type="submit" id="login-btn" class="btn_login_personalizada"><?php echo Mage::helper('adminhtml')->__('LOGIN') ?></button>
            </form>
        </div>
    <!-- Magento Admin: Enlace a recuperar password de admin. este ya tiene el diseño standar de magento admin -->
    <a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword', array('_nosecret' => true)) ?>"><?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?></a>
    </div>

    <script type="text/javascript">
        var loginForm = new varienForm('loginPersonalizado');
    </script>
</body>
</html>

Como veis es muy sencillo, a grandes rasgos el cuerpo principal se basa en un simple formulario donde enviamos los parámetros nombre de usuario y password. Ahora bien, si una vez actualizado el fichero login.phtml con el código expuesto cargáis al ruta de acceso, os encontrareis con un formulario de acceso a Magento admin que si bien es totalmente funcional dista mucho de parecerse a la imagen de Magento admin que nos habíamos planteado.

Magento admin: ¿Dando un toque de distinción al acceso de Magento admin por css ?

Si nos fijamos en la cabecera del fichero login-php que terminamos de actualizar en ella asignamos el tittle a nuestra página y cargamos la hoja de estilos custom.css

    <title><?php echo Mage::helper('adminhtml')->__('Magento Admin Login') ?></title>
    <link type="text/css" rel="stylesheet" href="<?php echo $this->getSkinUrl('custom.css') ?>" media="all" />

Custom.css será la hoja de estilos que personalizaremos para dar el aspecto deseado a nuestro formulario de Magento admin.

Magento admin estilos

El contenido de nuestro custom.css para peronslizar el acceso a Magento admin es el siguiente:

    #login_pagina_personalizada {
 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

#login_pagina_personalizada h1 {
 font-size: 24px;
 margin: 0 0 15px 0;
 color: black;
}

#login_contenedor_ppal_personaliz {
 -moz-border-radius: 30px;
 -webkit-border-radius: 30px;
 border-radius: 30px;
 -moz-box-shadow: 7px 7px 47px 7px rgba(0,0,0,0.5);
 -webkit-box-shadow: 7px 7px 47px 7px rgba(0,0,0,0.5);
 box-shadow: 7px 7px 47px 7px rgba(0,0,0,0.5);
 background-color: #FFFFFF;
 margin: 40px auto 20px;
 padding: 10px 20px 20px;
 text-align: center;
 width: 550px;
}
#login_contenedor_ppal_personaliz .login_logo {
 text-align: center;
 margin: 20px auto;
}
#login_contenedor_ppal_personaliz .login_form_personalizada {
 background: none repeat scroll 0 0 #DDDDDD;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color: #FFFFFF;
 display: block;
 margin-bottom: 20px;
 padding: 20px;
}
#login_contenedor_ppal_personaliz a {
 text-align: center;
 color: black;
 font-size: 16px;
}
#login_contenedor_ppal_personaliz .login_form_personalizada .form-title {
 color: #fff;
 text-align: center;
}
#login_contenedor_ppal_personaliz .login_form_personalizada input {
 border: 0 none;
 display: block;
 margin: 35px;
 padding: 20px;
 width: 400px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}
#login_contenedor_ppal_personaliz .login_form_personalizada .btn_login_personalizada {
 background: none repeat scroll 0 0 #000000;
 color: #FFFFFF;
 cursor: pointer;
 font-weight: bold;
 line-height: 50px;
 width: 50%;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
}

#login_contenedor_ppal_personaliz .messages {
 background: none repeat scroll 0 0 #FFFFFF;
 border: 1px solid red;
 color: red;
 font-size: 15px;
 padding: 5px;
 font-weight: bold;
 text-transform: uppercase;
 text-align: center;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}
#login_contenedor_ppal_personaliz .messages li {
 list-style-type: none;
}

Con estos pocos estilos cargados, si procedemos a recargar la ruta de acceso a nuestro Magento adminvisualizaremos ya el nuevo formulario de acceso tal y como lo vimos en la captura de imagen anterior.

Magento admin: Conclusiones

Como podéis ver, personalizar el acceso a Magento admin con un nuevo formulario de acceso es una tarea muy sencilla que aporta un toque de distinción a nuestros proyectos. Si implementáis la información del formulario de acceso de Magento admin daos cuenta que el acceso al formulario de recuperación del password sigue teniendo el aspecto estándar. Si también queréis modificarlo el proceso es muy similar. Tan solo comentar que el fichero en el que debemos de focalizar nuestros esfuerzos es en esta caso  forgotpassword.phtml.

 

Resumen
Nombre
Magento Admin: Personalizar el acceso a Magento
Autor
Descripción
Magento Admin: Personaliza el acceso a tu Magento admin. Da un cambio de estilo al acceso de tu Magento admin y ofrece un toque distintivo a tu ecommerce.
The following two tabs change content below.
Especialista en Magento y servicios ecommerce: Consultoría ecommerce, Optimización Magento, Desarrollo Magento, Integración Magento ERP y Posicionamiento SEO Magento.


Deja un comentario
 

Tu email no será publicado. Campos obligatorios . *