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

Koldo Parra de la HorraKoldo Parra de la Horra 11

Personaliza tu Personaliza tu plantilla Joomla plantilla Joomla

1.51.5

Puedes obtener plantillas Puedes obtener plantillas gratuitas gratuitas aquí

Koldo Parra de la Horra 2

Antes de empezarAntes de empezar

►Se recomienda realizar cualquier prueba Se recomienda realizar cualquier prueba en local. Una vez se ha comprobado que en local. Una vez se ha comprobado que la operación es factible se debe repetir en la operación es factible se debe repetir en remoto.remoto.

►Siempre debe imprimirse una copia Siempre debe imprimirse una copia original del código para poder revertir los original del código para poder revertir los cambios cuando el resultado no sea el cambios cuando el resultado no sea el buscado y se quiera recuperar el estado buscado y se quiera recuperar el estado anterior.anterior.


Dos posibilidades de Dos posibilidades de ediciónedición

A.A. Utilizar un programa de edición HTML Utilizar un programa de edición HTML y PHP en local y transferir por FTP las y PHP en local y transferir por FTP las modificaciones al remoto modificaciones al remoto (Sobrescribiendo archivos).(Sobrescribiendo archivos).

B.B. Editar directamente la plantilla en Editar directamente la plantilla en Joomla, desde el Back-End. Joomla, desde el Back-End. (Recomendado)(Recomendado)En ambos casos se recomienda

encarecidamente realizar pruebas con un Joomla en local y después repetir todo el

proceso en remoto


Edición avanzada de Edición avanzada de plantillasplantillas

►Obviamente lo ideal es ser capaces de programar en PHP. No obstante se pueden modificar bastantes aspectos de la plantilla Obviamente lo ideal es ser capaces de programar en PHP. No obstante se pueden modificar bastantes aspectos de la plantilla sin llegar a tanto.sin llegar a tanto.

►Se recomienda utilizar como programa de edición el Dreamweaver o en su defecto el Powerpoint. De ambos disponemos de 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.licencia de la Consejería.


Estructura de una Estructura de una plantilla (1)plantilla (1)

►Una plantilla se obtiene y Una plantilla se obtiene y se instala directamente se instala directamente en formato .ZIPen formato .ZIP

►Por tanto, no hace falta Por tanto, no hace falta descomprimirla, salvo descomprimirla, salvo que queramos modificar que queramos modificar algo.algo.



►Si vemos de qué archivos está formada:Si vemos de qué archivos está formada:

Una carpeta “css” Una carpeta “css” donde están las hojas donde están las hojas en cascada.en cascada.

Una carpeta “Images” Una carpeta “Images” que contiene las que contiene las imágenes.imágenes.

Una página index en Una página index en php.php.

Una imagen en Una imagen en miniatura de la miniatura de la plantilla.plantilla.

Un archivo .xml con los Un archivo .xml con los detalles de la plantilla.detalles de la plantilla.



►Las plantillas de Joomla se almacenan dentro de la carpeta Las plantillas de Joomla se almacenan dentro de la carpeta "/templates". Esta carpeta tiene la siguiente estructura y archivos:"/templates". Esta carpeta tiene la siguiente estructura y archivos:



►Veamos qué papel juega cada archivo: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 La hoja de estilos de nuestra plantilla. Su estructura es como la de cualquier hoja de css, ahora bien la gran cantidad de estilos de cualquier hoja de css, ahora bien la gran cantidad de estilos definidos hace que sea algo complejo su manejo. Es definidos hace que sea algo complejo su manejo. Es recomendable tener a mano alguna buena herramienta de recomendable tener a mano alguna buena herramienta de edición de hojas de estilo para modificarla sin volverse loco.edición de hojas de estilo para modificarla sin volverse loco.

• index.phpindex.phpEste fichero es la plantilla propiamente dicha. Nos adentraremos Este fichero es la plantilla propiamente dicha. Nos adentraremos mas en su contenido y estructura en el siguiente punto. mas en su contenido y estructura en el siguiente punto.

• template_thumbnail.pngtemplate_thumbnail.pngFoto miniatura de la plantilla.Foto miniatura de la plantilla.


Estructura de una Estructura de una plantilla (5)plantilla (5)• templatedetails.xmltemplatedetails.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: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:

