4 de mayo de 2009

Como cambiar el banner en la plantilla rhuk_milkyway de joomla

Esta es una entrada bastante técnica, así que si no estás interesado, no sigas.

Como en Malilla, en Villar estoy montando la web del centro (con un grupo de trabajo, y así nos certifican horas) con una plantilla del CMS joomla. Para simplificar el trabajo en ambos casos usé una de las plantillas que viene por defecto con la plataforma, denomindada rhuk_milkyway (ver imagen).
Una de las pegas de esta plantilla es que la imagen del banner es pequeña. Por un lado es estrecha, ya que a la derecha hay otro componente denominado flashnews que muestra noticias (lo hemos desactivado en las webs), y además es estrecho. Para modificarlo, se pueden seguir los siguientes pasos:
  1. Subir la imagen por ftp: lo mejor es dejarla en la carpeta donde están el resto de imágenes de la plantilla (.....\templates\rhuk_milkyway\images). Se puede poner el nombre que tiene el banner original (mw_joomla_logo.png) u otro distinto.
  2. Modificar la plantilla: dentro del menú de administración, ir a la opción de modificar plantillas (está en distintós sitios según la versión). Modificar la plantilla "template.css". Dentro de esta hoja de estilos, hay que buscar el div de nombre "logo", y cambiar sus atributos altura y anchura por los de la nueva imagen. Además, si se ha cambiado el nombre hay que indicarlo también. A mí me queda así (solo pongo lo que modifico):
    • div#logo {
      width: 771px;
      height: 155px;
      background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
      }
  3. Modificar también el div "header_r" aumentando el tamaño tanto como nos haya aumentado la imagen del banner.
    • div#header_r {
      height: 170px;
      }
  4. Una vez cambiado esto, el banner saldrá en grande y el menú superior debajo pero hay un descuadre con las imágenes. Hay que entrar en la carpeta ...templates\images\color (el color dependerá de cuál hayamos elegido para la plantilla, en mi caso blue). Hay tres imágenes que crean las esquinas y borde superior. Su tamaño está preparado para el baner pequeño. Hay que hacerlas editarlas para aumentarlas lo mismo que el banner. Así es como me queda a mí el lado izquierdo (el corto antes, el largo después):




Una vez modificadas las tres imágenes y subidas al servidor, ya podemos ver el resultado en la web del IES la Serranía.

4 comentarios:

Sergio dijo...

hey amigo,,,gracias muchas,, saludos

Anónimo dijo...

Lo mismo digo, gracias amigo, es lo que buscaba, sencillo y directo para un novato que tiene un proyecto como hobby, que trastear con css va mas alla de sus posibilidades, pero llegue perfectamente, probe y listo.
www.sudgalicia.com

Kris dijo...

Hola amigo interesante tu aporte, pero tengo una duda; deseo en el banner principal publicarlo en flash q se debe realizar.

Gracias de antemano.

Perro del desierto dijo...

Hola Kris. La verdad es que no lo sé.

Supongo que tendrás que cambiar el div del header o del logo para poner una animación flash. Si lo consigues, pon en otro comentario la solución.