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/

 

cra_web

 

ies

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

directory

E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos css.
 

folder_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:

bloque_cra

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"

inpec

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

codigo

 

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.

mousepad

 

style_subido

 

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

segundo_sty

 

url_copiar

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

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:

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:

contacto