<?xml version="1.0" encoding="iso-8859-1" ?><?xml version="1.0" encoding="iso-8859-1" ?>-- < <mosinstall type="="templatetemplate">"> <<name>>nombre_de_la_plantillanombre_de_la_plantilla</</name>> <<author>>Nuestro_nombreNuestro_nombre</</author>> <<copyright>>This template, code and CSS is licenced under the Creative Commons Attribution-NonCommercial-ShareAlike License. Design by nosotros_mismosThis template, code and CSS is licenced under the Creative Commons Attribution-NonCommercial-ShareAlike License. Design by nosotros_mismos</</copyright>> <<authorEmail>>javierjavier</</authorEmail>> <<authorUrl>>yomismo.esyomismo.es</</authorUrl>> <<version>>1.01.0</</version>> <<description>>Bonita descripción de nuestra plantilla, bla, bla!!!Bonita descripción de nuestra plantilla, bla, bla!!!</</description>>-- < <files>> <<filename>>template_thumbnail.pngtemplate_thumbnail.png</</filename>> <<filename>>index.phpindex.php</</filename>> </</files>> <<images /> />-- < <css>> <<filename>>css/template_css.csscss/template_css.css</</filename>> </</css>> </</mosinstall>>


Zonas de Contenidos (1)Zonas de Contenidos (1)

►También es También es importante importante conocer la forma conocer la forma en que las en que las plantillas de plantillas de Joomla Joomla organizan los organizan los contenidos de contenidos de sus módulos. Se sus módulos. Se llaman “Zonas llaman “Zonas de contenidos”.de contenidos”.


► Cada espacio dedicado a ubicar módulos recibe un Cada espacio dedicado a ubicar módulos recibe un nombre que lo identificará posteriormente en el nombre que lo identificará posteriormente en el "gestor de módulos": top, right, left, user1, user2... "gestor de módulos": top, right, left, user1, user2... . .

► Cada plantilla tiene sus propios "huecos" y los Cada plantilla tiene sus propios "huecos" y los ubica en posiciones diferentes. En ocasiones ubica en posiciones diferentes. En ocasiones reciben nombres similares, aunque cada plantilla reciben nombres similares, aunque cada plantilla puede seguir su propio esquema de posiciones de puede seguir su propio esquema de posiciones de módulos. Estas zonas están predefinidas en la módulos. Estas zonas están predefinidas en la plantilla y sólo pueden ser modificadas si tenemos plantilla y sólo pueden ser modificadas si tenemos conocimientos de programación en PHP, xHTML o conocimientos de programación en PHP, xHTML o CSS.CSS.

Zonas de Contenidos Zonas de Contenidos (2)(2)


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

Zonas de Contenidos Zonas de Contenidos (3)(3)


¿Qué podemos cambiar?¿Qué podemos cambiar?►Nos quedaremos en lo más básico:Nos quedaremos en lo más básico:

a) Imágenes de los Banners

b) Colores de zonas, bordes y fondos

c) Tipos de letra, tamaños y colores

d) Estilos de títulos, encabezados, menús, etc..

►Vamos a realizar modificaciones a Vamos a realizar modificaciones a partir de la plantilla “dreamsquare partir de la plantilla “dreamsquare 1.5.zip”.1.5.zip”.


La plantilla originalLa plantilla original►Partimos de esta plantilla:Partimos de esta plantilla:

Si la descomprimimos,

tenemos esto


La plantilla originalLa plantilla original► Suele ser útil ir a la Web del fabricante. En este caso: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.


a)a) Cambio de Banners y Logos Cambio de Banners y Logos (1)(1)

►Analizando la plantilla una vez instalada vemos:Analizando la plantilla una vez instalada vemos:

Zona para Logo

Zona para Banner o imagen principal


► Hay que hacer lo siguiente:Hay que hacer lo siguiente:1.1. Localizar en la plantilla donde están las “Zonas de contenidos”, es decir, los marcos donde van ubicadas estas imágenes.Localizar en la plantilla donde están las “Zonas de contenidos”, es decir, los marcos donde van ubicadas estas imágenes.

2.2. Los nombres de las imágenes que ocupan esos lugares. Buscaremos en la carpeta “images”.Los nombres de las imágenes que ocupan esos lugares. Buscaremos en la carpeta “images”.

3.3. El tamaño en píxeles de alto y de ancho de las imágenes.El tamaño en píxeles de alto y de ancho de las imágenes.

4.4. Construir unas imágenes con las mismas dimensiones y ponerles el mismo nombre de las originales.Construir unas imágenes con las mismas dimensiones y ponerles el mismo nombre de las originales.

5.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.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.



►En nuestro caso vamos a cambiar esta imagen En nuestro caso vamos a cambiar esta imagen por esta:por esta:

►Y este logo por este otro:Y este logo por este otro:

898 x 160 píxeles a 72 ppp

109 x 70 píxeles a 72 ppp



