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!

Word Cloud dell’ articolo


Wordle: Aggiungere un’ immagine all’ header di Thematic

Termini collegati: , , Scrivi il tuo commento all'articolo

Scrivi un Commento

Il tuo indirizzo Email non verra' mai pubblicato e/o condiviso. I Campi obbligatori sono contrassegnati con *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="">