Drupal 6 navigazione veloce.
menu principale | colonna di navigazione a sinistra | contenuto principale | colonna di navigazione a destra | piè di pagina

menu principale

contenuto principale

09 - Modificare i colori del body e della testata

per visualizzare il video è necessario disporre del plugin flash per il proprio browser

 

Trascrizione del contenuto video

Per cambiare i colori dobbiamo agire sui fogli di stile che trovi in sites > all > themes > genesis_miotema > css.
Incominciamo con l'aprire il file "style.css" e andiamo a prendere il tag body.
Il body in questo modello di sito è quasi nero e allora mi piacerebbe utilizzare uno dei blu del logo.
Ma quale?
Ho Mappa del sito, Contatti, Area riservata in bianco e li voglio mantenere in bianco, quindi mi potrebbe andare bene il blu scuro o il blu appena meno scuro.
Quale dei due va bene? 
Uso lo strumento Colore presente nella barra dell'accessibilità.

Notizie sulla barra dell'accessibilità le trovi in http://www.scuolacooperativa.net/drupal, nella colonna di destra, in fondo al blocco Tutorial in "Avvertenze sull'accessibilità".

Ora uso il "Contrast Analyser". Il testo lo voglio mantenere bianco, quindi vedo se è possibile utilizzare il blu un po' più chiaro.
Il test non è superato, quindi provo con il blu più scuro.

OK, i segni di spunta sono tutti verdi, segno che il test è stato superato.
Copio il codice del colore.
Ritorno al foglio di stile "style.css" e nella regola del body cambio ilo colore dello sfondo.
Salvo.
Trasmetto via FTP il file "style.css" nello spazio web. 
Prima di farlo, rinomino il file presente nello spazio web, così mantengo traccia delle modifiche fatte.
Ritorno al sito e aggiorno.
Ecco che il colore del bordo è cambiato, ma è rimasta una parte in nero che corrisponde alla  in cui ho messo il blocco con Mappa del sito, Contatti e Area riservata.
La regione rimasta con sfondo nero si chiama "leaderboard". La regola relativa la trovi nel foglio di stile page.css.

Faccio Modifica > Cerca e sostituisci > digito leaderboard  ed ecco qui le regole.

Ricopio  il codice colore dalla barra di accessibilità e cambio il valore della dichiarazione di sfondo in "#leaderboard", "#block-menu-menu-servizio .menu",  "#leaderboard #block-menu-menu-servizio li".

Salvo e trasmetto via FTP, prima, però, per mantenere traccia del lavoro fatto rinomino il file "page.css" presente in remoto.
Torno al sito e aggiorno.

Ora voglio cambiare i colori della testata da grigio a bianco e cambiare il bordo inferiore della testata da nero al colore blu scelto per lo sfondo del body.
Cambierò anche il colore del nome del sito, così come l'indirizzo, il numero di telefono e fax della scuola.

Vado sempre nel foglio di stile page.css e cerco "#header" che corrisponde a testata.
Per cambiare il colore dello sfondo basta sostituire il codice del grigio con tre F, codice che corrisponde al colore bianco.
Per cambiare il bordo inferiore della testata sostituisco il codice "#000040" con il colore usato per lo sfondo di body.
Ops! Ho lasciato un # di troppo!
La scrittura deve essere precisa.
Notizie in merito agli elementi che costituiscono una regola CSS le trovi in scuolacooperativa/drupal > blocco Tutorial > Temi > Fogli di stile.
 

Ora cerco le regole relative al nome del sito e in "#site-name a:link ",  sostituisco il codice con il colore dello sfondo e così faccio in "#site-name a:visited"
Salvo, trasmetto il file e aggiorno.

I dati della scuola invece si trovano nella regola "indirizzo" che trovi nel foglio di stile "style.css".
Qui aggiungo la dichiarazione "color: #000;" (nero).
Salvo, trasmetto via FTP, aggiorno la pagina del sito.


colonna sinistra

colonna destra