►Si entramos en la carpeta “images” vemos todas las imágenes Si entramos en la carpeta “images” vemos todas las imágenes de la plantilla. Las dos que nos interesan son estas.de la plantilla. Las dos que nos interesan son estas.

►Para conocer sus características las abrimos con el Gimp2.Para conocer sus características las abrimos con el Gimp2.



► Simplemente ponemos el mismo nombre a nuestras fotos y las Simplemente ponemos el mismo nombre a nuestras fotos y las ponemos aquí sobrescribiendo las antiguas. Evidentemente ponemos aquí sobrescribiendo las antiguas. Evidentemente luego habrá que hacerlo en remoto por luego habrá que hacerlo en remoto por FTP. La ruta será: ruta será: “joomla local\templates\dreamsquare\images”“joomla local\templates\dreamsquare\images”



b)b) Cambio de colores en Cambio de colores en zonas y bordes (1)zonas y bordes (1)

► Si vamos a la carpeta “images”, veremos algunas imágenes Si vamos a la carpeta “images”, veremos algunas imágenes de este tipo:de este tipo:

Estas imágenes configuran los bordes y fondos, aspecto de Estas imágenes configuran los bordes y fondos, aspecto de los menús, etc…los menús, etc…



► Si abrimos una de estas imágenes con un editor vemos Si abrimos una de estas imágenes con un editor vemos que se trata de simples barras o puntos.que se trata de simples barras o puntos.

► La imagen sobre la plantilla se forma a base de repetir La imagen sobre la plantilla se forma a base de repetir estas barras x veces.estas barras x veces.

En este caso, la imagen “bg.jpg” (la primera) tiene 1 píxel de ancho por 400 de

alto



► Ampliando la imagen a un 400% podemos ver un Ampliando la imagen a un 400% podemos ver un ligero degradado de gris oscuro a gris claro. (se ligero degradado de gris oscuro a gris claro. (se ha cortado la barra en cuatro partes).ha cortado la barra en cuatro partes).



► ¿Dónde tenemos esta imagen en la plantilla? ¿Cuál es su función?.¿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 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” veces. Si abrimos las hoja de estilos en cascada “template.css” vemos:vemos:



► 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.



► 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.



► Vamos a hacer dos pruebas:a)¿Qué pasa si cambiamos el código #434343 por el blanco “FFFFFF”?

b) ¿Qué pasará cuando sustituyamos la imagen “bg.jpg” por otra de las mismas dimensiones pero en tonos verdes?



► 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.



► Nos aparece la ventana de edición de la Nos aparece la ventana de edición de la plantilla seleccionada. Aquí podemos optar plantilla seleccionada. Aquí podemos optar por editar la página HTML o la CSS.por editar la página HTML o la CSS.



► En cualquier caso nos aparece un editor de código similar En cualquier caso nos aparece un editor de código similar al del Dreamweaver o Frontpage, con la diferencia de que al del Dreamweaver o Frontpage, con la diferencia de que aquí estaremos actuando directamente sobre los archivos aquí estaremos actuando directamente sobre los archivos de la plantilla en el lugar de la instalación.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.



► Si optamos por editar el CSS debemos elegir cual. Si optamos por editar el CSS debemos elegir cual. En este caso sólo hay unaEn este caso sólo hay una

► Seleccionamos y clic en “Editar”.Seleccionamos y clic en “Editar”.



► Nos aparece un editor como este:Nos aparece un editor como este:

Es la misma zona de código que veíamos antes con Frontpage.



► Por ejemplo, vamos a ver el efecto de modificar Por ejemplo, vamos a ver el efecto de modificar esta línea del código, pasando el color de fondo esta línea del código, pasando el color de fondo “474747” a blanco puro “FFFFFF”.“474747” a blanco puro “FFFFFF”.



► Ha cambiado el color de fondo, pee4ro la Ha cambiado el color de fondo, pee4ro la parte de arriba está ocupada por la imagen parte de arriba está ocupada por la imagen “bg.jpg” que se repite x veces.“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.



1.1. Voy a la ruta D:\Voy a la ruta D:\joomla local\joomla local\templates\templates\dreamsquare\dreamsquare\imagesimages

2.2. Copio la imagen Copio la imagen bgverde.jpgbgverde.jpg

3.3. Elimino la imagen Elimino la imagen bg.jpgbg.jpg

4.4. Cambio el nombre Cambio el nombre de bgverde.jpg a de bgverde.jpg a bg.jpgbg.jpg

5.5. Observo cómo Observo cómo cambia la plantilla.cambia la plantilla.



El efecto obtenido es este:El efecto obtenido es este:



