Home Tutoriales Plantillas Template Overrides, personalizando el módulo login

Template Overrides, personalizando el módulo login

Sábado, 19 Junio 2010 | Escrito por Jhon Marreros Guzman

ico overridesDetalles Tutorial - Nivel : Avanzado, Versión Joomla : 1.5.x, Formato : texto y video
Joomla es bastante flexible y nos permite personalizar casi todas las salidas que genera el core. Cuando trabajamos con templates en joomla, podemos sobrescribir de manera sencilla el código html por defecto que generan los componentes y módulos.

 

En el siguiente video se muestra un ejemplo de personalización del módulo login utilizando la técnica de Tempate Overrides de Joomla, se modifica el comportamiento del label de recordarme y se utiliza la sentencia placeholder de HTML5 en los inputs de nombre y clave.

Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados
¿Prefieres ver este video en Screencast?

 

1- Revisando la estructura de un template

Cuando revisamos los archivos que contiene un template, vemos una estructura parecida a la siguiente imagen

img1

El reemplazo de código (overrides) se realiza en la carpeta html, al desplegar la carpeta html vemos que se compone de una serie de subcarpetas y además algunos archivos sueltos, lo que nos interesa, para efectos de este tutorial, son las subcarpetas de módulos y componentes.

 

2- Revisando la salida de código del mod_login del sistema

En el caso de mi template, no figura el mod_login en la carpeta html, por lo que la salida de código que obtengo es del mod_login del sistema. Si deseas probar la salida por defecto del sistema puedes renombrar o mover este módulo temporalmente (en el caso de que este módulo figure en tu template).

El siguiente código es la salida del sistema para el módulo login, podemos ver que los labels e inputs estan separados por un salto de linea (<br/>) y agrupados por una etiqueta de párrafo (<p>); también vemos que los links inferiores se encuentran en una lista (<ul>).

<!--Codigo de salida por defecto para el mod_login-->
<div class="moduletable_login">
<div>
<div>
<h3>
Login
</h3>
<form action="/otros/monitojoomla/index.php" method="post" name="login" id="form-login">
<fieldset class="input">
<p id="form-login-username">
<label for="modlgn_username">
Nombre de usuario
</label>
 <br>
 <input id="modlgn_username" name="username" class="inputbox" alt="username" size="18" type="text">
</p>
<p id="form-login-password">
<label for="modlgn_passwd">
Contraseña
</label>
 <br>
 <input id="modlgn_passwd" name="passwd" class="inputbox" size="18" alt="password" type="password">
</p>
<p id="form-login-remember">
<label for="modlgn_remember">
Recordarme
</label>
 <input id="modlgn_remember" name="remember" class="inputbox" value="yes" alt="Remember Me" type="checkbox">
</p>
 <input name="Submit" class="button" value="Iniciar sesión" type="submit">
</fieldset>
<ul>
<li>
<a href="/otros/monitojoomla/component/user/reset">
¿Olvidó su contraseña?
</a>
</li>
<li>
<a href="/otros/monitojoomla/component/user/remind">
¿Olvido su nombre de usuario?
</a>
</li>
<li>
<a href="/otros/monitojoomla/component/user/register">
Regístrese aquí
</a>
</li>
</ul>
 <input name="option" value="com_user" type="hidden">
 <input name="task" value="login" type="hidden">
 <input name="return" value="L290cm9zL21vbml0b2pvb21sYS8=" type="hidden">
 <input name="920fad14e9ca0bf9e718d9a0049668b4" value="1" type="hidden">
</form>
</div>
</div>
</div>

 

3- Reemplazando la salida del sistema por el mod_login del template beez

Utilizamos el template beez como guia para reemplazar el código mod_login del sistema, para esto buscamos dentro del template beez, la carpeta mod_login (beez/html/mod_login) y la copiamos dentro de la carpeta html de nuestro template

El siguiente código es la salida que nos brinda el mod_login del template beez, las etiquetas label e input se encuentran juntas, los links inferiores se encuentran separados por párrafos (<p>).

<!--Codigo de salida para el mod_login del template beez-->
<div class="moduletable_login">
<div>
<div>
<h3>
Login
</h3>
<form action="/otros/monitojoomla/index.php" method="post" name="login" class="form-login">
<fieldset>
<label for="mod_login_username">
Nombre de usuario
</label>
 <input name="username" id="mod_login_username" class="inputbox" alt="Nombre de usuario" type="text">
<label for="mod_login_password">
Contraseña
</label>
 <input id="mod_login_password" name="passwd" class="inputbox" alt="Contraseña" type="password">
</fieldset>
<label for="mod_login_remember" class="remember">
Recordarme
</label>
 <input name="remember" id="mod_login_remember" class="checkbox" value="yes" alt="Recordarme" type="checkbox">
 <input name="Submit" class="button" value="Inciar sesión" type="submit">
