En los tiempos que corren la personalización es algo a tener en cuenta para poder destacar de nuestra competencia. Un aspecto diferenciador que transmite algo sobre nosotros.

En este sentido Joomla viene bien preparado para poder marcar esta diferenciación, tanto en la parte de Front (a través de plantillas o templates) como en la parte de Back (o panel de administración).

En este artículo vamos a ver cómo personalizar la parte de Back, tan olvidada muchas veces, pero que puede marcar la diferencia a la hora de que un cliente se encuentre "más a gusto" en su sitio web.

Plantillas de administración

Por defecto, Joomla viene con 2 plantillas de Back: Hathor e Isis; siendo esta última la que viene como predeterminada.

(para poder verlas hay que usar el primero de los filtros)

Para poder modificar los estilos (colores) y el logo que vienen por defecto, es decir, los de Joomla, tienes que entrar en ella e ir a la pestaña que pone "Avanzado".

Como puedes observar, tienes varios campos para los colores, los de logotipo y algunas configuraciones más.

Vamos a suponer que la empresa/negocio/particular para el que estás desarrollando su sitio web tiene una gama de colores corporativos en tonalidades verdes y el siguiente logotipo:

Para que se sienta cómodo ("como en su casa") cuando acceda a la parte de administración de su web le gustará ver estos elementos.

Así que... manos a la obra y a modificar estos campos de configuración.

Una vez has realizado estos cambios, guarda y podrás ver el resultado.

Pasarás de esto:

A esto:

Un simple cambio que siempre queda bien y genera confianza en los clientes.

Hay que tener en cuenta que no solo se cambia la página de acceso sino que también se modifican las internas.

¿Se pueden modificar o añadir estilos a la plantilla?

Sí, se puede.

Y además, de forma que no se eliminen los cambios con las actualizaciones de Joomla.

La forma correcta de hacerlo es crear un archivo de estilos llamado custom.css dentro de administrator/templates/isis/css/

En este fichero podrás añadir y/o modificar los estilos que necesites para adaptar el template de Back a tus propósitos.

Por ejemplo, para modificar el color primario de los botones, podrías poner el siguiente código:

.btn-primary { background-color: #65792C; background-image: linear-gradient(to bottom, #9CB341, #65792C); background-repeat: repeat-x; border-color: #65792C #65792C #9CB341; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-primary:hover{ background-color: #65792C; }

En este ejemplo se están usando los mismos colores que los utilizados en la personalización anterior.

El resultado lo puedes ver a continuación:

¿Y algún cambio más?

Pues sí.

Puedes modificar más cosas a través de extensiones (generalmente módulos) para adaptarla a las necesidades y hacer el sitio más fácil de utilizar para tu cliente. Pero… de estas extensiones de parte de Back hablaremos en otro artículo.

Espero que te haya resultado de interés este pequeño tutorial de personalización del panel de administración.

Un cambio que no te lleva apenas tiempo y que genera mucha confianza.