Vamos a conocer cómo funciona el sistema de plantillas de Joomla así como ver las posibilidades para crear una plantilla personalizada. Ya sea desde cero o utilizando frameworks de los principales proveedores de plantillas (Helix, Gantry y T3) para construir el aspecto web deseado.

1. #jdmad17
Crear plantillas personalizadas para Joomla
Pablo Arias

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

3. 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

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

5. Gestión de plantillas

6. Gestión de plantillas

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

8. Plantillas predeterminadas de Joomla
Protostar
Beez
(System)

9. Panel administración Protostar

11. Parte pública Protostar

13. Panel administración Beez

15. Parte pública Beez

17. Crear una plantilla desde cero

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

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

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

21. 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

22. Index.php de Protostar

23. 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

24. 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

25. 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.

26. Frameworks de terceros

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

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

29. 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

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

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

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

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

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

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

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

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

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

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

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

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

42. PATROCINADORES