Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes obtener la plantilla “Redevo Allium” aquí aquí Plantilla.

Presentación del tema: "Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes obtener la plantilla “Redevo Allium” aquí aquí Plantilla."— Transcripción de la presentación:

1 Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes obtener la plantilla “Redevo Allium” aquí aquí Plantilla “Red Evolution” de Allium

2 Koldo Parra de la Horra2 Antes de empezar Antes de entrar en esta presentación se recomienda leer primero la anterior titulada “Personalización de plantillas sencillas”, dado que aparecen conceptos básicos que en esta se dan por adquiridos. Antes de entrar en esta presentación se recomienda leer primero la anterior titulada “Personalización de plantillas sencillas”, dado que aparecen conceptos básicos que en esta se dan por adquiridos. Como siempre se recomienda encarecidamente realizar pruebas con un Joomla en local y después repetir todo el proceso en remoto. Como siempre se recomienda encarecidamente realizar pruebas con un Joomla en local y después repetir todo el proceso en remoto.

3 Koldo Parra de la Horra3 Características de la plantilla Es a plantilla utilizada por el IES Mata Jove para su Web de Centro. Se ha utilizado en la versión gratuita, que viene ”capada”. Es a plantilla utilizada por el IES Mata Jove para su Web de Centro. Se ha utilizado en la versión gratuita, que viene ”capada”. La que se muestra es la versión de pago, más completa (en la nuestra no están definidas las zonas “header” ni “User5”. La que se muestra es la versión de pago, más completa (en la nuestra no están definidas las zonas “header” ni “User5”.

4 Koldo Parra de la Horra4 Características de la plantilla(2) Esta es la plantilla gratuita “RedEvo” sin modificar. Esta es la plantilla gratuita “RedEvo” sin modificar. Se trata de una plantilla compleja porque no define es su código de forma clara las zonas de contenido. Se trata de una plantilla compleja porque no define es su código de forma clara las zonas de contenido.

5 Koldo Parra de la Horra5 Características de la plantilla(3) Nos facilitan un esquema con las zonas de contenido. Nos facilitan un esquema con las zonas de contenido. No es del todo correcto, ya que hay zonas que simplemente no existen No es del todo correcto, ya que hay zonas que simplemente no existen

6 Koldo Parra de la Horra6Objetivos Nos planteábamos modificar la plantilla para personalizarla y adaptarla a nuestro centro. Para ello buscaremos: –Modificar colores de fondo –Modificar tamaños y tipos de letra –Modificar encabezados –Insertar una imagen en la zona superior que incluya el logotipo y los datos del centro, pero sin tapar el menú superior.

7 Koldo Parra de la Horra7 Procedimiento Para ello podemos emplear el editor de plantillas del propio Joomla, o bien utilizar un editor específico (Frontpage o Dreamweaver). Iremos analizando el código del archivo “template.css”, para ver a qué afecta cada fragmento de código y qué y cómo se puede cambiar.

8 Koldo Parra de la Horra8 Acceder a la edición de la plantilla A diferencia de la presentación anterior en este caso emplearé exclusivamente el editor de plantillas del propio Joomla. Recuerdo que conviene hacer las pruebas en local antes de cualquier modificación en remoto, para evitar problemas. A diferencia de la presentación anterior en este caso emplearé exclusivamente el editor de plantillas del propio Joomla. Recuerdo que conviene hacer las pruebas en local antes de cualquier modificación en remoto, para evitar problemas. Para editar la plantilla vamos al gestor de plantillas, seleccionamos la plantilla Redevo Allium y le damos a “Editar”. Para editar la plantilla vamos al gestor de plantillas, seleccionamos la plantilla Redevo Allium y le damos a “Editar”.

9 Koldo Parra de la Horra9 Acceder a la edición de la plantilla Aquí hacemos clic sobre editar CSS. Aquí hacemos clic sobre editar CSS. De las hojas en cascada, empezaremos por editar el template y dejaremos para después el CSS de los menús. De las hojas en cascada, empezaremos por editar el template y dejaremos para después el CSS de los menús.

10 Koldo Parra de la Horra10 Ayuda con los colores (1) Para averiguar cualquier color en Hexadecimal (código RGB recomiendo esta página: 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.

11 Koldo Parra de la Horra11 Ayuda con los colores (2) También es interesante este PDF que te puedes descargar aquí: tabla básica de colores RGB.pdf También es interesante este PDF que te puedes descargar aquí: tabla básica de colores RGB.pdf tabla básica de colores RGB.pdf tabla básica de colores RGB.pdf

12 Koldo Parra de la Horra12 Análisis del código(1) Inicio El template.css comienza así: El template.css comienza así: Parecen simples reseteos y configuraciones generales.

13 Koldo Parra de la Horra13 Análisis del código(2) Fondo y fuentes (background color font size) y textos no formateados (non paragrafh text colors) La primera parte se refiere al color de fondo “background” #FFFFFF que es blanco, al tipo de fuente por defecto que es Arial y al tamaño por defecto que es 12 px La primera parte se refiere al color de fondo “background” #FFFFFF que es blanco, al tipo de fuente por defecto que es Arial y al tamaño por defecto que es 12 px Estos deben ser los colores por defecto y tamaño de letra por defecto para zonas sin asignación específica. Artículos y subtítulos. Estos deben ser los colores por defecto y tamaño de letra por defecto para zonas sin asignación específica. Artículos y subtítulos. La segunda y tercera zonas ya afectan a colores y tamaños de letra. La segunda y tercera zonas ya afectan a colores y tamaños de letra.

14 Koldo Parra de la Horra14 Análisis del código(2) Fondo (background) y textos no formateados (non paragrafh text colors) Ese fondo blanco sólo se percibe abajo del todo. Si lo cambiáramos por rojo #FF0000 pasaría esto: Ese fondo blanco sólo se percibe abajo del todo. Si lo cambiáramos por rojo #FF0000 pasaría esto:

15 Koldo Parra de la Horra15 Análisis del código(2) Fondo y fuentes (background color font size) y textos no formateados (non paragrafh text colors) Para verlo he cambiado el tamaño de la fuente a 30 px en lugar de 12 y el tipo de letra de Arial a Tahoma. En este mismo fragmento de código podemos cambiar el tipo y el tamaño del texto de los menús. En este mismo fragmento de código podemos cambiar el tipo y el tamaño del texto de los menús.

16 Koldo Parra de la Horra16 Análisis del código(2) Fondo (background) y textos no formateados (non paragrafh text colors) Y sucede esto: Y sucede esto:

17 Koldo Parra de la Horra17 Análisis del código(2) Fondo (background) y textos no formateados (non paragrafh text colors) Hemos cambiado el color #333 (en hexadecimal #030303 es un negro no puro) a rojo #FF0000, y el tamaño lo hemos aumentado de 12 px a 16 px. Hemos cambiado el color #333 (en hexadecimal #030303 es un negro no puro) a rojo #FF0000, y el tamaño lo hemos aumentado de 12 px a 16 px. Vamos a ver el efecto que supone cambiar los valores en esta zona: Vamos a ver el efecto que supone cambiar los valores en esta zona:

18 Koldo Parra de la Horra18 Análisis del código(2) Fondo (background) y textos no formateados (non paragrafh text colors) Vemos que afecta a todos los textos excepto encabezados, títulos y menús que permanecen igual. Vemos que afecta a todos los textos excepto encabezados, títulos y menús que permanecen igual.

19 Koldo Parra de la Horra19 Análisis del código(3) Encabezados (headings) En el ”headings” se definen los encabezados. Tipo de letra y color. En el ”headings” se definen los encabezados. Tipo de letra y color. Debajo aparece “Link Text Colors” que evidentemente define el color de los enlaces de texto. Debajo aparece “Link Text Colors” que evidentemente define el color de los enlaces de texto.

20 Koldo Parra de la Horra20 Análisis del código(3) Encabezados (headings) El color #5B8307 corresponde a este: El color #5B8307 corresponde a este: El mismo color para los Links. El mismo color para los Links.

21 Koldo Parra de la Horra21 Análisis del código(3) Encabezados (headings) Por ejemplo si cambiamos en la segunda línea #5B6307 (verde) por #FF0000 (rojo). Pasa esto: Por ejemplo si cambiamos en la segunda línea #5B6307 (verde) por #FF0000 (rojo). Pasa esto:

22 Koldo Parra de la Horra22 Análisis del código(3) Encabezados (headings) También tenemos aquí definidos el tamaño y tipo de fuentes de los encabezados: También tenemos aquí definidos el tamaño y tipo de fuentes de los encabezados: Si cambiamos 21 por 50 en la 1ª línea pasa esto. Lo que nos indica que H1 es el estilo del título principal. Si cambiamos 21 por 50 en la 1ª línea pasa esto. Lo que nos indica que H1 es el estilo del título principal.

23 Koldo Parra de la Horra23 Análisis del código(3) Encabezados (headings) Si cambiamos en la segunda línea 18 px por 40 pasa esto: Si cambiamos en la segunda línea 18 px por 40 pasa esto: Lo que nos indica que el parámetro H2 es para los títulos secundarios o títulos de los artículos.

24 Koldo Parra de la Horra24 Análisis del código(4) Encabezados (headings) Si cambiamos en la tercera línea 14 px por 30 pasa esto: Si cambiamos en la tercera línea 14 px por 30 pasa esto: Lo que nos indica que el parámetro H3 es para los títulos de los módulos Podríamos haber cambiado la fuente “Georgia por otra y afectaría al tipo de letra de estos títulos.

25 Koldo Parra de la Horra25 Análisis del código(4) Efectos sobre los menús (hover) El ”hover” afecta a lo que sucede sobre los enlaces de menú cuando pasamos por encima el ratón. El ”hover” afecta a lo que sucede sobre los enlaces de menú cuando pasamos por encima el ratón. Al cambiarlo a #FFF (blanco), vemos que al pasar el ratón por el menú superior, en lugar de aparecer la barra negra verdosa sobre negro, aparece la barra verdosa sobre blanco. Al cambiarlo a #FFF (blanco), vemos que al pasar el ratón por el menú superior, en lugar de aparecer la barra negra verdosa sobre negro, aparece la barra verdosa sobre blanco. La zona hover tiene este texto: Indica un color negro

26 Koldo Parra de la Horra26 Análisis del código(5) Main Menú Link Colors La primera zona señalada corresponde al color de las letras de los menús (menú izquierdo). Inicialmente blancas #FFF. La primera zona señalada corresponde al color de las letras de los menús (menú izquierdo). Inicialmente blancas #FFF. La segunda parte afecta a los colores de fondo de los menús, al efecto “hover”, etc.. La segunda parte afecta a los colores de fondo de los menús, al efecto “hover”, etc..

27 Koldo Parra de la Horra27 Análisis del código(5) Main Menú Link Colors Vamos a cambiar el color de los textos de los menús a rojo #FF0000. Vamos a cambiar el color de los textos de los menús a rojo #FF0000.

28 Koldo Parra de la Horra28 Análisis del código(5) Main Menú Link Color Por ello debemos empezar analizando qué imágenes hay en la carpeta “images” y que función tiene cada una de ellas. Por ello debemos empezar analizando qué imágenes hay en la carpeta “images” y que función tiene cada una de ellas.

29 Koldo Parra de la Horra29 Análisis del código(5) Main Menú Link Color Un primer grupo de imágenes son: Un primer grupo de imágenes son: “bggreen.jpg”“bggreen.jpg” “bgmenu.jpg”“bgmenu.jpg” “bgred.jpg”“bgred.jpg” Corresponden a los fondos debajo de los menús y de los módulos de “Últimas noticias” y de “Popular”. Corresponden a los fondos debajo de los menús y de los módulos de “Últimas noticias” y de “Popular”.

30 Koldo Parra de la Horra30 Análisis del código(5) Main Menú Link Color Si las abrimos con un programa de edición de imágenes podremos observar que: Si las abrimos con un programa de edición de imágenes podremos observar que: bggreen.jpgbggreen.jpg Está ampliada un 400% para ver el degradado Está ampliada un 400% para ver el degradado Tamaño: 1 x 158 px Tamaño: 1 x 158 px Color verde en degradado Color verde en degradado bgmenu.jpgbgmenu.jpg Es azul y más larga: Es azul y más larga: Tamaño: 1 x 312 px. Tamaño: 1 x 312 px. bgred.jpgbgred.jpg Es exactamente igual de tamaño que la verde pero en rojo. A tamaño original es así: 1 x 158 px. Es exactamente igual de tamaño que la verde pero en rojo. A tamaño original es así: 1 x 158 px.

31 Koldo Parra de la Horra31 Análisis del código(5) Main Menú Link Color Es evidente que cambiando estos colores por otros y sustituyendo en la plantilla el nombre de las originales y sobrescribiéndolas cambiará el fondo de los menús. Es evidente que cambiando estos colores por otros y sustituyendo en la plantilla el nombre de las originales y sobrescribiéndolas cambiará el fondo de los menús. Como ejemplo vamos a cambiar bggreen.jpg por bgviolet.jpg Como ejemplo vamos a cambiar bggreen.jpg por bgviolet.jpg El fondo de debajo se va a mantener verde, para que no se note deberíamos cambiarlo por un violeta suave #CDA9CB.

32 Koldo Parra de la Horra32 Análisis del código(5) Main Menú Link Color El resultado es este: El resultado es este: Apreciamos el defecto del color de fondo. Apreciamos el defecto del color de fondo. Fácilmente solucionable. Ponemos color violeta suave al background. #CDA9CB

33 Koldo Parra de la Horra33 Análisis del código(5) Main Menú Link Color Solucionado Solucionado

34 Koldo Parra de la Horra34 Análisis del código(5) Main Menú Link Color Un segundo grupo de imágenes es este: Un segundo grupo de imágenes es este: Se observa que son simples puntos. Estos puntos repetidos x veces forman líneas continuas o discontinuas. Las podemos ver aquí: Se observa que son simples puntos. Estos puntos repetidos x veces forman líneas continuas o discontinuas. Las podemos ver aquí:

35 Koldo Parra de la Horra35 Análisis del código(5) Main Menú Link Color Podemos ver esas líneas aquí: Podemos ver esas líneas aquí:

36 Koldo Parra de la Horra36 Análisis del código(5) Main Menú Link Color Si ampliamos la imagen dot.gif en un 800% vemos: Si ampliamos la imagen dot.gif en un 800% vemos: Tamaño: 3 x 1pxTamaño: 3 x 1px Color azul en degradado de izquierda a derecha.Color azul en degradado de izquierda a derecha.

37 Koldo Parra de la Horra37 Análisis del código(5) Main Menú Link Color Si ampliamos la imagen dot-v.png en un 800% vemos: Si ampliamos la imagen dot-v.png en un 800% vemos: Color azul Tamaño: 1 x 4pxColor azul Tamaño: 1 x 4px Color degradado de blanco a negro en vertical.Color degradado de blanco a negro en vertical.

38 Koldo Parra de la Horra38 Análisis del código(5) Main Menú Link Color Si ampliamos la imagen dot.png en un 800% vemos: Si ampliamos la imagen dot.png en un 800% vemos: Tamaño: 3 x 1pxTamaño: 3 x 1px Color amarillo degradado hacia blanco.Color amarillo degradado hacia blanco.

39 Koldo Parra de la Horra39 Análisis del código(5) Main Menú Link Color A priori no se ve que función cumplen estas imágenes en la plantilla. Únicamente podemos investigar qué pasa en esta zona: A priori no se ve que función cumplen estas imágenes en la plantilla. Únicamente podemos investigar qué pasa en esta zona: Por ejemplo cambiando ese color azul por un amarillo puro #FFFF00 Por ejemplo cambiando ese color azul por un amarillo puro #FFFF00 dot.gif dot2.gif

40 Koldo Parra de la Horra40 Análisis del código(5) Main Menú Link Color Se aprecia que las líneas que subrayan las entradas de menú se vuelven amarillas: Se aprecia que las líneas que subrayan las entradas de menú se vuelven amarillas:

41 Koldo Parra de la Horra41 Análisis del código(5) Main Menú Link Color En cuanto al papel de los archivos “ident1.png”, “mainlevel.gif” y sublevel.gif está claro que tiene que ver con las viñetas de los menús: En cuanto al papel de los archivos “ident1.png”, “mainlevel.gif” y sublevel.gif está claro que tiene que ver con las viñetas de los menús:

42 Koldo Parra de la Horra42 Análisis del código(5) Main Menú Link Color Por lo tanto, cambiando estas imágenes podremos cambiar la forma de las viñetas y el color. Por ejemplo, vamos a sustituir esta por otra viñeta distinta (redonda) y de color magenta #CC00FF. Por lo tanto, cambiando estas imágenes podremos cambiar la forma de las viñetas y el color. Por ejemplo, vamos a sustituir esta por otra viñeta distinta (redonda) y de color magenta #CC00FF. La original tiene unas dimensiones de 7 x 7 px La original tiene unas dimensiones de 7 x 7 px

43 Koldo Parra de la Horra43 Análisis del código(5) Main Menú Link Color Así que en el código cambiamos: Así que en el código cambiamos:

44 Koldo Parra de la Horra44 Análisis del código(5) Main Menú Link Color Otro aspecto sobre el que nos podemos fijar es el cambio de fondo al pasar el ratón por encima de un enlace de menú (hover). Esto viene definido en esta parte del código Otro aspecto sobre el que nos podemos fijar es el cambio de fondo al pasar el ratón por encima de un enlace de menú (hover). Esto viene definido en esta parte del código Este color #487FD0 es este azul que aparece al pasar el ratón. Vamos a cambiarlo por un naranja suave #FF9900 Este color #487FD0 es este azul que aparece al pasar el ratón. Vamos a cambiarlo por un naranja suave #FF9900

45 Koldo Parra de la Horra45 Análisis del código(5) Main Menú Link Color Como se puede ver, es sencillo cambiar todas las opciones del aspecto de los menús. Como se puede ver, es sencillo cambiar todas las opciones del aspecto de los menús. Este otro color se refiere al color del texto de los menús en el efecto “hover”, es decir, si queremos que las letras de los menús se pongan rojas cuando pasamos el ratón por encima lo cambiamos por #FF0000

46 Koldo Parra de la Horra46 Análisis del código(5) Main Menú Link Color Otro grupo de imágenes son: Otro grupo de imágenes son: Que sirven para conformar la parte de abajo o “footer” Que sirven para conformar la parte de abajo o “footer” El “footer” se construye al final del código. Aquí no merece la pena cambiar nada. El “footer” se construye al final del código. Aquí no merece la pena cambiar nada.

47 Koldo Parra de la Horra47 Análisis del código(5) Main Menú Link Color La siguiente zona que vamos a analizar es el mainlevel-nav dentro del MAIN MENU LINK COLOR. La siguiente zona que vamos a analizar es el mainlevel-nav dentro del MAIN MENU LINK COLOR. Afecta a esta zona de las letras del menú superior. El color #D5D5D5 es este gris claro que se oscurece debido al fondo. Afecta a esta zona de las letras del menú superior. El color #D5D5D5 es este gris claro que se oscurece debido al fondo.

48 Koldo Parra de la Horra48 Análisis del código(5) Main Menú Link Color Además se puede cambiar el tamaño de la fuente que originalmente es de 14 px. Veamos el efecto cuando cambiamos el tamaño a 18 px. y el color a un verde manzana #99FF33 Además se puede cambiar el tamaño de la fuente que originalmente es de 14 px. Veamos el efecto cuando cambiamos el tamaño a 18 px. y el color a un verde manzana #99FF33 Se observa que cambia el color y aumenta el tamaño de la letra.

49 Koldo Parra de la Horra49 Análisis del código(5) Main Menú Link Color En esa misma zona: En esa misma zona: Observa la línea que define el “padding. ¿Qué significa? Es el margen o distancia desde el marco que contiene la zona hasta donde empieza el contenido, ya sea una imagen o un texto. Para acordarse del orden en que se establecen los valores hay un truco que consiste en acordarse de la palabra TRouBLe. Cuyas consonantes, TRBL, siguen el mismo orden que las propiedades margin y padding, si tenemos en cuenta que T = top, R = right, B = bottom y L = left T R B L

50 Koldo Parra de la Horra50 Análisis del código(5) Main Menú Link Color Así que sustituyo en la carpeta “images” la imagen topmenu.jpg por otra topmenu2.jpg y cambio el código: Así que sustituyo en la carpeta “images” la imagen topmenu.jpg por otra topmenu2.jpg y cambio el código: Modificar la posición de esta imagen es complicado. Resulta más sencillo añadirle un trozo transparente por encima que la alargue 80 px. (la diferencia entre el padding top original de 40 y el final de 120 px). Modificar la posición de esta imagen es complicado. Resulta más sencillo añadirle un trozo transparente por encima que la alargue 80 px. (la diferencia entre el padding top original de 40 y el final de 120 px).

51 Koldo Parra de la Horra51 Análisis del código(5) Main Menú Link Color Es la misma imagen pero le he añadido 80 px. transparentes en la parte de arriba Es la misma imagen pero le he añadido 80 px. transparentes en la parte de arriba topmenu.jpg topmenu2.jpg 1x120 px1x 200 px Así dejamos espacio por arriba para un banner. Más tarde mostraré como insertar una o varias imágenes sobre ese fondo negro.

52 Koldo Parra de la Horra52 Análisis del código(6) Section Table Es una zona de código de poco interés: Es una zona de código de poco interés: Seguramente tenga significado, pero no alcanzo a deducirlo: Seguramente tenga significado, pero no alcanzo a deducirlo:

53 Koldo Parra de la Horra53 Análisis del código(7) Layout Esta es la parte del código donde se definen que espacio de la página ocupa cada zona de contenido. Es por tanto el lugar donde podremos configurar el tamaño que van a ocupar los módulos de Joomla. Esta es la parte del código donde se definen que espacio de la página ocupa cada zona de contenido. Es por tanto el lugar donde podremos configurar el tamaño que van a ocupar los módulos de Joomla. Por ejemplo, bgtop es el rectángulo negro superior sobre el que aparece el menú superior. El código de color #181818 corresponde a este gris muy oscuro:

54 Koldo Parra de la Horra54 Análisis del código(7) Layout Y en la siguiente línea, el bgbottom de color #989898 corresponde a un gris más claro:

55 Koldo Parra de la Horra55 Análisis del código(7) Layout Corresponden respectivamente a: Corresponden respectivamente a: #181818 (gris oscuro) bgtop 989898 (gris claro) bgbottom

56 Koldo Parra de la Horra56 Análisis del código(7) Layout Esta zona define: Esta zona define: Que la anchura total de la página es de 1060 px y que el borde gris de alrededor ocupa un 5%. El 95% restante “wrapper” es la parte de la página que tiene contenidos.

57 Koldo Parra de la Horra57 Análisis del código(7) Layout Vamos a cambiar 1060 px. por 1000 y a reducir el wrapper al 90% además cambiaremos el gris oscuro por un rojo #FF0000 y el gris claro por un blanco puro #FFFFFF: Vamos a cambiar 1060 px. por 1000 y a reducir el wrapper al 90% además cambiaremos el gris oscuro por un rojo #FF0000 y el gris claro por un blanco puro #FFFFFF: La página es más estrecha. Los márgenes laterales son más anchos. El encabezado tiene fondo rojo y el fondo lateral e inferior es blanco

58 Koldo Parra de la Horra58 Análisis del código(8) User3 Si bajamos un poco más llegamos a la parte que define la zona “User3”, que es la zona del menú superior: Si bajamos un poco más llegamos a la parte que define la zona “User3”, que es la zona del menú superior: La anchura que ocupa el menú es 600 px. de los 1060 px. totales que ocupa la zona negra superior. Está alineado a la derecha. El borde es blanco y tiene 5 px.

59 Koldo Parra de la Horra59 Análisis del código (8) User3 Si necesitamos añadir más entradas al menú superior habrá que aumentar la anchura de la zona. Veremos que pasa si la reducimos a 400 px. También vamos a reducir el marco de separación de 5 px a tan sólo 1px: Si necesitamos añadir más entradas al menú superior habrá que aumentar la anchura de la zona. Veremos que pasa si la reducimos a 400 px. También vamos a reducir el marco de separación de 5 px a tan sólo 1px: Algo que observamos es que el borde de separación y el marco exterior son más estrechos También podemos ver que las entradas de menú superior no caben en la zona y se descolocan.

60 Koldo Parra de la Horra60 Análisis del código (8) User3 Se hubiera podido cambiar el color de borde que es blanco #FFF por otro color, por ejemplo un dorado #FFCC00. Se hubiera podido cambiar el color de borde que es blanco #FFF por otro color, por ejemplo un dorado #FFCC00.

61 Koldo Parra de la Horra61 Análisis del código (9) Header Ahora voy a crear una zona, sobre el fondo negro, porque quiero insertar una imagen que incluya el logotipo del instituto, una foto y los datos del centro. Deberé adaptarme a la zona disponible que es de 1000 px de ancho y aproximadamente 180 px de alto. Deberé crear una imagen como esta: Ahora voy a crear una zona, sobre el fondo negro, porque quiero insertar una imagen que incluya el logotipo del instituto, una foto y los datos del centro. Deberé adaptarme a la zona disponible que es de 1000 px de ancho y aproximadamente 180 px de alto. Deberé crear una imagen como esta: Se trata de una imagen de 1000 px de ancho y 180 de alto con fondo transparente. Para mantener la transparencia es necesario guardarla en formato. PNG. Esta imagen se llama “bannermata.png”. Hay que manejar capas. Se trata de una imagen de 1000 px de ancho y 180 de alto con fondo transparente. Para mantener la transparencia es necesario guardarla en formato. PNG. Esta imagen se llama “bannermata.png”. Hay que manejar capas.

62 Koldo Parra de la Horra62 Análisis del código (9) Header ¿Pero, dónde la inserto?. Esta plantilla no tiene una zona logo definida. Es una plantilla gratuita y está “capada”. En la página Web del diseñador nos muestra este esquema de zonas de contenido, pero lo cierto es que la zona “header” no está descrita en el código. ¿Pero, dónde la inserto?. Esta plantilla no tiene una zona logo definida. Es una plantilla gratuita y está “capada”. En la página Web del diseñador nos muestra este esquema de zonas de contenido, pero lo cierto es que la zona “header” no está descrita en el código.

63 Koldo Parra de la Horra63 Análisis del código(9) User 3 Vamos a crearla. Lo que hago es copiar esta cadena de texto justo antes de la zona que define “User3”: Vamos a crearla. Lo que hago es copiar esta cadena de texto justo antes de la zona que define “User3”:#header{ background:#181818 url(../images/bannermatajove.png) top left no-repeat; } Es decir, aquí: Es decir, aquí:

64 Koldo Parra de la Horra64 Análisis del código(9) User 3 Obviamente hay que guardar la imagen “bannermatajove.png” dentro de la carpeta “images” de la plantilla. El resultado puede verse aquí: Obviamente hay que guardar la imagen “bannermatajove.png” dentro de la carpeta “images” de la plantilla. El resultado puede verse aquí:

65 Koldo Parra de la Horra65 Análisis del código (9) moduletable Seguimos hacia abajo en el código de la sección “Layout” y lo siguiente que llama la atención es esto: Seguimos hacia abajo en el código de la sección “Layout” y lo siguiente que llama la atención es esto: Este color #9CC4FF es el de los títulos de los menús del lado izquierdo (todos los módulos con sufijo “_menu”. Este color #CFCFCF es el color de fondo del módulo de registro.

66 Koldo Parra de la Horra66 Análisis del código (9) moduletable Color #9CC4FF (Azul claro) Color #CFCFCF (Gris claro)

67 Koldo Parra de la Horra67 Análisis del código (9) moduletable Para demostrarlo cambiamos: Para demostrarlo cambiamos: #FFFF00 es un amarillo fuerte #9900CC es un morado fuerte Vemos los títulos de los menús en amarillo y el módulo de registro con un fondo morado

68 Koldo Parra de la Horra68 Análisis del código (9) moduletable Si queremos cambiar los encabezados de los menús de la parte derecha hay que ir a esta parte del código: Si queremos cambiar los encabezados de los menús de la parte derecha hay que ir a esta parte del código: Por ejemplo cambiando ese color azul #2D66B8 a un Verde oscuro #006600 Apreciamos este cambio de color aquí:

69 Koldo Parra de la Horra69 Análisis del código (10) User 1, 2 y 3 Seguimos un poco más abajo en el código: Seguimos un poco más abajo en el código: Color #71A00B Color #D02E2E Color #71A10B bggreen.jpg bgred.jpg toph3.jpg

70 Koldo Parra de la Horra70 Análisis del código (10) User 1, 2 y 3 Seguimos un poco más abajo en el código: Seguimos un poco más abajo en el código: La imagen bggreen.jpg es el fondo del módulo “Últimas Noticias”. La imagen bgred.jpg es el fondo del módulo “Popular”. La imagen toph3.jpg es el fondo del módulo “Newflash” que aparece en la parte inferior.

71 Koldo Parra de la Horra71 Análisis del código(10) User 1,2 y 3 Por ejemplo vamos a cambiar la imagen toph3.jpg por otra toph4.jpg Por ejemplo vamos a cambiar la imagen toph3.jpg por otra toph4.jpg toph3.jpg Volveremos así el fondo del “Newflash” a morado toph4.jpg

72 Koldo Parra de la Horra72 Análisis del código (11) User 4 Definen el borde y el fondo del módulo “Buscar” con color azul Definen el borde y el fondo del módulo “Buscar” con color azul Si cambiamos el fondo a un amarillo #FFFF00, pero no cambiamos el borde sucede esto: El color 3B77CF es este azul Efectivamente, cambia el fondo del menú “Buscar”.

73 Koldo Parra de la Horra73Conclusiones La modificación de plantillas consiste en: La modificación de plantillas consiste en: Bien aprender lenguaje PHP y poder entender realmente lo que significa cada línea del código.Bien aprender lenguaje PHP y poder entender realmente lo que significa cada línea del código. O bien actuar de la manera que se ha hecho en esta presentación. Tener unas ideas básicas generales y realizar un ejercicio de ensayo y error, cambiando cosas y viendo que pasa. Se trata en buena medida de dar palos de ciego, pero generalmente se llega al resultado que se busca.O bien actuar de la manera que se ha hecho en esta presentación. Tener unas ideas básicas generales y realizar un ejercicio de ensayo y error, cambiando cosas y viendo que pasa. Se trata en buena medida de dar palos de ciego, pero generalmente se llega al resultado que se busca. Otra opción, si se dispone de suficiente nivel en programación en PHP es llegar incluso a la creación de nuestra propia plantilla partiendo de cero. Hay manuales de ayuda en la red. Otra opción, si se dispone de suficiente nivel en programación en PHP es llegar incluso a la creación de nuestra propia plantilla partiendo de cero. Hay manuales de ayuda en la red.

74 Koldo Parra de la Horra74 Análisis y modificación de una plantilla compleja para Joomla 1.5 Fin de la presentación