Koldo Parra de la Horra 1 Personaliza tu plantilla Joomla 1.5 Puedes obtener plantillas gratuitas aquí aquí.

Presentación del tema: "Koldo Parra de la Horra 1 Personaliza tu plantilla Joomla 1.5 Puedes obtener plantillas gratuitas aquí aquí."— Transcripción de la presentación:

1 Koldo Parra de la Horra 1 Personaliza tu plantilla Joomla 1.5 Puedes obtener plantillas gratuitas aquí aquí

2 Koldo Parra de la Horra2 Antes de empezar ► Se recomienda realizar cualquier prueba en local. Una vez se ha comprobado que la operación es factible se debe repetir en remoto. ► Siempre debe imprimirse una copia original del código para poder revertir los cambios cuando el resultado no sea el buscado y se quiera recuperar el estado anterior.

3 Koldo Parra de la Horra3 Dos posibilidades de edición A.Utilizar un programa de edición HTML y PHP en local y transferir por FTP las modificaciones al remoto (Sobrescribiendo archivos). B.Editar directamente la plantilla en Joomla, desde el Back-End. (Recomendado) En ambos casos se recomienda encarecidamente realizar pruebas con un Joomla en local y después repetir todo el proceso en remoto

4 Koldo Parra de la Horra4 Edición avanzada de plantillas ► Obviamente lo ideal es ser capaces de programar en PHP. No obstante se pueden modificar bastantes aspectos de la plantilla sin llegar a tanto. ► Se recomienda utilizar como programa de edición el Dreamweaver o en su defecto el Powerpoint. De ambos disponemos de licencia de la Consejería.

5 Koldo Parra de la Horra5 Estructura de una plantilla (1) ► Una plantilla se obtiene y se instala directamente en formato.ZIP ► Por tanto, no hace falta descomprimirla, salvo que queramos modificar algo.

6 Koldo Parra de la Horra6 Estructura de una plantilla (2) ► Si vemos de qué archivos está formada:  Una carpeta “css” donde están las hojas en cascada.  Una carpeta “Images” que contiene las imágenes.  Una página index en php.  Una imagen en miniatura de la plantilla.  Un archivo.xml con los detalles de la plantilla.

7 Koldo Parra de la Horra7 Estructura de una plantilla (3) ► Las plantillas de Joomla se almacenan dentro de la carpeta "/templates". Esta carpeta tiene la siguiente estructura y archivos:

8 Koldo Parra de la Horra8 Estructura de una plantilla (4) ► Veamos qué papel juega cada archivo: /css/template_css.css /css/template_css.css La hoja de estilos de nuestra plantilla. Su estructura es como la de cualquier hoja de css, ahora bien la gran cantidad de estilos definidos hace que sea algo complejo su manejo. Es recomendable tener a mano alguna buena herramienta de edición de hojas de estilo para modificarla sin volverse loco. index.php index.php Este fichero es la plantilla propiamente dicha. Nos adentraremos mas en su contenido y estructura en el siguiente punto. template_thumbnail.png template_thumbnail.png Foto miniatura de la plantilla.

9 Koldo Parra de la Horra9 Estructura de una plantilla (5) templatedetails.xml templatedetails.xml Es un fichero xml que describe algunos detalles de la plantilla que son usados por Joomla! para mostrar información sobre la misma en el "administrador de plantillas del sitio". La estructura interna de dicho archivo: - - <>nombre_de_la_plantilla nombre_de_la_plantilla <>Nuestro_nombre Nuestro_nombre <>This template, code and CSS is licenced under the Creative Commons Attribution-NonCommercial-ShareAlike License. Design by nosotros_mismos This template, code and CSS is licenced under the Creative Commons Attribution-NonCommercial-ShareAlike License. Design by nosotros_mismos <>javier javier <>yomismo.es yomismo.es <>1.0 1.0 <>Bonita descripción de nuestra plantilla, bla, bla!!! Bonita descripción de nuestra plantilla, bla, bla!!! - <> - <>template_thumbnail.png template_thumbnail.png <>index.php index.php - <> - <>css/template_css.css css/template_css.css

10 Koldo Parra de la Horra10 Zonas de Contenidos (1) ► También es importante conocer la forma en que las plantillas de Joomla organizan los contenidos de sus módulos. Se llaman “Zonas de contenidos”.