<p>
<a href="/otros/monitojoomla/component/user/reset#content">
¿Olvidó su contraseña?
</a>
</p>
<p>
<a href="/otros/monitojoomla/component/user/remind#content">
¿Olvido su nombre de usuario?
</a>
</p>
<p>
¿Quiere registrarse?
<a href="/otros/monitojoomla/component/user/register#content">
Regístrese aquí
</a>
</p>
 <input name="option" value="com_user" type="hidden">
 <input name="task" value="login" type="hidden">
 <input name="return" value="L290cm9zL21vbml0b2pvb21sYS8jY29udGVudA==" type="hidden">
 <input name="920fad14e9ca0bf9e718d9a0049668b4" value="1" type="hidden">
</form>
</div>
</div>
</div>

 

4- Modificando el archivo fuente default.php del mod_login reemplazado

El siguiente código, (ver líneas 34 a 47 del código total del archivo default.php), muestra el código que modificaremos, archivo default.php del mod_login (mitemplate/html/mod_login/default.php)

<fieldset>
<label for="mod_login_username">
 <?php echo JText::_('Username'); ?>
 </label>
 <input name="username" id="mod_login_username" type="text" class="inputbox" alt="<?php echo JText::_('Username'); ?>" />
 <label for="mod_login_password">
 <?php echo JText::_('Password'); ?>
 </label>
 <input type="password" id="mod_login_password" name="passwd" class="inputbox"  alt="<?php echo JText::_('Password'); ?>" />
 </fieldset>
 <label for="mod_login_remember" class="remember">
 <?php echo JText::_('Remember me'); ?>
 </label>
 <input type="checkbox" name="remember" id="mod_login_remember" class="checkbox" value="yes" alt="<?php echo JText::_('Remember me'); ?>" />

Las modificaciones hechas y que aparecen en el siguiente fragmento de código son:

- Borrar los labels del username y del password

- Utilizar la etiqueta placeholder de HTML5 en los inputs de username y password (en un caso real debería ser complementado con javascript para tener soporte en todos los navegadores)

- Cambiar por una etiqueta span el label de remember

<fieldset>
 <input placeholder=<?php echo JText::_('Username'); ?> name="username" id="mod_login_username" type="text" class="inputbox" alt="<?php echo JText::_('Username'); ?>" />
 <input placeholder=<?php echo JText::_('Password'); ?> type="password" id="mod_login_password" name="passwd" class="inputbox"  alt="<?php echo JText::_('Password'); ?>" />
 </fieldset>
 <span><?php echo JText::_('Remember me'); ?></span>
 <input type="checkbox" name="remember" id="mod_login_remember" class="checkbox" value="yes" alt="<?php echo JText::_('Remember me'); ?>" />

 

5- Salida final

El siguiente código muestra la salida final con las modificaciones hechas al archivo default.php del mod_login de nuestro template, como se puede apreciar en el código, no figura los labels de los inputs nombre y contraseña, y en su lugar se tiene el atributo placeholder con el texto que se tenía en los labels, además figura la etiqueta span en el check de recordarme.

<div class="moduletable_login">
<div>
<div>
<h3>
Login
</h3>
<form action="/otros/monitojoomla/index.php" method="post" name="login" class="form-login">
<fieldset>
 <input placeholder="Nombre" de="" usuario="" name="username" id="mod_login_username" class="inputbox" alt="Nombre de usuario" type="text">
 <input placeholder="Contraseña" id="mod_login_password" name="passwd" class="inputbox" alt="Contraseña" type="password">
</fieldset>
<span>
Recordarme
</span>
 <input name="remember" id="mod_login_remember" class="checkbox" value="yes" alt="Recordarme" type="checkbox">
 <input name="Submit" class="button" value="Inciar sesión" type="submit">
<p>
<a href="/otros/monitojoomla/component/user/reset#content">
¿Olvidó su contraseña?
</a>
</p>
<p>
<a href="/otros/monitojoomla/component/user/remind#content">
¿Olvido su nombre de usuario?
</a>
</p>
<p>
¿Quiere registrarse?
<a href="/otros/monitojoomla/component/user/register#content">
Regístrese aquí
</a>
</p>
 <input name="option" value="com_user" type="hidden">
 <input name="task" value="login" type="hidden">
 <input name="return" value="L290cm9zL21vbml0b2pvb21sYS8jY29udGVudA==" type="hidden">
 <input name="3ca5c175ccb97fcb03f29b60508badf4" value="1" type="hidden">
</form>
</div>
</div>
</div>

 

6- Conclusión