► De igual manera se puede proceder con el resto de De igual manera se puede proceder con el resto de colores de fondo. El nombre del archivo, su color y un colores de fondo. El nombre del archivo, su color y un vistazo al aspecto de la página nos dan pistas sobre la vistazo al aspecto de la página nos dan pistas sobre la posición que ocupa. Luego sólo nos resta cambiarla por posición que ocupa. Luego sólo nos resta cambiarla por otra con el color que nos interese. Por ejemplo:otra con el color que nos interese. Por ejemplo:

• Si el nombre lleva Si el nombre lleva “bg” suele “bg” suele corresponder a un corresponder a un fondo (Background), fondo (Background), por ejemplo: por ejemplo: “logo_bg.jpg” es el “logo_bg.jpg” es el fondo de detrás del fondo de detrás del logo. Vamos a abrirlo logo. Vamos a abrirlo para ver que aspecto para ver que aspecto tiene.tiene.



► Abriendo la imagen “logo_bg.jpg con Gimp vemos que 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, 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 con la parte de arriba en negro degradado a gris y la parte de abajo gris claro.parte de abajo gris claro.

Por el nombre y el color sospecho que ocupa esta zona, detrás del logo.



► Puedo localizar la línea de texto que corresponde a la Puedo localizar la línea de texto que corresponde a la zona de esa imagen.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.



► Y se ve el cambio aquí:Y se ve el cambio aquí:



► Por último, si queremos que el logo nos quede mejor Por último, si queremos que el logo nos quede mejor colocado sobre el fondo del área hay que modificar los colocado sobre el fondo del área hay que modificar los valores del margen en esta línea:valores del margen en esta línea:

40 px

50 px

Establece el margen entre el fondo y la

imagen.



► Vamos a cambiar estos valores por 20 y 20:Vamos a cambiar estos valores por 20 y 20:

► Para acabar de ajustar podríamos reducir el Para acabar de ajustar podríamos reducir el tamaño de la zona que ocupa el logo “Logoarea” tamaño de la zona que ocupa el logo “Logoarea” (136 x 203 px) o poner un logo ligeramente más (136 x 203 px) o poner un logo ligeramente más grande, o jugar con ambos valores, reajustar los grande, o jugar con ambos valores, reajustar los márgenes, etc… márgenes, etc…



► El color de fondo de la zona central:El color de fondo de la zona central:

► Para que se note la diferencia, voy a cambiar el Para que se note la diferencia, voy a cambiar el color de fondo blanco por un verde chillón color de fondo blanco por un verde chillón #33CC00#33CC00



► El resultado obtenido:El resultado obtenido:



► Si queremos cambiar el color del módulo “Buscar” hay Si queremos cambiar el color del módulo “Buscar” hay que ir a esta zona de código:que ir a esta zona de código:

Originalmente blanco podemos cambiarlo a morado #9900FF



► Si queremos cambiar el color del módulo “Buscar” hay Si queremos cambiar el color del módulo “Buscar” hay que ir a esta zona de código:que ir a esta zona de código:


c)c) Cambio de tipos, tamañosCambio de tipos, tamaños y colores de letra(1) y colores de letra(1)

► Los tipos, tamaños y colores de letra se definen en Los tipos, tamaños y colores de letra se definen en cada zona de contenidos: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.



► Se percibe así en la página: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.



► Qué sucederá si cambiamos estos valores en el editor?.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.



► Podemos apreciar los cambios: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.


d)d) Estilos de títulos, Estilos de títulos, encabezados, menús, etc…(1)encabezados, menús, etc…(1)

► Vamos a centrarnos en este Vamos a centrarnos en este encabezado:encabezado:

Que queda definido en Que queda definido en este trozo de código:este trozo de código:

Altura del rectánguloAltura del rectánguloColor del textoColor del textoTamaño del textoTamaño del textoMargen entre el borde y el textoMargen entre el borde y el textoColor azul de fondoColor azul de fondo



► Simplemente para ver los cambios vamos a Simplemente para ver los cambios vamos a modificar: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.



► El resultado es:El resultado es:



► El color #8f0E0E es el color granate de El color #8f0E0E es el color granate de los enlaces en los módulos laterales y los enlaces en los módulos laterales y en los módulos de “Ultimas Noticias” y en los módulos de “Ultimas Noticias” y “Popular” que aparecen abajo.“Popular” que aparecen abajo.

► Se definen en esta línea de código Se definen en esta línea de código (justo debajo de lo anterior):(justo debajo de lo anterior):