11 Koldo Parra de la Horra11 ► Cada espacio dedicado a ubicar módulos recibe un nombre que lo identificará posteriormente en el "gestor de módulos": top, right, left, user1, user2.... ► Cada plantilla tiene sus propios "huecos" y los ubica en posiciones diferentes. En ocasiones reciben nombres similares, aunque cada plantilla puede seguir su propio esquema de posiciones de módulos. Estas zonas están predefinidas en la plantilla y sólo pueden ser modificadas si tenemos conocimientos de programación en PHP, xHTML o CSS. Zonas de Contenidos (2)

12 Koldo Parra de la Horra12 ► En nuestra plantilla esas zonas quedan definidas en el index.php, de esta manera: (Para verlo mejor haz clic aquí, o abre el archivo con Dreamweaver.) Zonas de Contenidos (3)

13 Koldo Parra de la Horra13 ¿Qué podemos cambiar? ► Nos quedaremos en lo más básico: a)Imágenes de los Banners Imágenes de los BannersImágenes de los Banners b)Colores de zonas, bordes y fondos Colores de zonas, bordes y fondosColores de zonas, bordes y fondos c)Tipos de letra, tamaños y colores Tipos de letra, tamaños y coloresTipos de letra, tamaños y colores d)Estilos de títulos, encabezados, menús, etc.. Estilos de títulos, encabezados, menús, etc..Estilos de títulos, encabezados, menús, etc.. ► Vamos a realizar modificaciones a partir de la plantilla “dreamsquare 1.5.zip”.

14 Koldo Parra de la Horra14 La plantilla original ► Partimos de esta plantilla: Si la descomprimimos, tenemos esto

15 Koldo Parra de la Horra15 La plantilla original ► Suele ser útil ir a la Web del fabricante. En este caso: http://www.vonfio.de/ Habitualmente facilitan un esquema con las zonas de contenido.

16 Koldo Parra de la Horra16 a)Cambio de Banners y Logos (1) ► Analizando la plantilla una vez instalada vemos: Zona para Logo Zona para Banner o imagen principal

17 Koldo Parra de la Horra17 ► Hay que hacer lo siguiente: 1.Localizar en la plantilla donde están las “Zonas de contenidos”, es decir, los marcos donde van ubicadas estas imágenes. 2.Los nombres de las imágenes que ocupan esos lugares. Buscaremos en la carpeta “images”. 3.El tamaño en píxeles de alto y de ancho de las imágenes. 4.Construir unas imágenes con las mismas dimensiones y ponerles el mismo nombre de las originales. 5.Guardar estas nuevas imágenes en la carpeta “images” sobrescribiéndolas sobre las originales, o bien cambiar el nombre de referencia en el.CSS para que apunte a la nueva imagen. a)Cambio de Banners y Logos (2)

18 Koldo Parra de la Horra18 ► En nuestro caso vamos a cambiar esta imagen por esta: ► Y este logo por este otro: 898 x 160 píxeles a 72 ppp 109 x 70 píxeles a 72 ppp a)Cambio de Banners y Logos (3)

19 Koldo Parra de la Horra19 ► Si entramos en la carpeta “images” vemos todas las imágenes de la plantilla. Las dos que nos interesan son estas. ► Para conocer sus características las abrimos con el Gimp2. a)Cambio de Banners y Logos (4)

20 Koldo Parra de la Horra20 ► Simplemente ponemos el mismo nombre a nuestras fotos y las ponemos aquí sobrescribiendo las antiguas. Evidentemente luego habrá que hacerlo en remoto por ruta será: “joomla local\templates\drea msquare\images” ► Simplemente ponemos el mismo nombre a nuestras fotos y las ponemos aquí sobrescribiendo las antiguas. Evidentemente luego habrá que hacerlo en remoto por FTP. La ruta será: “joomla local\templates\drea msquare\images” a)Cambio de Banners y Logos (5)

21 Koldo Parra de la Horra21 a)Cambio de Banners y Logos (6)

22 Koldo Parra de la Horra22 b)Cambio de colores en zonas y bordes (1) ► Si vamos a la carpeta “images”, veremos algunas imágenes de este tipo: Estas imágenes configuran los bordes y fondos, aspecto de los menús, etc…

23 Koldo Parra de la Horra23 b)Cambio de colores en zonas y bordes (2) ► Si abrimos una de estas imágenes con un editor vemos que se trata de simples barras o puntos. ► La imagen sobre la plantilla se forma a base de repetir estas barras x veces. En este caso, la imagen “bg.jpg” (la primera) tiene 1 píxel de ancho por 400 de alto

24 Koldo Parra de la Horra24 b)Cambio de colores en zonas y bordes (3) ► Ampliando la imagen a un 400% podemos ver un ligero degradado de gris oscuro a gris claro. (se ha cortado la barra en cuatro partes).