Con un poco de investigación podemos modificar el código de salida por defecto para hacer que nuestros templates se adecuen a nuestras necesidades. En este tutorial se expuso el trabajo con un módulo pero el procedimiento es idéntico para la modificación de un componente.

 

 

Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (13)
  • 01-07-2010 Santiago Argilla
    avatar
    Hola Jhon, exelente VT, para agregar solo que si no quieres copiar otro template debes copiar el archivo default.php dentro de la carpeta tmpl del modulo a modificar y pegarla en una carpeta con el mismo modulo del modulo en la carpeta html de nuestra plantilla.
    Saludos y sigue con estos vy que estan buenisimos!!!.
    Responder
  • 04-08-2010 Joseph Mendoza
    avatar
    Buen tutorial!!
    Responder
  • 18-08-2010 Rodra
    avatar
    Excelente videotutorial en cuanto al templete overrides y a los módulos.

    Con todo esto me ha surgido una duda:
    Como se puede identificar un template overrides de uno template que no lo es?
    Responder
  • 18-08-2010 Jhon Marreros
    avatar
    Template overrides es una técnica que algunos templates utilizan para personalizar el html de salida de modulos y componentes, se puede identificar facilmente, si tu template tiene una carpeta html, en ella veras todos los modulos y componentes que estan utilizando esta técnica para esa plantilla en particular.

    Saludos.
    Responder
  • 03-02-2011 edgardo
    avatar
    bueno yo lo que necesito saber es como llamo a los modulos que estan en la carpeta html desde el index. digamos me interesaria crear un para el frontpage pero no tengo idea como tengo que hacer para que carge ese.
    gracias
    Responder
  • 12-03-2011 Gema
    avatar
    hola, empezando con joomla y viendo tus tutos.
    Como soy novata todavia tengo un poco de lio.
    Ahora estoy comprobando mi template y si que tiene la carpeta html pero dentro no tieme componentes ni modulos, es overrides y si no lo es, como puedo ponerla en overrides.
    Espero que me ayudes, todavia estoy perdidisima.
    Gracias y sigue ayudandonos a los torpes como yo
    Responder
  • 12-03-2011 Jhon Marreros
    avatar
    Hola Gema

    Si tu template tiene la carpeta html vacía entonces no se esta sobreescribiendo ningún módulo o componente, puedes tu realizar esto manualmente y adecuar un módulo o componente a tus necesidades.

    Saludos.
    Responder
  • 13-03-2011 Gema
    avatar
    Gracias por tu rapida respuesta.
    quisiera saber como puedo modificar el editor, pues quiero que la persona que se conecte como registrado pueda dejar un anuncio, en el tendria que identificar su su provincia, supongo que automaticamente se colocaria en la categoria de la provincia que seleccione, y que pueda poner el anuncio simplemente.
    ahora el que tengo me aparecen tres cuadros, editor, en el que selecciona la categoria y si se publica o no el anuncio y otro que es de metadatos.
    eso no quiero que lo hagan ellos.
    espero haberme explicado y entender tu explicacion, pues comote he dicho soy novata, muy novata.
    gracias por tu tiempo ayudandonos.
    Responder
  • 12-05-2011 Emilio
    avatar
    Hola, Jhon, perdona puse el comentario en otro de tus tutoriales, creo que este es su sitio.

    El tutorial me ha venido de perlas, pero tengo una duda...

    Y si lo que queremos modificar es: .Presentación predeterminada de acceso a la cuenta de usuario.

    No se a que modulo o archivo ir para modificar el estilo grafico, de este tipo de acceso.
    Responder
  • 12-05-2011 Emilio
    avatar
    Ya encontré la respuesta, com_user, es la carpeta o modulo donde estan los archivos que si modificas afectan al apartado Joomla de Login, introducido en: Presentación predeterminada de acceso a la cuenta de usuario.

    Responder
  • 12-05-2011 Emilio
    avatar
    Hola jhon, encontre la manera de resolver y modificar un poco: Presentación predeterminada de acceso a la cuenta de usuario, en COM_user, usando la funcion overwrite de template

    Pero al intentar modificar, y añadir codigo aplicando lo que haces en el tutorial, el scrpt java no se ejecuta.

    La pregunta es: ¿que hago mal? xD muchas cosas seguramente.

    El formulario queda como yo quiero, de aspecto y es funcional, asi que no me he cargado nada grave.

    Ahora la funcion del escrpt para ocultarlo y mostrarlo me veo incapaz de que funcione.

    Responder
  • 02-06-2011 Emilio
    avatar
    Después de varios días, dandole a la cabeza....

    He querido unir dos de tus tutoriales: Template Overrides, personalizando el módulo login y Mejorar la página de sitio offline de joomla, para conseguir mejorar el COM_USER, default_login.php. haciendo el formulario de esta pagina mas agradable y ocultable mediante un pequeño texto, como en el tutorial offline.php

    Al final me he metido en un lio gordo, teniendo que tocar 2 archivos más para que todo funcione, Template.css, en la carpeta del template CSS. y script.js en la carpeta raiz del template que uso.

    Ya que el archivo default_login.php, no me cargaba ni el script de ocultar y los css correctamente. se ve que el Head dependia de Index.php y si no cargaba ahi los scripts de java no funcionaba. (aun sigue sin funcionar)

    He suprimido el codigo CSS que en principio añadi al archivo default_login.php, poniendolo en la cola del archivo template.css, asi mejoro el aspecto y optimizo el...
    Responder
  • 02-06-2011 Emilio
    avatar
    En fin despues de poner todo ahi veo que se me ha comido medio mensaje. como puedo ponerme en contacto ?
    Responder
Escribir comentario
Gravatar enabled