► Si lo cambiamos por rojo #FF0000, el Si lo cambiamos por rojo #FF0000, el efecto es este:efecto es este:



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 Si lo que queremos es cambiar los textos de los módulos, en el grupo de código siguiente módulos, en el grupo de código siguiente podemos hacerlo:podemos hacerlo:



► Vamos a modificar el tamaño del texto y el fondo Vamos a modificar el tamaño del texto y el fondo de debajo de los textos por un tono anaranjado de debajo de los textos por un tono anaranjado #FFCC33:#FFCC33:

Esto debemos hacerlo sustituyendo la Esto debemos hacerlo sustituyendo la imagen “sectiontableentry.jpg” que es imagen “sectiontableentry.jpg” que es blanco en degradado a gris por otra que blanco en degradado a gris por otra que llamaré “sectiontableentrynaranja.jpg” y llamaré “sectiontableentrynaranja.jpg” y que será blanco en degradado a naranja.que será blanco en degradado a naranja.



► Tras cambiar el código Tras cambiar el código correspondiente queda así:correspondiente queda así:

Además, se ha cambiado el tamaño del Además, se ha cambiado el tamaño del texto.texto.



► Justo debajo, vemos la Justo debajo, vemos la definición de los definición de los botones:botones:

Ese color #9ABC57 es Ese color #9ABC57 es este verde manzana.este verde manzana.


d)d) Estilos de títulos, Estilos de títulos, encabezados, menús, etc…encabezados, menús, etc…(10)(10)

► También hay que cambiar el color de fondo a otro También hay que cambiar el color de fondo a otro similar al de la nueva imagen. Por ejemplo en similar al de la nueva imagen. Por ejemplo en tonos dorados y naranja suave #f8dd80tonos 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 Hay que cambiar la imagen “button.jpg”, el color de fondo y el del bordede fondo y el del borde

button2.jpg

button.jpg



► También se puede También se puede cambiar el efecto cambiar el efecto “hover” sobre los “hover” sobre los botones.botones.

► Simplemente se repite Simplemente se repite el color para reducir la el color para reducir la transparencia.transparencia.

► El efecto es este:El efecto es este:



► El juego con los menús es muy curioso. Se trata El juego con los menús es muy curioso. Se trata de un fondo azul, con un efecto “hover” en gris de un fondo azul, con un efecto “hover” en gris claro inverso, es decir, tapa todo excepto una claro inverso, es decir, tapa todo excepto una línea y se destapa al pasar el ratón por encima línea y se destapa al pasar el ratón por encima dejando ver el fondo.dejando ver el fondo.



► Es cuestión de cambiar estos azules por otros Es cuestión de cambiar estos azules por otros colorescolores

► Por ejemplo, estos naranjas Por ejemplo, estos naranjas

Color de fondoColor de fondo Color de la línea vertical de la Color de la línea vertical de la izquierdaizquierda

#FF9900#FF9900 #FF6600#FF6600



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.



► También se puede cambiar el gris de los También se puede cambiar el gris de los encabezados de los menús. encabezados de los menús.

► Hay que sustituir la imagen Hay que sustituir la imagen h3.jpg que es estah3.jpg que es esta

ampliadas un 400%ampliadas un 400%

► Por otra como estaPor otra como esta



► Obtenemos esto:Obtenemos esto:



► Evidentemente se pueden modificar otras cosas Evidentemente se pueden modificar otras cosas de la plantilla, pero siempre es de la misma de la plantilla, pero siempre es de la misma manera. Hay que investigar y realizar cambios manera. Hay que investigar y realizar cambios en el código y ver que pasa. en el código y ver que pasa.

► Siempre debe imprimirse una copia original del Siempre debe imprimirse una copia original del código para poder revertir los cambios cuando el código para poder revertir los cambios cuando el resultado no sea el buscado y se quiera resultado no sea el buscado y se quiera recuperar el estado anterior.recuperar el estado anterior.

► Pero creo que la filosofía de modificación de Pero creo que la filosofía de modificación de plantillas queda suficientemente clara con lo plantillas queda suficientemente clara con lo visto hasta ahora. Si se quiere profundizar en la visto hasta ahora. Si se quiere profundizar en la adaptación de plantillas más complejas, adaptación de plantillas más complejas, recomiendo ver la presentación siguiente: recomiendo ver la presentación siguiente: “Modificación de una plantilla compleja en “Modificación de una plantilla compleja en Joomla 1.5”Joomla 1.5”

Koldo Parra de la HorraKoldo Parra de la Horra 7070

Fin de la presentaciónFin de la presentación

Personaliza tu Personaliza tu plantilla Joomla plantilla Joomla

1.51.5

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

Documents

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