25 Koldo Parra de la Horra25 b)Cambio de colores en zonas y bordes (4) ► ¿Dónde tenemos esta imagen en la plantilla? ¿Cuál es su función?. ► La imagen sobre la plantilla se forma a base de repetir estas barras x veces. Si abrimos las hoja de estilos en cascada “template.css” vemos:

26 Koldo Parra de la Horra26 b)Cambio de colores en zonas y bordes (5) ► ► Esa imagen define el fondo de la zona “body”, es decir, el cuerpo principal de la página. Background es el fondo y repite la imagen x veces hasta rellenar. El color de background #434343 es este gris que ocupa el fondo.

27 Koldo Parra de la Horra27 b)Cambio de colores en zonas y bordes (6) ► ► Para averiguar cualquier color en Hexadecimal (código RGB recomiendo esta página: http://www.easycalculation.com/color-coder.php?hexcolor=5B8307&rgbcolor=91,131,7 Introducimos aquí el valor en Hexadecimal Nos muestra el valor en decimal de los canales R, G y B. Nos muestra el color.

28 Koldo Parra de la Horra28 b)Cambio de colores en zonas y bordes (7) ► ► Vamos a hacer dos pruebas: a) a)¿Qué pasa si cambiamos el código #434343 por el blanco “FFFFFF”? b) b)¿Qué pasará cuando sustituyamos la imagen “bg.jpg” por otra de las mismas dimensiones pero en tonos verdes?

29 Koldo Parra de la Horra29 b)Cambio de colores en zonas y bordes (8) ► ► También podemos modificar estos valores editando directamente desde el back-End de Joomla. Vamos a “Extensiones/Gestor de Plantillas”. Teniendo instalada la plantilla: 1.La seleccionamos y hacemos clic sobre el botón Editar.

30 Koldo Parra de la Horra30 b)Cambio de colores en zonas y bordes (9) ► Nos aparece la ventana de edición de la plantilla seleccionada. Aquí podemos optar por editar la página HTML o la CSS.

31 Koldo Parra de la Horra31 b)Cambio de colores en zonas y bordes (10) ► En cualquier caso nos aparece un editor de código similar al del Dreamweaver o Frontpage, con la diferencia de que aquí estaremos actuando directamente sobre los archivos de la plantilla en el lugar de la instalación. De esta manera los cambios son introducidos directamente sobre la plantilla. No hay que sobrescribir ningún archivo.

32 Koldo Parra de la Horra32 b)Cambio de colores en zonas y bordes (11) ► Si optamos por editar el CSS debemos elegir cual. En este caso sólo hay una ► Seleccionamos y clic en “Editar”.

33 Koldo Parra de la Horra33 b)Cambio de colores en zonas y bordes (12) ► Nos aparece un editor como este: Es la misma zona de código que veíamos antes con Frontpage.

34 Koldo Parra de la Horra34 b)Cambio de colores en zonas y bordes (13) ► Por ejemplo, vamos a ver el efecto de modificar esta línea del código, pasando el color de fondo “474747” a blanco puro “FFFFFF”.

35 Koldo Parra de la Horra35 b)Cambio de colores en zonas y bordes (14) ► Ha cambiado el color de fondo, pee4ro la parte de arriba está ocupada por la imagen “bg.jpg” que se repite x veces. Ahora vamos a cambiar bg.jpg por otra en tonos verdes. Hay que ir a la carpeta “images” y sustituir la imagen.

36 Koldo Parra de la Horra36 b)Cambio de colores en zonas y bordes (15) 1.Voy a la ruta D:\joomla local\templates\dr eamsquare\images 2.Copio la imagen bgverde.jpg 3.Elimino la imagen bg.jpg 4.Cambio el nombre de bgverde.jpg a bg.jpg 5.Observo cómo cambia la plantilla.

37 Koldo Parra de la Horra37 b)Cambio de colores en zonas y bordes (16) El efecto obtenido es este:

38 Koldo Parra de la Horra38 b)Cambio de colores en zonas y bordes (17) ► De igual manera se puede proceder con el resto de colores de fondo. El nombre del archivo, su color y un vistazo al aspecto de la página nos dan pistas sobre la posición que ocupa. Luego sólo nos resta cambiarla por otra con el color que nos interese. Por ejemplo: Si el nombre lleva “bg” suele corresponder a un fondo (Background), por ejemplo: “logo_bg.jpg” es el fondo de detrás del logo. Vamos a abrirlo para ver que aspecto tiene. Si el nombre lleva “bg” suele corresponder a un fondo (Background), por ejemplo: “logo_bg.jpg” es el fondo de detrás del logo. Vamos a abrirlo para ver que aspecto tiene.

