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;
   }  

Grazie al Foglio di stile presente nella sezione Presentazione > Opzioni avanzate è possibile, in modo semplice, personalizzare sia il loro font che il colore.

Prima di modificare il font bisogna sapere che sul Web non tutti i font sono visibili, poiché, per vedere un font è necessario che questo sia installato nel computer da cui si naviga.
Sul Web, i font più utilizzati perché più diffusi sono: Verdana, Arial, Times, Courier, Georgia, Helvetica.
Detto questo, per modificare il font del titolo e della descrizione, cerchiamo, all’interno del Foglio di stile, queste righe di codice:

#banner h1 {
    font-weight: bold;
    padding: 80px 20px 0px 350px;
}

#banner h2 {
    font-size: 80%;
    padding: 0px 20px 0px 350px;
}

Per cambiare il colore, invece, dobbiamo solo sostituire i valori di color dell’elemento #banner a che troviamo sempre nel Foglio di stile:

#banner a {
    color: #047D9C;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

I valori esadecimali possono essere sostituiti con altri numeri esadecimali oppure scrivendo, in inglese, il nome del colore. Ad esempio:

#banner a {
    color: red;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

Per utilizzare colori ancora più personalizzati però consigliamo di inserire i valori esadecimali, ad esempio:

#banner a {
    color: #DF1C2D;
    font-weight: bold;
    font-size: 80%;
    text-decoration: none;
}

Link correlati:
- Come modificare la dimensione e la posizione del titolo del blog
- Come modificare l'header del blog

Ci sono arrivate molte richieste da parte vostra in cui chiedete come è possibile nascondere il titolo del proprio blog. In questo tutorial vi mostriamo come fare.

In questo tutorial vi mostriamo come modificare le dimensioni e la posizione del titolo del vostro blog nella maggior parte dei template disponibili.

Se si nota, il padding del sottotitolo dista sopra di 10px dall’elemento titolo e a sinistra di 420px dal lato sinistro dell’header.