Análisis y modificación de
una plantilla compleja para
Joomla 1.5
Plantilla “Red Evolution” de Allium
Puedes obtener la plantilla “Redevo
Allium” aquí
Koldo Parra de la Horra
1
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.
 Como
siempre
se
recomienda
encarecidamente realizar pruebas con un
Joomla en local y después repetir todo el
proceso en remoto.

Koldo Parra de la Horra
2
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”.
 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”.

Koldo Parra de la Horra
3
Características de la plantilla(2)
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.

Koldo Parra de la Horra
4
Características de la plantilla(3)
Nos facilitan un
esquema con las
zonas
de
contenido.
 No es del todo
correcto, ya que
hay zonas que
simplemente no
existen

Koldo Parra de la Horra
5
Objetivos
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.
Koldo Parra de la Horra
6
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.
Koldo Parra de la Horra
7
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.
Para editar la plantilla vamos al gestor de plantillas,
seleccionamos la plantilla Redevo Allium y le damos a “Editar”.
Koldo Parra de la Horra
8
Acceder a la edición de la plantilla

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.
Koldo Parra de la Horra
9
Ayuda con los colores (1)

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.
Koldo Parra de la Horra
10
Ayuda con los colores (2)

También es interesante este PDF que te puedes descargar aquí:
tabla básica de colores RGB.pdf
Koldo Parra de la Horra
11
Análisis del código(1) Inicio

El template.css comienza así:
Parecen simples reseteos y configuraciones
generales.
Koldo Parra de la Horra
12
Análisis del código(2)
Fondo y fuentes (background color font size) y
textos no formateados (non paragrafh text colors)



La segunda y tercera zonas ya afectan a colores
y tamaños de letra.
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.
Koldo Parra de la Horra
13
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:
Koldo Parra de la Horra
14
Análisis del código(2)
Fondo y fuentes (background color font size) y
textos no formateados (non paragrafh text colors)

En este mismo fragmento de código podemos
cambiar el tipo y el tamaño del texto de los menús.
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.
Koldo Parra de la Horra
15
Análisis del código(2)
Fondo (background) y textos no formateados
(non paragrafh text colors)
 Y sucede esto:
Koldo Parra de la Horra
16
Análisis del código(2)
Fondo (background) y textos no formateados
(non paragrafh text colors)

Vamos a ver el efecto que supone cambiar los
valores en esta zona:

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.
Koldo Parra de la Horra
17
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.
Koldo Parra de la Horra
18
Análisis del código(3)
Encabezados (headings)

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.
Koldo Parra de la Horra
19
Análisis del código(3)
Encabezados (headings)
El color #5B8307 corresponde a este:
 El mismo color para los Links.

Koldo Parra de la Horra
20
Análisis del código(3)
Encabezados (headings)

Por ejemplo si cambiamos en la segunda línea
#5B6307 (verde) por #FF0000 (rojo). Pasa esto:
Koldo Parra de la Horra
21
Análisis del código(3)
Encabezados (headings)

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.
Koldo Parra de la Horra
22
Análisis del código(3)
Encabezados (headings)

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.
Koldo Parra de la Horra
23
Análisis del código(4)
Encabezados (headings)

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.
Koldo Parra de la Horra
24
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.
La zona hover tiene este texto:
Indica un color negro

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.
Koldo Parra de la Horra
25
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 segunda parte
afecta a los colores
de fondo de los
menús, al efecto
“hover”, etc..
Koldo Parra de la Horra
26
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.
Koldo Parra de la Horra
27
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.
Koldo Parra de la Horra
28
Análisis del código(5)
Main Menú Link Color

Un primer grupo
de imágenes son:
• “bggreen.jpg”
• “bgmenu.jpg”
• “bgred.jpg”

Corresponden a los
fondos debajo de
los menús y de los
módulos de
“Últimas noticias” y
de “Popular”.
Koldo Parra de la Horra
29
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:
• bggreen.jpg
 Está ampliada un 400% para ver el degradado
 Tamaño: 1 x 158 px
 Color verde en degradado
• bgmenu.jpg
 Es azul y más larga:
 Tamaño: 1 x 312 px.
• bgred.jpg
 Es exactamente igual de tamaño que la verde pero
en rojo. A tamaño original es así: 1 x 158 px.
Koldo Parra de la Horra
30
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.
 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.
Koldo Parra de la Horra
31
Análisis del código(5)
Main Menú Link Color


El resultado es este:
Apreciamos el defecto del color de fondo.
Fácilmente solucionable.
Ponemos color
violeta suave al
background.
#CDA9CB
Koldo Parra de la Horra
32
Análisis del código(5)
Main Menú Link Color

Solucionado
Koldo Parra de la Horra
33
Análisis del código(5)
Main Menú Link Color

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í:
Koldo Parra de la Horra
34
Análisis del código(5)
Main Menú Link Color

Podemos ver esas líneas aquí:
Koldo Parra de la Horra
35
Análisis del código(5)
Main Menú Link Color

