#jdmad17
Crear plantillas personalizadas para Joomla
Pablo Arias

HOLA! soy...
Pablo Arias
@pablo.arias.ramos
www.pabloarias.eu

Objetivos
» Conocer cómo funciona el sistema de plantillas de Joomla
» Ver las predeterminadas
» Cómo se crea una plantilla a medida desde cero
» Frameworks de terceros

Separación de “poderes”
» Diseño
» Contenido
» Funcionalidad

Gestión de plantillas

Gestión de plantillas

Sistema de plantillas de Joomla
Plantillas diferentes para:
» Parte pública
/templates/
» Panel de administración
/administrator/templates/

Plantillas predeterminadas de Joomla
Protostar
Beez
(System)

Panel administración Protostar

Parte pública Protostar

Panel administración Beez

Parte pública Beez

Crear una plantilla desde cero

Conocimientos recomendados
» Diseño gráfico
» HTML
» CSS
» PHP
» Javascript
No es necesario ser un “artista” en todos.
En muchas ocasiones son diferentes personas.

Ruta de las plantillas
La carpeta que contiene las plantillas de la parte pública:
/public_html/nombre.dominio/templates/nombre_plantilla

Estructura de directorios de una plantilla
» /css
» /html
» /images
» /javascript
» /language
» /scss (o less)

Ficheros en el directorio raíz
» index.php
» component.php
» offline.php
» error.php
» favicon.ico
» templateDetails.xml
» template_preview.png y template_thumbnail.png

Index.php de Protostar

Documentación
Documentación oficial de Joomla:
Introducción a las plantillas de Joomla!
docs.joomla.org/Understanding_Joomla!_templates/es
Crear una plantilla Joomla! básica
docs.joomla.org/Creating_a_basic_Joomla!_template/es
Artículos en la Joomla Magazine de César Vargas-Machuca B
Cómo crear una plantilla front-end para Joomla! desde cero
Está dividido en tres artículos: 1, 2 y 3

Archivos de "reemplazo" (override)
Carpeta html
Sobrescribir vistas de componentes y módulos
Estructura HTML personalizada
Simplemente copiando el archivo original de la vista a nuestra
plantilla

Reemplazo de layouts
Se utilizan por ejemplo en el componente de
contenidos para mostrar:
» Información de artículos
» Imagen principal artículos
» Miga de pan
» Etc.

Frameworks de terceros

Son una base para el desarrollo
VENTAJAS
» Base muy trabajada
» Facilidades que ahorran tiempo
DESVENTAJAS
» Aprendizaje
» Código innecesario

Frameworks de terceros
Frameworks de terceros con plantillas gratuitas para
usar como base para construir una a medida.

Características comunes generales
» Responsive (adaptable a diferentes tamaños de pantalla)
» Sus plantillas usan el framework como base
» Bien documentadas, en general
» Licencia libre: GNU/GPL
» No es necesario mantener logotipo en el frontend pero sí en
el código, la licencia y el autor

Frameworks plantillas
» Gantry 5 (Rockettheme)
» Helix 3 (Joomshaper)
» T3 (Joomlart)
» Warp (Yootheme)
» Y muchos más: Joostrap, Vertex (Shape5), Hallo (Zoodemo), ...

Gantry 5
» Layout builder
» Megamenu
» No basada en Bootstrap
» Utiliza SASS

Layout Gantry
» Arrastrar y soltar
» Anchos con porcentajes
Facilita la gestión de posiciones
para módulos

Web: gantry.org
Necesario descargar componente
y plantilla (Helium)
Plantillas premium RocketTheme:
rockettheme.com
Más información

Helix 3
» Facilita la gestión de
posiciones para módulos
» Basada en Bootstrap 3
» Megamenu
» Utiliza LESS

Panel administración
» Arrastrar y soltar
» Posiciones para módulos
» Crear filas nuevas con 1 clic
» Muchas otras opciones de
configuración

Más información
Web: joomshaper.com/helix
Solo es necesario descargar un paquete pero hace
falta registro (gratuito)
Plantillas premium Joomshaper:
joomshaper.com

T3 Framework
» Control del layout en ficheros
» ThemeMagic
» Megamenu
» Basada en Bootstrap 3
» Utiliza LESS

Panel administración
» ThemeMagic permite edición
visual
» Edición responsive layout

Más información
Web: t3-framework.org
Necesario descargar plugin y plantilla T3, hace falta
registro (gratuito)
Plantillas premium: joomlart.com

Conclusión
Utiliza el método que mejor se adapte a las
características del proyecto y a tus conocimientos.

¡GRACIAS A TODOS!
¿ALGUNA PREGUNTA?
Puedes encontrarme en:
» @pablo.arias.ramos
» www.pabloarias.eu

PATROCINADORES