39 Koldo Parra de la Horra39 b)Cambio de colores en zonas y bordes (18) ► Abriendo la imagen “logo_bg.jpg con Gimp vemos que se trata de una barra de 1 píxel de ancho y 136 de alto, con la parte de arriba en negro degradado a gris y la parte de abajo gris claro. Por el nombre y el color sospecho que ocupa esta zona, detrás del logo.

40 Koldo Parra de la Horra40 b)Cambio de colores en zonas y bordes (19) ► Puedo localizar la línea de texto que corresponde a la zona de esa imagen. La zona se llama “logoarea”, alineada a la izquierda, ocupa 136 píxeles de alto y 203 de ancho, y la imagen de fondo es logo_bg.jpg Cambiaremos por tonos rojos el fondo de detrás y también el propio logo.

41 Koldo Parra de la Horra41 b)Cambio de colores en zonas y bordes (20) ► Y se ve el cambio aquí:

42 Koldo Parra de la Horra42 b)Cambio de colores en zonas y bordes (21) ► Por último, si queremos que el logo nos quede mejor colocado sobre el fondo del área hay que modificar los valores del margen en esta línea: 40 px 50 px Establece el margen entre el fondo y la imagen.

43 Koldo Parra de la Horra43 b)Cambio de colores en zonas y bordes (22) ► Vamos a cambiar estos valores por 20 y 20: ► Para acabar de ajustar podríamos reducir el tamaño de la zona que ocupa el logo “Logoarea” (136 x 203 px) o poner un logo ligeramente más grande, o jugar con ambos valores, reajustar los márgenes, etc…

44 Koldo Parra de la Horra44 b)Cambio de colores en zonas y bordes (23) ► El color de fondo de la zona central: ► Para que se note la diferencia, voy a cambiar el color de fondo blanco por un verde chillón #33CC00

45 Koldo Parra de la Horra45 b)Cambio de colores en zonas y bordes (24) ► El resultado obtenido:

46 Koldo Parra de la Horra46 b)Cambio de colores en zonas y bordes (25) ► Si queremos cambiar el color del módulo “Buscar” hay que ir a esta zona de código: Originalmente blanco podemos cambiarlo a morado #9900FF

47 Koldo Parra de la Horra47 b)Cambio de colores en zonas y bordes (26) ► Si queremos cambiar el color del módulo “Buscar” hay que ir a esta zona de código:

48 Koldo Parra de la Horra48 c)Cambio de tipos, tamaños y colores de letra(1) ► Los tipos, tamaños y colores de letra se definen en cada zona de contenidos: Por seguir con la zona “Body” es decir la zona principalPor seguir con la zona “Body” es decir la zona principal Indica que la letra es de color negro (#000000). Indica que la fuente es Arial y de 11 px de tamaño.

49 Koldo Parra de la Horra49 c)Cambio de tipos, tamaños y colores de letra(2) ► Se percibe así en la página: Zona “Body”: letra negra, tipo Arial y tamaño 12. Las letras de menús, títulos, etc.. Van definidas en otras zonas del CSS.

50 Koldo Parra de la Horra50 c)Cambio de tipos, tamaños y colores de letra(3) ► Qué sucederá si cambiamos estos valores en el editor?. Color de letra de #000000 (negro) a #FF0000 (Rojo). Tipo de letra, de Arial a Tahoma. Tamaño de letra de 11 px a 14 px.

51 Koldo Parra de la Horra51 c)Cambio de tipos, tamaños y colores de letra(4) ► Podemos apreciar los cambios: No afecta a las letras de los encabezados y títulos. Únicamente al texto del contenido y módulos de esa zona.

52 Koldo Parra de la Horra52 d)Estilos de títulos, encabezados, menús, etc…(1) ► Vamos a centrarnos en este encabezado: Que queda definido en este trozo de código: Altura del rectángulo Color del texto Tamaño del texto Margen entre el borde y el texto Color azul de fondo

53 Koldo Parra de la Horra53 d)Estilos de títulos, encabezados, menús, etc…(2) ► Simplemente para ver los cambios vamos a modificar: Color de fondo a rojo.Color de fondo a rojo. Color del texto a negro y al doble de tamaño.Color del texto a negro y al doble de tamaño. Tamaño del recuadro al doble.Tamaño del recuadro al doble.

54 Koldo Parra de la Horra54 d)Estilos de títulos, encabezados, menús, etc…(3) ► El resultado es:

55 Koldo Parra de la Horra55 d)Estilos de títulos, encabezados, menús, etc…(4) ► El color #8f0E0E es el color granate de los enlaces en los módulos laterales y en los módulos de “Ultimas Noticias” y “Popular” que aparecen abajo. ► Se definen en esta línea de código (justo debajo de lo anterior):