Si ampliamos la imagen dot.gif en un 800% vemos:
• Tamaño: 3 x 1px
• Color azul en degradado de izquierda a derecha.
Koldo Parra de la Horra
36
Análisis del código(5)
Main Menú Link Color

Si ampliamos la imagen dot-v.png en un 800%
vemos:
• Color azul Tamaño: 1 x 4px
• Color degradado de blanco a negro en vertical.
Koldo Parra de la Horra
37
Análisis del código(5)
Main Menú Link Color

Si ampliamos la imagen dot.png en un 800%
vemos:
• Tamaño: 3 x 1px
• Color amarillo degradado hacia blanco.
Koldo Parra de la Horra
38
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:

Por ejemplo cambiando ese color azul por un
amarillo puro #FFFF00
dot.gif
dot2.gif
Koldo Parra de la Horra
39
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:
Koldo Parra de la Horra
40
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:
Koldo Parra de la Horra
41
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.
•
La original tiene unas dimensiones de 7 x 7 px
Koldo Parra de la Horra
42
Análisis del código(5)
Main Menú Link Color

Así que en el código cambiamos:
Koldo Parra de la Horra
43
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

Este color #487FD0 es este azul que aparece al pasar el
ratón. Vamos a cambiarlo por un naranja suave #FF9900
Koldo Parra de la Horra
44
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.
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
Koldo Parra de la Horra
45
Análisis del código(5)
Main Menú Link Color
Otro grupo de imágenes
son:
 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.
Koldo Parra de la Horra
46
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.

Afecta a esta zona de las letras del
menú superior. El color #D5D5D5
es este gris claro que se oscurece
debido al fondo.
Koldo Parra de la Horra
47
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
Se observa que cambia el color y
aumenta el tamaño de la letra.
Koldo Parra de la Horra
48
Análisis del código(5)
Main Menú Link Color

En esa misma zona:
T
L
B
R
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
Koldo Parra de la Horra
49
Análisis del código(5)
Main Menú Link Color


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).
Así que sustituyo en la carpeta “images” la imagen
topmenu.jpg por otra topmenu2.jpg y cambio el
código:
Koldo Parra de la Horra
50
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
Así dejamos espacio por arriba para un banner.
Más tarde mostraré como insertar una o varias
imágenes sobre ese fondo negro.
Koldo Parra de la Horra
topmenu.jpg
1x120 px
topmenu2.jpg
1x 200 px
51
Análisis del código(6)
Section Table


Es una zona de código de poco interés:
Seguramente tenga significado, pero no alcanzo
a deducirlo:
Koldo Parra de la Horra
52
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.
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:
Koldo Parra de la Horra
53
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:
Koldo Parra de la Horra
54
Análisis del código(7)

Layout
Corresponden respectivamente a:
#181818 (gris oscuro) bgtop
989898 (gris claro) bgbottom
Koldo Parra de la Horra
55
Análisis del código(7)

Layout
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.
Koldo Parra de la Horra
56
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:
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
Koldo Parra de la Horra
57
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:
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 .
Koldo Parra de la Horra
58
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:
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.
Koldo Parra de la Horra
59
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.
Koldo Parra de la Horra
60
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:

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.
Koldo Parra de la Horra
61
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.
Koldo Parra de la Horra
62
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”:
#header{
background:#181818 url(../images/bannermatajove.png) top left no-repeat;
}

Es decir, aquí:
Koldo Parra de la Horra
63
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í:
Koldo Parra de la Horra
64
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:
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.
Koldo Parra de la Horra
65
Análisis del código (9)
moduletable
Color #9CC4FF
(Azul claro)
Color #CFCFCF
(Gris claro)
Koldo Parra de la Horra
66
Análisis del código (9)

moduletable
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
Koldo Parra de la Horra
67
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:
Por ejemplo cambiando ese color azul
#2D66B8 a un Verde oscuro #006600
Apreciamos este cambio de color aquí:
Koldo Parra de la Horra
68
Análisis del código (10)

User 1, 2 y 3
Seguimos un poco más abajo en el código:
bggreen.jpg
bgred.jpg
toph3.jpg
Color #71A00B
Color #D02E2E
Color #71A10B
Koldo Parra de la Horra
69
Análisis del código (10)

User 1, 2 y 3
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.
Koldo Parra de la Horra
70
Análisis del código(10)

User 1,2 y 3
Por ejemplo vamos a cambiar la imagen toph3.jpg por otra
toph4.jpg
toph3.jpg
toph4.jpg
Volveremos así el fondo del “Newflash” a morado
Koldo Parra de la Horra
71
Análisis del código (11)

User 4
Definen el borde y el fondo del módulo “Buscar” con color azul
El color 3B77CF es este azul
Si cambiamos el fondo a un amarillo #FFFF00,
pero no cambiamos el borde sucede esto:
Efectivamente, cambia el fondo del menú “Buscar”.
Koldo Parra de la Horra
72
Conclusiones

La modificación de plantillas consiste en:
• 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.

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.
Koldo Parra de la Horra
73
Análisis y modificación de
una plantilla compleja para
Joomla 1.5
Fin de la presentación
Koldo Parra de la Horra
74
Descargar

Portal Web Matajove