Taller impartido por Valentín García para: Joomla World Conference 2014 Cancún, Quinatana Roo. Noviembre 8, 2014 #JWC14

1. Protostar como
Framework
Por Valentín García

2. Valentín García
• TSU Informática Administrativa
• Ingeniero en Tecnologías de la Información
• Director de Diseño en OSTraining
• Desarrollador de Templates comerciales para
Joomla!

3. Experiencia con Joomla!
• 2010: conocí Joomla!
• 2011: creé mi primer template
para Joomla! 1.5

4. Experiencia con Joomla!
2012: desarrollé templates y módulos para Joomla! 2.5

5. Experiencia con Joomla!
2013: me uní a OSTraining como Director de Diseño.
Empecé a vender templates comerciales para Joomla!
2.5 y 3

6. Experiencia con Joomla!
2014: me convertí en author Elite
en Envato al vender más de 3,000
licencias de plantillas en
Themeforest

7. 2014: Rediseño web de OSTraining.com
• CSS: responsive
• CSS: overrides
• CSS: clases personales
• CSS: animación
• CSS: FontAwesome
¡CSS está en todas partes!

8. Framework
Es un marco de trabajo diseñado para apoyar el desarrollo
de sitios web dinámicos, aplicaciones web y servicios web.
Los archivos PHP y CSS de Protostar
contienen elementos reusables.

9. ¿Ventajas de usar un Framework?

10. Sin Framework
• Desarrollado desde cero
(todo el CSS, HTML, PHP,
JS)
• 4 meses de desarrollo
• Flexibilidad limitada
• Menu de un sólo nivel

11. Con Framework
• 5 horas de desarrollo
• Excelente flexibilidad
• Menu de dos niveles

12. Sin Framework: 4 meses
Con Framework: 5 horas

13. Protostar Template
• Incluye Bootstrap
• Fácil de configurar
• Código nativo
• Responsive
• Fácil de modificar
• ¡Gratis!

14. ostraining.com/breeze

16. ¿Qué haremos?
1.Duplicar Protostar
2.Predeterminar
miplantilla
3.Personalizar CSS
4.Editar modules.php

17. 1. Duplicar Protostar
1.Extensiones
2.Gestor de Plantillas
3.Plantillas

18. 4. Detalles y archivos de la plantilla Protostar
5. Copiar Plantilla

19. 6. Nuevo nombre de plantilla: miplantilla
7. Copiar plantilla
¡Hecho!

20. 2. Predeterminar miplantilla
1.Extensiones
2.Gestor de Plantillas
3.Estilos
4.Predeterminar

21. Lo siguiente no es sobre enseñar CSS ni PHP,
te voy a mostrar las posibilidades de crear
nuevos templates a partir de Protostar

22. 3. Personalizar CSS
En un editor como Notepad++ o similar abre
el archivo:
templates/miplantilla/css/template.css

23. CSS Personalizado
Cambiar el diseño sin tocar PHP ni HTML

24. Modificar el ancho del template
Editar línea 7008 de
templates/miplantilla/css/template.css:
.container {
max-width: 760px;
}
Guardar

25. Antes
Después de personalizar el CSS

26. Modificar la columna derecha

27. Modificar la columna derecha
Editar línea 2117 de
templates/miplantilla/css/template.css:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 10px;
background-color: #e5f3fa;
border: none;
}
Guardar

29. Modificar el link de “Leer más”

30. Modificar el link de “Leer más”
Editar línea 2187 de templates/miplantilla/css/template.css:
.btn {
display: inline-block;
*display: inline;
*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
background-color: #0088cc;
*background-color: #0088cc;
border: none;
*border: 0;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
}

32. Modificar el contenedor principal

33. Modificar el contenedor principal
Editar línea 6992 de
templates/miplantilla/css/template.css:
.body .container {
background-color: #fff;
padding: 35px;
}
Guardar

35. Modificar el menu principal

36. Modificar el menu principal
Editar línea 6973 de
templates/miplantilla/css/template.css:
.navigation {
padding: 3px 5px;
margin-bottom: 35px;
background: #badff2;
border-radius: 4px;
}
Guardar

38. Modificar el campo de búsqueda

39. Modificar el campo de búsqueda
Editar línea 1529 de
templates/miplantilla/css/template.css:
input.search-query {
margin-bottom: 0;
}
Guardar

41. Modificar el ancho del pie

42. Modificar el ancho del pie
Agregar después de la última línea de código de
templates/miplantilla/css/template.css:
footer .container{
max-width: 830px;
}
Guardar

44. Agregar una imagen de fondo
Guardar imagen fondo.jpg en la carpeta:
/templates/miplantilla/images/

45. Agregar una imagen de fondo
Editar línea 6927 de templates/miplantilla/css/template.css:
body.site {
border-top: 3px solid #0088cc;
padding: 20px;
background-color: #f4f6f7;
background-image: url("../images/fondo.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
}
Guardar

47. 4. Editar modules.php
En un editor como Notepad++ o similar abre
el archivo:
templates/miplantilla/html/modules.php

48. Editar línea 44 de
templates/miplantilla/html/modules.php cambiar
de h3 a h4
echo "<h4 class="page-header">" . $module->title . “</h4>";
Guardar

51. https://github.com/htmgarcia/miplantilla

52. ¿Qué más puedo
personalizar?
• CSS
• Fuente de texto
• Colores
• Espaciado
• PHP
• Overrides
• Modulos
• Parámetros del template

53. Preguntas

54. ¡Gracias!
@htmgarcia