REDAZIONE

In questo articolo vi mostriamo come personalizzare i titoli dei post, come hanno già fatto alcuni amici di MyBlog.it:

Quello che dovete modificare è l’elemento “.content h3” all’interno del Foglio di stile.
Quindi, andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra scrivete:

  .content h3 {
   }  

All’interno delle parentesi graffe dovete inserire i valori da attribuire all’elemento. Come esempio vediamo alcuni dei parametri utili a gestire e personalizzare la grafica dei titoli degli articoli.

margin: 0px 0px 0px 0px;
definisce lo spazio che deve esserci tra l’elemento titolo e gli elementi che lo circondano, rispettivamente sopra, a destra, sotto e a sinistra.

padding: 5px 10px 5px 10px;
definisce lo spazio che deve esserci tra il bordo del titolo e il parametro margin, rispettivamente sopra, a destra, sotto e a sinistra.

font-size: 12px;
definisce la dimensione che deve avere il testo.

font-weight: bold;
associa l’effetto grassetto al testo. E’ possibile sostituire l’effetto bold con altri valori come normal, bolder, lighter, inherit oppure valori da 100 a 900 (es. 100, 200, 300…).

line-height: 150%;
definisce lo spazio che deve esserci tra una riga di testo e l’altra.

color: #FFF;
definisce il colore che deve avere il testo. E’ possibile sostituire i valori esadecimale (es. #FFF = bianco) con i nomi inglesi dei colori. Es. color: red; per avere un testo rosso, oppure blue e così via.

background: #4c4c4c;
definisce il colore di sfondo che devono avere i titoli.

background-image:url("http://indirizzo_immagine.jpg");
background-repeat:no-repeat;
definisce, se lo si desidera, l’immagine da utilizzare come sfondo ai titoli.


Il risultato finale che dovrete avere nella colonna destra del Foglio di stile è il seguente:

  .content h3 {
   margin: 0px 0px 0px 0px;
   padding: 5px 10px 5px 10px;
   font-size: 12px
   font-weight: bold;
   line-height: 150%;
   color:#FFF;
   background-image:url("http://indirizzo_immagine.jpg ");
   background-repeat:no-repeat;
   }