Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes...

Koldo Parra de la HorraKoldo Parra de la Horra 11

Análisis y Análisis y modificación de una modificación de una plantilla compleja plantilla compleja para Joomla 1.5para Joomla 1.5

Puedes obtener la plantilla Puedes obtener la plantilla “Redevo Allium” “Redevo Allium” aquí

Plantilla “Red Evolution” de Plantilla “Red Evolution” de AlliumAllium


Antes de empezar Antes de empezar Antes de entrar en esta presentación se Antes de entrar en esta presentación se

recomienda leer primero la anterior recomienda leer primero la anterior titulada “Personalización de plantillas titulada “Personalización de plantillas sencillas”, dado que aparecen sencillas”, dado que aparecen conceptos básicos que en esta se dan conceptos básicos que en esta se dan por adquiridos.por adquiridos.

Como siempre se recomienda Como siempre se recomienda encarecidamente realizar pruebas con encarecidamente realizar pruebas con un Joomla en local y después repetir un Joomla en local y después repetir todo el proceso en remoto.todo el proceso en remoto.


Características de la Características de la plantilla plantilla

Es a plantilla utilizada Es a plantilla utilizada por el IES Mata Jove por el IES Mata Jove para su Web de Centro. para su Web de Centro. Se ha utilizado en la Se ha utilizado en la versión gratuita, que versión gratuita, que viene ”capada”.viene ”capada”.

