Personaliza tu plantilla Joomla 1 5 Puedes obtener

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

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

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

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

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

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

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

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

Estructura de una plantilla (5) • templatedetails. xml Es un fichero xml que describe algunos detalles de la plantilla que son usados por Joomla! para mostrar información sobre la misma en el "administrador de plantillas del sitio". La estructura interna de dicho archivo: <? xml version="1. 0" encoding="iso-8859 -1" ? > - <mosinstall type="template"> <name>nombre_de_la_plantilla</name> <author>Nuestro_nombre</author> <copyright>This template, code and CSS is licenced under the Creative Commons Attribution-Non. Commercial-Share. Alike License. Design by nosotros_mismos</copyright> <author. Email>javier</author. Email> <author. Url>yomismo. es</author. Url> <version>1. 0</version> <description>Bonita descripción de nuestra plantilla, bla!!! </description> - <files> <filename>template_thumbnail. png</filename> <filename>index. php</filename> </files> <images /> - <css> <filename>css/template_css. css</filename> </css> Koldo Parra de la Horra 9 </mosinstall>

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

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

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

¿Qué podemos cambiar? ► 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 partir de la plantilla “dreamsquare 1. 5. zip”. Koldo Parra de la Horra 13

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

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

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

a) Cambio de Banners y Logos (2) ► Hay que hacer lo siguiente: 1. Localizar en la plantilla donde están las “Zonas de contenidos”, es decir, los marcos donde van ubicadas estas imágenes. Los nombres de las imágenes que ocupan esos lugares. Buscaremos en la carpeta “images”. El tamaño en píxeles de alto y de ancho de las imágenes. Construir unas imágenes con las mismas dimensiones y ponerles el mismo nombre de las originales. 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. 2. 3. 4. 5. Koldo Parra de la Horra 17

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

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

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

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

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

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

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

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

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

b) Cambio de colores en zonas y bordes (6) ► Para averiguar cualquier color en Hexadecimal (código RGB recomiendo esta página: http: //www. easycalculation. com/color-coder. php? hexcolor=5 B 8307&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 27

b) Cambio de colores en zonas y bordes (7) ► 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? Koldo Parra de la Horra 28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

d) Estilos de títulos, encabezados, menús, etc…(14) Cambiamos el color del borde estrecho de la izquierda por el naranja fuerte #FF 6600. 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 #00 CC 33 en lugar del negro que hay #000000. Cambiamos el color del fondo y del borde cuando pasamos el ratón por un naranja suave #FF 9900. Koldo Parra de la Horra 65

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

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

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

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

Personaliza tu plantilla Joomla 1. 5 Fin de la presentación Koldo Parra de la Horra 70