56 Koldo Parra de la Horra56 d)Estilos de títulos, encabezados, menús, etc…(5) ► Si lo cambiamos por rojo #FF0000, el efecto es este:

57 Koldo Parra de la Horra57 d)Estilos de títulos, encabezados, menús, etc…(6) Imagen de fondo del menú Altura que ocupa cada línea del menú Tamaño de la letra ► Si lo que queremos es cambiar los textos de los módulos, en el grupo de código siguiente podemos hacerlo:

58 Koldo Parra de la Horra58 d)Estilos de títulos, encabezados, menús, etc…(7) ► Vamos a modificar el tamaño del texto y el fondo de debajo de los textos por un tono anaranjado #FFCC33: Esto debemos hacerlo sustituyendo la imagen “sectiontableentry.jpg” que es blanco en degradado a gris por otra que llamaré “sectiontableentrynaranja.jpg” y que será blanco en degradado a naranja.

59 Koldo Parra de la Horra59 d)Estilos de títulos, encabezados, menús, etc…(8) ► Tras cambiar el código correspondiente queda así: Además, se ha cambiado el tamaño del texto.

60 Koldo Parra de la Horra60 d)Estilos de títulos, encabezados, menús, etc…(9) ► Justo debajo, vemos la definición de los botones: Ese color #9ABC57 es este verde manzana.

61 Koldo Parra de la Horra61 d)Estilos de títulos, encabezados, menús, etc…(10) ► También hay que cambiar el color de fondo a otro similar al de la nueva imagen. Por ejemplo en tonos dorados y naranja suave #f8dd80 Ampliada un 400% Su tamaño real es de 1 x 25 px ► Hay que cambiar la imagen “button.jpg”, el color de fondo y el del borde button2.jpg button.jpg

62 Koldo Parra de la Horra62 d)Estilos de títulos, encabezados, menús, etc…(11) ► También se puede cambiar el efecto “hover” sobre los botones. ► Simplemente se repite el color para reducir la transparencia. ► El efecto es este:

63 Koldo Parra de la Horra63 d)Estilos de títulos, encabezados, menús, etc…(12) ► El juego con los menús es muy curioso. Se trata de un fondo azul, con un efecto “hover” en gris claro inverso, es decir, tapa todo excepto una línea y se destapa al pasar el ratón por encima dejando ver el fondo.

64 Koldo Parra de la Horra64 d)Estilos de títulos, encabezados, menús, etc…(13) ► Es cuestión de cambiar estos azules por otros colores ► Por ejemplo, estos naranjas Color de fondo Color de la línea vertical de la izquierda #FF9900#FF6600

65 Koldo Parra de la Horra65 d)Estilos de títulos, encabezados, menús, etc…(14) Cambiamos el color del borde estrecho de la izquierda por el naranja fuerte #FF6600. Cambiamos el color del fondo y del borde cuando pasamos el ratón por un naranja suave #FF9900. También podemos cambiar el alto de cada fila de menú, el tamaño y el color del texto, etc…. Por ejemplo, vamos a poner tamaño de letra 14 px y color de letra verde #00CC33 en lugar del negro que hay #000000.

66 Koldo Parra de la Horra66 d)Estilos de títulos, encabezados, menús, etc…(15)

67 Koldo Parra de la Horra67 d)Estilos de títulos, encabezados, menús, etc…(16) ► También se puede cambiar el gris de los encabezados de los menús. ► Hay que sustituir la imagen h3.jpg que es esta ampliadas un 400% ► Por otra como esta

68 Koldo Parra de la Horra68 d)Estilos de títulos, encabezados, menús, etc…(17) ► Obtenemos esto:

69 Koldo Parra de la Horra69 d)Estilos de títulos, encabezados, menús, etc…(18) ► Evidentemente se pueden modificar otras cosas de la plantilla, pero siempre es de la misma manera. Hay que investigar y realizar cambios en el código y ver que pasa. ► Siempre debe imprimirse una copia original del código para poder revertir los cambios cuando el resultado no sea el buscado y se quiera recuperar el estado anterior. ► Pero creo que la filosofía de modificación de plantillas queda suficientemente clara con lo visto hasta ahora. Si se quiere profundizar en la adaptación de plantillas más complejas, recomiendo ver la presentación siguiente: “Modificación de una plantilla compleja en Joomla 1.5”

70 Koldo Parra de la Horra 70 Fin de la presentación Personaliza tu plantilla Joomla 1.5