Aggiungere un' immagine all' header di Thematic

Ian Stewart ha trovato il modo migliore per inserire un immagine che sostituisca il testo (in questo caso, il titolo del blog) via CSS sul link del div #blog-title. In questo modo l’immagine diventa cliccabile. Un buon esempio lo potete trovare qui. E adesso vediamo come fare nel nostro Child Theme per Thematic in style.css):

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

Se vogliamo solo inserire un logo alla sinistra del titolo, possiamo semplicemente aggiungere del padding a sinistra:

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

Se invece vogliamo mettere un’ immagine di sfondo dietro al titolo del blog, possiamo usare i selettori #header o #branding. Assicuriamoci di usare top center come qui sotto:

background:url(images/image.jpg) no-repeat top center;

Questo manterra’ la nostra immagine a posto anche in caso di ridimensionamento della finestra.

Come al solito, grande Ian!