En moitas ocasións os temas dos que dispoñemos en Drupal poden resultar un tanto serios. Para algunha páxina ou blog non se axustan, xa que procuramos dar unha imaxe máis viva e alegre. Velaquí temos un exemplo:
Cra os Remuiños: http://www.edu.xunta.gal/centros/craremuinos/
IES Ramón Caamaño: http://www.edu.xunta.gal/centros/iesramoncaamano/
O proceso para a configuración dunha páxina é o seguinte:
1. Crear unha carpeta para colocar os códigos CSS que sobreescriban os propios de Drupal. Para isto debemos de activar o módulo IMCE Mkdir
Indo ao apartado "a miña conta" -> xestor de ficheiros, e facemos un clic en engadir/editar imaxe e seguidamente en examinar. No explorador de ficheiros debemos de pinchar en Directory
E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos css.
2. Analizamos cales son os nomes identificativos dos bloques, para ir escribindo o código no fichero css que podemos chamar style.css, por exemplo
Imaxinemos que na nosa web temos un bloque como o seguinte:
Xa temos o bloque coa información necesaria, o único que queremos é mudar a cor de fondo e quitarlle o borde que o tema 0Point de Drupal lle engade por defecto. Para iso, premendo co botón dereito do rato sobre o cadro e seguidamente en "Inspeccionar elemento"
Aparece no borde inferior o código da páxina web. Aparece un dos elementos que forma parte do bloque en cor azul. Pero debemos de procurar o div raiz no cal están tódolos elementos do bloque, tan só temos que recorrer o código cara arriba, ata atopar a etiqueta div id="block-block-xx", onde xx é un número
Pois esta etiqueta será a que teñamos que configurar (tamén podemos configurar por class, pero vexamos unha maneira sinxela).
3. Creamos co editor de notas (mousepad, gedit, leafpad, etc), un ficheiro que chamamos style.css. E engadimos o seguinte contido:
/*contacto*/
#block-block-22 {
border: 0px;
background: #66b8dd;
}
Onde:
/*contacto*/ é un comentario que nos sirve para identificar a que bloque nos estamos referindo
#block-block-22, é o id do bloque, que procuramos no paso anterior (id="block-block-22"
border: 0px;, no caso de non querer engadirlle un borde ao bloque
background: #66b8dd; , que é unha cor de fondo azulada
Obviamente repetimos os pasos anteriores cos diferentes bloques que queremos personalizar.
4. Subimos o ficheiro ao cartafol css que creamos no apartado nº1. Subímolo desde a miña conta -> xestor de ficheiros.
Pinchando en style.css aparece na parte inferior o nome style.css (ver imaxe), e ao pinchar neste segundo style.css, ábrese a fiestra do editor de imaxes, desde o cal podemos copiar a url na que se atopa o ficheiro style.css
Neste exemplo trátase da seguinte url: /centros/iesramoncaamano/system/files/css/style.css
5. Seguidamente dirixímonos á zona de administración ->Construción da páxina -> Bloques. Prememos en Engadir bloque
Ao bloque chamarémoslle css_code, por exemplo. Non lle poñemos ningún título. Prememos en Formato de entrada e escollemos PHP code e seguidamente en "Desactivar texto enriquecido", e pegamos o código:
<html>
<head>
<?php
echo '<link href="/centros/iesramoncaamano/system/files/css/style.css" rel="stylesheet">';
?>
</head>
<body>
</body>
</html>
Deberemos de modificar o enderezo que aparece na etiqueta link href= polo enderezo do ficheiro css do teu caso. Gardamos o bloque.
Finalmente colocamos o bloque css_code recén deseñado na parte superior da Cabeceira:
Deste xeito, cada vez que un usuario abre a páxina, o bloque css_code chamará ao ficheiro style.css, que sobreescribirá os estilos de Drupal. O resultado é o seguinte:
