CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Articoli > Modificare l'header di Wordpress

Modificare l'header di Wordpress

Introduzione

Wordpress è un CMS dotato di un'incredibile duttilità. Oltre ad essere estremamente semplice da installare, permette allo sviluppatore di modificare il suo layout tramite i fogli di stile e di personalizzare così ogni aspetto delle pagine. Wordpress è un ottimo banco di prova per testare la nostra capacità di lavorare su una struttura (X)HTML predefinita, ponendo in questo modo le basi anche per progetti di design più ambiziosi, come ad esempio un layout in stile Zengarden. In questo articolo vedremo come modificare il layout dell'header (intestazione) di Wordpress lasciando inalterata la sua marcatura. Potete osservare il layout predefinito di Wordpress nell'immagine che segue.

Lasciare inalterata la marcatura

Il codice XHTML dell'header di Wordpress è estremamente semplice:

<div id="header">
<div id="headerimg">
<h1><a href="#">...</a></h1>
<div class="description">...</div>
</div>
</div>

Questa abbondanza di marcatori gioca a nostro favore, in quanto ci permette di poter assegnare più stili sfruttando appieno le potenzialità della cascata.

Assegnare i nuovi stili

I nuovi stili da assegnare potrebbero essere i seguenti:

#header {
margin: 0;
height: 150px;
background: #f7f7f7 url("headbg.jpg") no-repeat 0 0;
color: #000;
text-align: center;
border-bottom: 1px solid #ccc;
}

#headerimg {
width: 600px;
height: 100px;
margin: 0 auto;
background: transparent url("city.gif") no-repeat 0 0;
text-align: center;
}
#headerimg h1 {
margin: 0 auto;
height: 100px;
width: 400px;
background: transparent url("mimicry.gif") no-repeat 0 0;
}
#headerimg h1 a {
position: absolute;
top: -1000em;
}

div.description {
padding: 1em 0; 
font: italic 120% Georgia, serif;
}

E questo è il risultato. Come si può notare dal codice, abbiamo incastonato tre immagini di sfondo l'una sopra l'altra. La parola chiave transparent permette ad un elemento di lasciar trasparire lo sfondo del suo genitore. In questo modo viene assicurata la piena visibilità alle tre immagini. Per far si che il testo del titolo venga sostituito dall'immagine mimicry.gif, abbiamo usato la seguente tecnica di sostituzione del testo con immagini:

#headerimg h1 a {
position: absolute;
top: -1000em;
}

Avendo posizionato l'elemento a in modo assoluto con un valore negativo altissimo per la proprietà top, esso scompare dalla finestra di visualizzazione, ma resta pienamente accessibile ai browser testuali ed ai lettori di schermo.

Infine, la centratura orizzontale degli elementi è stata ottenuta tramite i margini orizzontali automatici (per i browser standard compliant ed Internet Explorer 6 in standard mode) e la dichiarazione text-align: center (per la retrocompatibilità con Internet Explorer 5 Windows).