La que se muestra es la La que se muestra es la versión de pago, más versión de pago, más completa (en la nuestra completa (en la nuestra no están definidas las no están definidas las zonas “header” ni zonas “header” ni “User5”. “User5”.


Características de la Características de la plantilla(2)plantilla(2)

Esta es la plantilla Esta es la plantilla gratuita “RedEvo” gratuita “RedEvo” sin modificar.sin modificar.

Se trata de una Se trata de una plantilla compleja plantilla compleja porque no define es porque no define es su código de forma su código de forma clara las zonas de clara las zonas de contenido.contenido.


Características de la Características de la plantilla(3)plantilla(3)

Nos facilitan un Nos facilitan un esquema con esquema con las zonas de las zonas de contenido.contenido.

No es del todo No es del todo correcto, ya correcto, ya que hay zonas que hay zonas que que simplemente simplemente no existenno existen


ObjetivosObjetivos

Nos planteábamos modificar la plantilla para Nos planteábamos modificar la plantilla para personalizarla y adaptarla a nuestro centro. personalizarla y adaptarla a nuestro centro. Para ello buscaremos:Para ello buscaremos:– Modificar colores de fondoModificar colores de fondo– Modificar tamaños y tipos de letraModificar tamaños y tipos de letra– Modificar encabezadosModificar encabezados– Insertar una imagen en la zona superior que Insertar una imagen en la zona superior que

incluya el logotipo y los datos del centro, pero sin incluya el logotipo y los datos del centro, pero sin tapar el menú superior.tapar el menú superior.


ProcedimientoProcedimiento

Para ello podemos emplear el editor de Para ello podemos emplear el editor de plantillas del propio Joomla, o bien plantillas del propio Joomla, o bien utilizar un editor específico (Frontpage o utilizar un editor específico (Frontpage o Dreamweaver).Dreamweaver).

Iremos analizando el código del archivo Iremos analizando el código del archivo “template.css”, para ver a qué afecta “template.css”, para ver a qué afecta cada fragmento de código y qué y cómo cada fragmento de código y qué y cómo se puede cambiar.se puede cambiar.


Acceder a la edición de la Acceder a la edición de la plantillaplantilla

A diferencia de la presentación anterior en este caso A diferencia de la presentación anterior en este caso emplearé exclusivamente el editor de plantillas del emplearé exclusivamente el editor de plantillas del propio Joomla. Recuerdo que conviene hacer las propio Joomla. Recuerdo que conviene hacer las pruebas en local antes de cualquier modificación en pruebas en local antes de cualquier modificación en remoto, para evitar problemas. remoto, para evitar problemas.

Para editar la plantilla vamos al gestor de plantillas, Para editar la plantilla vamos al gestor de plantillas, seleccionamos la plantilla Redevo Allium y le damos a seleccionamos la plantilla Redevo Allium y le damos a “Editar”.“Editar”.


Acceder a la edición de la Acceder a la edición de la plantillaplantilla

Aquí hacemos clic sobre editar CSS. Aquí hacemos clic sobre editar CSS.

De las hojas en cascada, empezaremos por editar el De las hojas en cascada, empezaremos por editar el template y dejaremos para después el CSS de los template y dejaremos para después el CSS de los menús.menús.


Ayuda con los colores Ayuda con los colores (1)(1)

Para averiguar cualquier color en Hexadecimal (código Para averiguar cualquier color en Hexadecimal (código RGB recomiendo esta página: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.


Ayuda con los colores Ayuda con los colores (2)(2)

También es interesante este PDF que te puedes También es interesante este PDF que te puedes descargar aquí: descargar aquí: tabla básica de colores RGB.pdf


Análisis del código(1) Análisis del código(1) InicioInicio

El template.css comienza así:El template.css comienza así:

Parecen simples reseteos y Parecen simples reseteos y configuraciones generales.configuraciones generales.


Análisis del código(2)Análisis del código(2)Fondo y fuentes (background color font Fondo y fuentes (background color font

size) y textos no formateados (non size) y textos no formateados (non paragrafh text colors) paragrafh text colors)

La primera parte se refiere al color de La primera parte se refiere al color de fondo “background” #FFFFFF que es fondo “background” #FFFFFF que es blanco, al tipo de fuente por defecto que es blanco, al tipo de fuente por defecto que es Arial y al tamaño por defecto que es 12 pxArial y al tamaño por defecto que es 12 px

Estos deben ser los colores por defecto y Estos deben ser los colores por defecto y tamaño de letra por defecto para zonas sin tamaño de letra por defecto para zonas sin asignación específica. Artículos y asignación específica. Artículos y subtítulos.subtítulos.

La segunda y tercera zonas ya afectan a La segunda y tercera zonas ya afectan a colores y tamaños de letra.colores y tamaños de letra.


Análisis del código(2)Análisis del código(2)Fondo (background) y textos no Fondo (background) y textos no

formateados (non paragrafh text colors) formateados (non paragrafh text colors)

Ese fondo blanco sólo se percibe abajo del Ese fondo blanco sólo se percibe abajo del todo. Si lo cambiáramos por rojo #FF0000 todo. Si lo cambiáramos por rojo #FF0000 pasaría esto:pasaría esto:


Análisis del código(2)Análisis del código(2)Fondo y fuentes (background color font Fondo y fuentes (background color font

size) y textos no formateados (non size) y textos no formateados (non paragrafh text colors) paragrafh text colors)

Para verlo he cambiado Para verlo he cambiado el tamaño de la fuente a el tamaño de la fuente a 30 px en lugar de 12 y 30 px en lugar de 12 y el tipo de letra de Arial a el tipo de letra de Arial a Tahoma.Tahoma.

En este mismo fragmento de código podemos En este mismo fragmento de código podemos cambiar el tipo y el tamaño del texto de los cambiar el tipo y el tamaño del texto de los menús.menús.



formateados (non paragrafh text colors) formateados (non paragrafh text colors) Y sucede esto:Y sucede esto:




Hemos cambiado el color #333 (en hexadecimal #030303 es un Hemos cambiado el color #333 (en hexadecimal #030303 es un negro no puro) a rojo #FF0000, y el tamaño lo hemos aumentado de negro no puro) a rojo #FF0000, y el tamaño lo hemos aumentado de 12 px a 16 px. 12 px a 16 px.

Vamos a ver el efecto que supone cambiar Vamos a ver el efecto que supone cambiar los valores en esta zona:los valores en esta zona:




Vemos que Vemos que afecta a afecta a todos los todos los textos textos excepto excepto encabezadoencabezados, títulos y s, títulos y menús que menús que permanecepermanecen igual.n igual.


Análisis del código(3)Análisis del código(3)Encabezados (headings) Encabezados (headings)

En el ”headings” se definen los encabezados. En el ”headings” se definen los encabezados. Tipo de letra y color. Tipo de letra y color.

Debajo aparece “Link Text Colors” que Debajo aparece “Link Text Colors” que evidentemente define el color de los evidentemente define el color de los enlaces de texto. enlaces de texto.


Análisis del Análisis del código(3)código(3)

Encabezados (headings) 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.



Encabezados (headings) Encabezados (headings) Por ejemplo si cambiamos en la segunda línea Por ejemplo si cambiamos en la segunda línea

#5B6307 (verde) por #FF0000 (rojo). Pasa #5B6307 (verde) por #FF0000 (rojo). Pasa esto:esto:



Encabezados (headings) Encabezados (headings) También tenemos aquí definidos el tamaño y También tenemos aquí definidos el tamaño y

tipo de fuentes de los encabezados:tipo de fuentes de los encabezados:

Si cambiamos 21 por Si cambiamos 21 por 50 en la 1ª línea pasa 50 en la 1ª línea pasa esto. Lo que nos esto. Lo que nos indica que H1 es el indica que H1 es el estilo del título estilo del título principal.principal.



Encabezados (headings) Encabezados (headings) Si cambiamos en la Si cambiamos en la

segunda línea 18 px segunda línea 18 px por 40 pasa esto:por 40 pasa esto:

Lo que nos indica Lo que nos indica que el parámetro H2 que el parámetro H2 es para los títulos es para los títulos secundarios o títulos secundarios o títulos de los artículos.de los artículos.



Encabezados (headings) Encabezados (headings) Si cambiamos en la tercera línea 14 px por 30 Si cambiamos en la tercera línea 14 px por 30

pasa esto: pasa esto:

Lo que nos indica Lo que nos indica que el parámetro que el parámetro H3 es para los H3 es para los títulos de los títulos de los módulosmódulos

Podríamos haber Podríamos haber cambiado la cambiado la fuente “Georgia fuente “Georgia por otra y por otra y afectaría al tipo afectaría al tipo de letra de estosde letra de estos títulos. títulos.


Análisis del código(4)Análisis del código(4)Efectos sobre los menús (hover) Efectos sobre los menús (hover)

El ”hover” afecta a lo que sucede sobre los El ”hover” afecta a lo que sucede sobre los enlaces de menú cuando pasamos por encima enlaces de menú cuando pasamos por encima el ratón.el ratón.

Al cambiarlo a #FFF Al cambiarlo a #FFF (blanco), vemos que al (blanco), vemos que al pasar el ratón por el menú pasar el ratón por el menú superior, en lugar de superior, en lugar de aparecer la barra negra aparecer la barra negra verdosa sobre negro, verdosa sobre negro, aparece la barra verdosa aparece la barra verdosa sobre blanco.sobre blanco.

La zona hover tiene este texto:Indica un color negro


Análisis del código(5)Análisis del código(5)Main Menú Link Colors Main Menú Link Colors

La primera zona La primera zona señalada señalada corresponde al corresponde al color de las letras color de las letras de los menús de los menús (menú izquierdo). (menú izquierdo). Inicialmente Inicialmente blancas #FFF.blancas #FFF.

La segunda parte La segunda parte afecta a los colores afecta a los colores de fondo de los de fondo de los menús, al efecto menús, al efecto “hover”, etc..“hover”, etc..


Análisis del código(5)Análisis del código(5)Main Menú Link Colors Main Menú Link Colors

Vamos a cambiar Vamos a cambiar el color de los el color de los textos de los textos de los menús a rojo menús a rojo #FF0000.#FF0000.


Análisis del código(5)Análisis del código(5)Main Menú Link Color Main Menú Link Color

Por ello debemos empezar analizando qué Por ello debemos empezar analizando qué imágenes hay en la carpeta “images” y que imágenes hay en la carpeta “images” y que función tiene cada una de ellas.función tiene cada una de ellas.



Un primer grupo Un primer grupo de imágenes de imágenes son:son:• ““bggreen.jpg”bggreen.jpg”• ““bgmenu.jpg”bgmenu.jpg”• ““bgred.jpg”bgred.jpg”

Corresponden a Corresponden a los fondos los fondos debajo de los debajo de los menús y de los menús y de los módulos de módulos de “Últimas “Últimas noticias” y de noticias” y de “Popular”.“Popular”.



Si las abrimos con un programa de edición de Si las abrimos con un programa de edición de imágenes podremos observar que:imágenes podremos observar que:

• bggreen.jpg bggreen.jpg Está ampliada un 400% para ver el Está ampliada un 400% para ver el

degradadodegradadoTamaño: 1 x 158 pxTamaño: 1 x 158 pxColor verde en degradadoColor verde en degradado

• bgmenu.jpg bgmenu.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.jpgEs exactamente igual de tamaño que la Es exactamente igual de tamaño que la

verde pero en rojo. A tamaño original es así: verde pero en rojo. A tamaño original es así: 1 x 158 px.1 x 158 px.



Es evidente que cambiando estos colores por otros y Es evidente que cambiando estos colores por otros y sustituyendo en la plantilla el nombre de las originales sustituyendo en la plantilla el nombre de las originales y sobrescribiéndolas cambiará el fondo de los menús.y sobrescribiéndolas cambiará el fondo de los menús.

Como ejemplo vamos a cambiar bggreen.jpg por Como ejemplo vamos a cambiar bggreen.jpg por bgviolet.jpgbgviolet.jpg

El fondo de debajo se va a mantener verde, para que no se note deberíamos cambiarlo por un violeta suave #CDA9CB.



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.Fácilmente solucionable.

Ponemos colorPonemos color

violeta suave alvioleta suave al

background.background.

#CDA9CB



SolucionadoSolucionado



Un segundo grupo de imágenes es este:Un segundo grupo de imágenes es este:

Se observa que son simples puntos. Estos Se observa que son simples puntos. Estos puntos repetidos x veces forman líneas puntos repetidos x veces forman líneas continuas o discontinuas. Las podemos ver continuas o discontinuas. Las podemos ver aquí:aquí:



Podemos ver esas líneas aquí:Podemos ver esas líneas aquí:



Si ampliamos la imagen dot.gif en un 800% Si ampliamos la imagen dot.gif en un 800% vemos: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.



Si ampliamos la imagen dot-v.png en un Si ampliamos la imagen dot-v.png en un 800% vemos: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.



Si ampliamos la imagen dot.png en un Si ampliamos la imagen dot.png en un 800% vemos:800% vemos:• Tamaño: 3 x 1pxTamaño: 3 x 1px• Color amarillo degradado hacia blanco.Color amarillo degradado hacia blanco.



A priori no se ve que función cumplen estas A priori no se ve que función cumplen estas imágenes en la plantilla. Únicamente podemos imágenes en la plantilla. Únicamente podemos investigar qué pasa en esta zona:investigar qué pasa en esta zona:

Por ejemplo cambiando ese color azul por un Por ejemplo cambiando ese color azul por un amarillo puro #FFFF00amarillo puro #FFFF00

dot.gifdot.gif dot2.gif dot2.gif



Se aprecia que las líneas que Se aprecia que las líneas que subrayan las entradas de subrayan las entradas de menú se vuelven amarillas:menú se vuelven amarillas:



En cuanto al papel de los archivos En cuanto al papel de los archivos “ident1.png”, “mainlevel.gif” y sublevel.gif “ident1.png”, “mainlevel.gif” y sublevel.gif está claro que tiene que ver con las viñetas está claro que tiene que ver con las viñetas de los menús:de los menús:



Por lo tanto, cambiando estas imágenes Por lo tanto, cambiando estas imágenes podremos cambiar la forma de las viñetas y podremos cambiar la forma de las viñetas y el color. Por ejemplo, vamos a sustituir esta el color. Por ejemplo, vamos a sustituir esta por otra viñeta distinta (redonda) y de color por otra viñeta distinta (redonda) y de color magenta #CC00FF.magenta #CC00FF.

• La original tiene unas dimensiones de 7 x 7 La original tiene unas dimensiones de 7 x 7 pxpx



Así que en el código cambiamos:Así que en el código cambiamos:



Otro aspecto sobre el que nos podemos fijar es el Otro aspecto sobre el que nos podemos fijar es el cambio de fondo al pasar el ratón por encima de un cambio de fondo al pasar el ratón por encima de un enlace de menú (hover). Esto viene definido en esta enlace de menú (hover). Esto viene definido en esta parte del código parte del código

Este color #487FD0 es este azul que aparece al Este color #487FD0 es este azul que aparece al pasar el ratón. Vamos a cambiarlo por un naranja pasar el ratón. Vamos a cambiarlo por un naranja suave #FF9900suave #FF9900



Como se puede ver, es sencillo cambiar Como se puede ver, es sencillo cambiar todas las opciones del aspecto de los menús.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



Otro grupo de Otro grupo de imágenes son:imágenes son:

Que sirven para Que sirven para conformar la parte de conformar la parte de abajo o “footer”abajo o “footer”

El “footer” se construye al final del código. El “footer” se construye al final del código. Aquí no merece la pena cambiar nada. Aquí no merece la pena cambiar nada.



La siguiente zona que vamos a analizar es el La siguiente zona que vamos a analizar es el mainlevel-nav dentro del MAIN MENU LINK mainlevel-nav dentro del MAIN MENU LINK COLOR.COLOR.

Afecta a esta zona de las letras Afecta a esta zona de las letras del menú superior. El color del menú superior. El color #D5D5D5 es este gris claro #D5D5D5 es este gris claro que se oscurece debido al que se oscurece debido al fondo.fondo.



Además se puede cambiar el tamaño de la fuente Además se puede cambiar el tamaño de la fuente que originalmente es de 14 px. Veamos el efecto que originalmente es de 14 px. Veamos el efecto cuando cambiamos el tamaño a 18 px. y el color a cuando cambiamos el tamaño a 18 px. y el color a un verde manzana #99FF33un verde manzana #99FF33

Se observa que cambia el color y aumenta el tamaño de la letra.



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

RB

L



Así que sustituyo en la carpeta “images” la Así que sustituyo en la carpeta “images” la imagen topmenu.jpg por otra topmenu2.jpg y imagen topmenu.jpg por otra topmenu2.jpg y cambio el código:cambio el código:

Modificar la posición de esta imagen es Modificar la posición de esta imagen es complicado. Resulta más sencillo añadirle un complicado. Resulta más sencillo añadirle un trozo transparente por encima que la trozo transparente por encima que la alargue 80 px. (la diferencia entre el alargue 80 px. (la diferencia entre el padding top original de 40 y el final de 120 padding top original de 40 y el final de 120 px).px).



Es la misma imagen pero le he Es la misma imagen pero le he añadido 80 px. transparentes en la añadido 80 px. transparentes en la parte de arribaparte de arriba

topmenu.jpg topmenu2.jpg

1x120 px 1x 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.


Análisis del código(6)Análisis del código(6)Section Table Section Table

Es Es una zona de código de poco una zona de código de poco interés:interés:

Seguramente tenga significado, pero no Seguramente tenga significado, pero no alcanzo a deducirlo:alcanzo a deducirlo:


Análisis del código(7) Análisis del código(7) Layout Layout

Esta es la parte del código donde se definen que Esta es la parte del código donde se definen que espacio de la página ocupa cada zona de contenido. espacio de la página ocupa cada zona de contenido. Es por tanto el lugar donde podremos configurar el Es por tanto el lugar donde podremos configurar el tamaño que van a ocupar los módulos de Joomla.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:



Y en la siguiente línea, el bgbottom de color #989898 corresponde a un gris más claro:



Corresponden respectivamente a:Corresponden respectivamente a:

#181818 (gris oscuro) bgtop

989898 (gris claro) bgbottom



Esta zona define:Esta zona define:

Que la anchura total de la página es de 1060 px y Que la anchura total de la página es de 1060 px y que el borde gris de alrededor ocupa un 5%. El que el borde gris de alrededor ocupa un 5%. El 95% restante “wrapper” es la parte de la página 95% restante “wrapper” es la parte de la página que tiene contenidos.que tiene contenidos.



Vamos a cambiar 1060 px. por 1000 y a reducir el Vamos a cambiar 1060 px. por 1000 y a reducir el wrapper al 90% además cambiaremos el gris oscuro wrapper al 90% además cambiaremos el gris oscuro por un rojo #FF0000 y el gris claro por un blanco puro por un rojo #FF0000 y el gris claro por un blanco puro #FFFFFF:#FFFFFF:

La página es La página es más estrecha. más estrecha. Los márgenes Los márgenes laterales son laterales son más anchos. El más anchos. El encabezado encabezado tiene fondo tiene fondo rojo y el fondo rojo y el fondo lateral e lateral e inferior es inferior es blancoblanco


Análisis del código(8) Análisis del código(8) User3 User3

Si bajamos un poco más llegamos a la parte Si bajamos un poco más llegamos a la parte que define la zona “User3”, que es la zona del que define la zona “User3”, que es la zona del menú superior:menú superior:

La anchura que ocupa el menú es 600 px. de los La anchura que ocupa el menú es 600 px. de los 1060 px. totales que ocupa la zona negra superior. 1060 px. totales que ocupa la zona negra superior. Está alineado a la derecha. El borde es blanco y Está alineado a la derecha. El borde es blanco y tiene 5 px .tiene 5 px .


Análisis del código (8) Análisis del código (8) User3 User3

Si necesitamos añadir más entradas al menú Si necesitamos añadir más entradas al menú superior habrá que aumentar la anchura de la superior habrá que aumentar la anchura de la zona. Veremos que pasa si la reducimos a 400 zona. Veremos que pasa si la reducimos a 400 px. También vamos a reducir el marco de px. También vamos a reducir el marco de separación de 5 px a tan sólo 1px: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 estrechosTambién podemos ver que las entradas de menú superior no caben en la zona y se descolocan.


Análisis del código (8) Análisis del código (8) User3 User3

Se hubiera podido cambiar el color de borde Se hubiera podido cambiar el color de borde que es blanco #FFF por otro color, por ejemplo que es blanco #FFF por otro color, por ejemplo un dorado #FFCC00.un dorado #FFCC00.


Análisis del código (9) Análisis del código (9) Header Header

Ahora voy a crear una zona, sobre el fondo negro, Ahora voy a crear una zona, sobre el fondo negro, porque quiero insertar una imagen que incluya el porque quiero insertar una imagen que incluya el logotipo del instituto, una foto y los datos del centro. logotipo del instituto, una foto y los datos del centro. Deberé adaptarme a la zona disponible que es de 1000 Deberé adaptarme a la zona disponible que es de 1000 px de ancho y aproximadamente 180 px de alto. px de ancho y aproximadamente 180 px de alto. Deberé crear una imagen como esta:Deberé crear una imagen como esta:

Se trata de una imagen de 1000 px de ancho y 180 de Se trata de una imagen de 1000 px de ancho y 180 de alto con fondo transparente. Para mantener la alto con fondo transparente. Para mantener la transparencia es necesario guardarla en formato. PNG. transparencia es necesario guardarla en formato. PNG. Esta imagen se llama “bannermata.png”. Hay que Esta imagen se llama “bannermata.png”. Hay que manejar capas.manejar capas.


Análisis del código (9) Análisis del código (9) Header Header

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


Análisis del código(9) Análisis del código(9) User User 33

Vamos a crearla. Lo que hago es copiar esta cadena de Vamos a crearla. Lo que hago es copiar esta cadena de texto justo antes de la zona que define “User3”:texto justo antes de la zona que define “User3”:

#header{ #header{

background:#181818 url(../images/bannermatajove.png) top left background:#181818 url(../images/bannermatajove.png) top left no-repeat;no-repeat;

}}

Es decir, aquí:Es decir, aquí:


Análisis del código(9) Análisis del código(9) User User 3 3

Obviamente hay que guardar la imagen Obviamente hay que guardar la imagen “bannermatajove.png” dentro de la carpeta “images” “bannermatajove.png” dentro de la carpeta “images” de la plantilla. El resultado puede verse aquí:de la plantilla. El resultado puede verse aquí:


Análisis del código (9) Análisis del código (9) moduletable moduletable

Seguimos hacia abajo en el código de la sección Seguimos hacia abajo en el código de la sección “Layout” y lo siguiente que llama la atención es esto:“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.



Color #9CC4FF(Azul claro)

Color #CFCFCF(Gris claro)



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



Si queremos cambiar los encabezados de Si queremos cambiar los encabezados de los menús de la parte derecha hay que ir los menús de la parte derecha hay que ir a esta parte del código:a esta parte del código:

Por ejemplo cambiando ese color azul #2D66B8 a un Verde oscuro #006600Apreciamos este cambio de color aquí:


Análisis del código (10) Análisis del código (10) User 1, 2 User 1, 2 y 3 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


Análisis del código (10) Análisis del código (10) User 1, 2 User 1, 2 y 3 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.


Análisis del código(10) Análisis del código(10) User User 1,2 y 3 1,2 y 3

Por ejemplo vamos a cambiar la imagen toph3.jpg por Por ejemplo vamos a cambiar la imagen toph3.jpg por otra toph4.jpgotra toph4.jpg

toph3.jpg

Volveremos así el fondo del “Newflash” a morado

toph4.jpg


Análisis del código (11) Análisis del código (11) User User 4 4

Definen el borde y el fondo del módulo “Buscar” con Definen el borde y el fondo del módulo “Buscar” con

color azulcolor 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”.


ConclusionesConclusiones

La modificación de plantillas consiste en:La modificación de plantillas consiste en:• Bien aprender lenguaje PHP y poder entender Bien aprender lenguaje PHP y poder entender

realmente lo que significa cada línea del código.realmente lo que significa cada línea del código.• O bien actuar de la manera que se ha hecho en O bien actuar de la manera que se ha hecho en

esta presentación. Tener unas ideas básicas esta presentación. Tener unas ideas básicas generales y realizar un ejercicio de ensayo y error, generales y realizar un ejercicio de ensayo y error, cambiando cosas y viendo que pasa. Se trata en cambiando cosas y viendo que pasa. Se trata en buena medida de dar palos de ciego, pero buena medida de dar palos de ciego, pero generalmente se llega al resultado que se busca.generalmente se llega al resultado que se busca.

Otra opción, si se dispone de suficiente nivel Otra opción, si se dispone de suficiente nivel en programación en PHP es llegar incluso a la en programación en PHP es llegar incluso a la creación de nuestra propia plantilla partiendo creación de nuestra propia plantilla partiendo de cero. Hay manuales de ayuda en la red.de cero. Hay manuales de ayuda en la red.


Análisis y Análisis y modificación de una modificación de una plantilla compleja plantilla compleja para Joomla 1.5para Joomla 1.5

Fin de la presentaciónFin de la presentación

Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes...

Documents

Transcript of Koldo Parra de la Horra1 Análisis y modificación de una plantilla compleja para Joomla 1.5 Puedes...