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

Wordle: Guida ai child Theme per Thematic - Lezione 4 - Modifichiamo l' headerQuarta 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)

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)

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)

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.

Termini collegati: , , I commenti ed i trackbacks sono attualmente chiusi.

5 Commenti

  1. Alessandra
    Pubblicato 5 agosto 2009 alle 21:17 | Link Permanente

    grazie daniele e complimenti per la chiarezza! finalmente una guida semplice per la personalizzazione di thematic… vengo dall’handcoding tradizionale X-HTML e CSS, ma cominciava a diventare un pochino frustrante cercare di far funzionare le cose con la guida che mette a disposizione themeshaper (un po’ poverella, per la verità)!
    magari in questo modo si ricorre di più all’assistenza a pagamento…. gli autori di progetti come thematic restano, cmq, davvero meravigliosi!

    keep up the good work!
    ciao,
    Alessandra

  2. Pubblicato 6 agosto 2009 alle 14:22 | Link Permanente

    Grazie Alessandra, mi dispiace solo di non aver tempo ultimamente per poter seguire la guida (ed il blog) come vorrei. Comunque, sono sempre qui, per qulunque chiarimento! Ciao e grazie ancora!

  3. Alessandra
    Pubblicato 6 agosto 2009 alle 15:06 | Link Permanente

    …rettifico: c’è un’ottima guida generale su thematic, scritta da ian stewart, x creare un wordpress theme child, mi riferivo al wiki specifico di thematic, che è un po’ scarno. :)

    ciao!

  4. Pubblicato 6 marzo 2011 alle 12:12 | Link Permanente

    Parlando del div Access, cito

    #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 .

    Volevi dire bordo inferiore, giusto?

  5. Matteo Stagi
    Pubblicato 6 marzo 2011 alle 12:36 | Link Permanente

    Si. L’articolo è di Daniele ma mi permetto di rispondere io. E’ il bordo inferiore: border-bottom: 1px solid #ccc; che definisce quella linea di separazione tra header è resto della pagina.