Guida ai child Theme per Thematic – Lezione 4 – Modifichiamo l' header

Quarta lezione della guida per creare Child Theme per Thematic per WordPress.

Modifichiamo l’ header del nostro child theme

Cosa ci insegnerà questa lezione:

• comprendere la struttura dell’ header di Thematic
• modificare le dimensioni
• aggiungere uno sfondo all’ header
• sostituire il titolo con un’ immagine

Tutte le modifiche verranno effettuate nel file style.css.

Struttura dell’ header

La sezione header di Thematic e’ composta da tre parti: il titolo del blog, la descrizione ed il menù.

I selettori CSS che vengono utilizzati sono i seguenti:

• #branding, il div che contiene il titolo e la descrizione;
  
  	
  #blog-title, il div che contiene il titolo;
  	
  #blog-description, il div che contiene la descrizione;
  
  

• #access, il div che contiene il menù.

Il div branding

Il div branding e’ quello che centra il titolo ed la descrizione rispetto alla finestra: la sua larghezza e’ 940px e il suo margine e’ settato su 0 auto. Possiamo usare il selettore #branding per modificare la spaziatura del titolo della descrizione rispetto al margine superiore della pagina e al menu, semplicemente modificando il suo padding. Il padding standard e’ di 88px in alto e di 44px verso il menù. Se vogliamo sostituire il titolo con un’ immagine, la soluzione migliore e’ la seguente:

#blog-title a {
background:url(immagini/immagine_di_sfondo.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}

Ad esempio, se vogliamo inserire una foto di una automobile 940x456px al posto del titolo del blog, il codice sarà il seguente:

#blog-title a {
background:url(immagini/immagine_auto.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 940px;
height: 456px;
}
#branding {
padding-top:0
}

Ed ecco il risultato:

Un' immagine nell' header di Thematic (clicca per ingrandire)

In pratica abbiamo dimensionato il div #blog-title per contenere l’immagine, ristretto il testo del titolo fino a farlo diventare invisibile e diminuito il padding verso l’alto per non sprecare troppo spazio prezioso.
Se semplicemente vogliamo aggiungere un logo accanto al link del titolo il codice sarà questo:

#blog-title a {
background:url(images/image.jpg) no-repeat top left;
padding-left: XXpx;
}

Mettiamo una lampadina 100x100px come logo del nostro website:

#blog-title a {
background:url(images/lampadina.jpg) no-repeat top left;
padding-left: 100px;
padding-top:70px;
}

Aggiungiamo padding a sinistra per creare lo spazio per l’ immagine e poi aumentiamo quello superiore per mostrarla tutta. In questo modo anche il logo e’ cliccabile. Ecco una schermata del risultato:

Logo accanto al titolo (clicca per ingrandire)

Per inserire un’ immagine di sfondo all’ header (sempre la nostra auto) basta modificare o il div #header o il div #branding cosi’:

#header {
background:url(immagini/immagine_di_sfondo.jpg) no-repeat top center;
}

ed aggiustare il padding.

Il div “access”

Questo div contiene il menù delle pagine.

I valori più importanti impostati di di deafult sono i seguenti:

#access {
border-bottom: 1px solid #ccc;
z-index:100;
}

E’ questo div, con il suo bordo superiore, che disegna la linea che separa l’header dal contenuto della pagina .

Il selettore z-index e’ utilizzato per mantenere il menù a cascata sopra agli altri div e gli permette di rimanere visibile.

Se usiamo qualche plugin che ha un valore z-index superiore dovremo aumentare il nostro valore di conseguenza per evitare che il menù scompaia sotto: ad esempio, uno slider collocato in basso rispetto al menù con z-index superiore a 100 coprirebbe il menù.

Di contro, se per esempio un plugin che crea un overlay ha un valore z-index di 80, l’ overlay non coprirà il menù e quindi dovremo diminuire il suo valore ad un livello inferiore, almeno 79.
Ecco un esempio:

Problemi con il valore z-index (clicca per ingrandire)

Spero di aver coperto le più comuni necessità, chi avesse esigenze particolari può lasciare un commento.
Nella prossima lezione analizzeremo la struttura del menù.

Segui le lezioni dall’ inizio: Thematic: Guida ai Child Theme.