Deseño de cabeceiras personalizadas en Drupal

Crear unha cabeceira personalizada para o sitio web

A cabeceira do sitio web está formada por defecto polo logotipo, o nome do sitio, eslogan, etc, cada un deles posicionado segundo a especificación do tema do sitio, que non podemos modificar.

Pero é posible deseñar unha cabeceira personalizada na que posicionamos os elementos de acordo a unha serie de layouts.

Neste exemplo concreto empregaremos un layout que divide a nosa cabeceira en 3 partes, con porcentaxes de ocupación do 25%, 50% e 25 % respectivamente para cada unha delas.

Crearase un bloque en cada unha das tres partes anteriores.

O resultado final será un bloque (minipanel) que situaremos na cabeceira.

Consultar a documentación:

• Activación do módulo Panels
• Creación dun Minipanel

Neste punto crearanse os bloques coas imaxes ou textos que se empregarán na nova cabeceira.

Os pasos a seguir serían os seguintes:

Como usuario admin:

• Crear un novo bloque Administrar » Construción do sitio » Bloques, Engadir un bloque chamado Cabeceira Esquerda. No corpo dese bloque insertar as imaxes do logo da xunta e do logo e-dixgal que están na carpeta de Ficheiros da tarefa nunha táboa centrada de 3 filas e 1 columna. (A segunda fila empregámola simplemente para deixar un pequeno espazo entre as imaxes). En cada imaxe facemos un hipervínculo co Obxetivo: Abrir vínculo nunha ventá nova e apuntando ás seguintes url's:

• logo da xunta ---->  http://www.edu.xunta.gal/portal/
• logo e-dixgal ---->  https://www.edu.xunta.es/espazoAbalar/espazo/e-dixgal

• Gardar o bloque.

1. Para facer que as imaxes se adapten mellor ao dispositivo no que se visualizan, podemos editar o bloque  e desactivando o texto enriquecido no corpo, cambiar no código o valor de width das imaxes por 80% e borrar a parte de height.

   <p>&nbsp;</p><table border="0" align="center"><tbody><tr><td><a href="%20http://www.edu.xunta.gal/portal/" target="_blank"><img style="vertical-align: middle;" src="/centros/sitiodemostra/en/system/files/u4/logoxunta.png" alt="logo xunta" width="80%" height="46" /></a></td></tr><tr><td style="text-align: center;"><a href="https://www.edu.xunta.es/espazoAbalar/espazo/e-dixgal" target="_blank"><img src="/centros/sitiodemostra/en/system/files/u4/edixgal.png" alt="e-dixgal" width="80%" height="43" /></a></td></tr></tbody></table>

2. Crear outro bloque co nome Nome do centro e engadir a imaxe chamada Nome do centro, centrada e co hipervínculo ao noso sitio web https://www.edu.xunta.gal/centros/cursoXX/ (no Obxectivo do hipervínculo deixar ningún).
   
3. Facer o mesmo que se indica no punto 1 para adaptar a imaxe a unha porcentaxe do espazo dispoñible (width ="80%").
4. Crear o bloque Cabeceira Dereita coa imaxe do logo de bibliotecas, tamén centrado, e co enlace a https://www.edu.xunta.es/biblioteca/blog/  (hipervínculo tamén con Obxectivo: Abrir vínculo nunha ventá nova).
5. Non repetir o punto 1 para esta imaxe porque é máis estreita e non é necesario.
6. Non é necesario facer visible ningún dos bloques creados.

Activar os módulos necesarios para crear un minipanel como se indica na documentación Activación do módulo Panels

Os pasos a seguir serían os seguintes:

Como usuario admin:

1. Crear un minipanel na ruta  Administrar » Construcción da páxina » Mini panels
   
   • Título administrativo: Cabeceira.
   • Nome: cabeceira   (este campo é obrigatorio)
2. Premer en continuar.
3. Na seguinte páxina de Contexto, non facer nada. Premer en continuar.
4. En Layout:
   • Escoller Categoría: Columns: 3
   • Marcar Three column 25/50/25
5. Premer en continuar.
6. En cada unha das columnas aparece unha roda dentada; premer nela e escoller Add content:
   • Na ventá emerxente escoller Miscelánea: amosaranse todos os bloques que temos na nosa páxina.
   • Engadir o bloque Cabeceira Esquerda na columna Left side
   • Engadir o bloque Nome do centro na columna Middle column
   • Engadir o bloque Cabeceira Dereita na columna Right side
7. Premer en Gardar para almacenar os cambios.
8. Os minipaneis crean automáticamente un bloque chamado Mini panel "nome do minipanel", neste caso Mini panel "Cabeceira".
9. Finalmente só resta facer visible o bloque situándoo na rexión Cabeceira da plantilla escollida. Neste caso farémolo na plantilla 0-Point.

NOTA:

Hai que comprobar que é visible e que quedou conforme ao noso gusto.

Tamén hai que ter en conta que cada plantilla se comporta de xeito distinto, non todas teñen unha rexión Encabezado, nin ocupa o mesmo espazo. Polo que primeiro que temos que facer é escoller a plantilla e crear o noso deseño para esa plantilla en particular.

Se se quere modificar algo basta con editar o bloque correspondente (na rexión de desactivados).

Pódese ver o resultado final no seguinte enlace http://www.edu.xunta.gal/centros/sitiodemostra/cabeceira

As imaxes deben tratarse cun editor de imaxes como pode ser Gimp, e unha vez as teñamos ao noso gusto, subilas á páxina web. Se nos interesa que as imaxes teñan o fondo transparente, esas imaxes teñen que ter formato png (o formato jpg non admite esa opción).

No caso de especificar un width para as imaxes, é interesante axustar ben o tamaño antes de subilas para que non se deformen en exceso.

Dado que a nova imaxe substitúe á anterior cabeceira, é importante desactivar o logo, nome do sitio, eslogan, etc na configuración do tema do noso sitio web... (Administrar » Construción do sitio » Temas)

Comproba no teu curso o resultado co tema 0-Point que especificamos cunha regra do Themekey nun apartado anterior

http://www.edu.xunta.gal/centros/cursoXX/anpa