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

07 - Importare il proprio logo

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

 

Trascrizione del contenuto video

Per il modello del sito "Drupal 6 - Un CMS per la scuola" ho utilizzato il logo di Porte aperte sul web.
Ora lo sostituirò con un logo di Drupal reperito in Internet.

La testata misura il altezza 115 pixel, quindi ho ridimensionato il logo di Drupal ad un'altezza di 100 pixel e l'ho salvato in formato GIF.
In formato Gif perchè questo formato mantiene la trasparenza dello sfondo
 Meglio sarebbe il formato PNG,che, però, non è supportato da tutti i browser. Ad esempio IE 6 legge la trasparenza di PNG come sfondo bianco, quindi sarebbe necessario cambiare il colore della testata da grigio a bianco.

Vai in Amministra > Struttura del sito > Temi.
Vai a Genesis mio tema e clicca su configura.
Scendi alla sezione Impostazioni immagine del logo.
Cancella ciò che trovi in Path del logo personalizzato.
Clicca su Sfoglia e cerca nella cartella del tuo PC il logo che hai preparato.
Salva la configurazione.

Ecco il logo ma, come vedi, va riposizionato.
Vai nella cartella "Drupal 6- Un CMS per la scuola".
Apri la cartella sites > all >themes > Genesis mio tema > CSS e apri il file page.css.

Il file page.css è un foglio di stile. Lo puoi editare con SciTe. In questo momento io uso una versione vecchia di Dreamweaver, che però funziona benissimo ed è più comoda di SciTe.

Cerca la regola relativa al logo (#logo)

Apro la regola per cambiare le dichiarazioni.
In Elementi di pagina cambio mettendo:

  • 7 pixel come margine superiore
  • il destro lo mantengo di 5 pixel
  • pongo a 25 pixel il margine sinistro
  • OK.

Questa è la regola con le dichiarazioni cambiate:

#logo {
float: left;
margin-top: 7px;
margin-right: 5px;
margin-bottom: 0;
padding-right: 5px;
padding-bottom: 0;
margin-left: 25px;
}

Salvo, aggiorno il browser ed ecco il logo riposizionato.

Chiaramente puoi aumentare la distanza del margine destro e anche quella del sinistro, come vuoi tu.


colonna sinistra

colonna destra