REDAZIONE

Questo tutorial mostra come modificare graficamente i titoli degli elementi inseriti nelle sidebar, come Post recenti, Ultimi blog aggiornati, Categorie, ecc…

Entriamo nella sezione Presentazione > Opzioni avanzate del pannello di controllo e clicchiamo sul link Modifica modello del Foglio di Stile.

Si aprirà una finestra contenente il codice CSS che struttura tutto il Blog e con il quale, come abbiamo già visto, possiamo effettuare mdifiche su ogni parte del nostro Blog. All’interno della pagina cerchiamo l’oggetto .sidebar h2 se abbiamo scelto il template con una colonna sola, invece cerchiamo gli oggetti #left .sidebar h2 e #right .sidebar h2 se abbiamo scelto il template con due colonne che rappresentano rispettivamente la colonna di sinistra e la colonna di destra.

Il template del nostro blog è questo:

Dove i titoli degli elementi presenti nella colonna laterale hanno questa grafica:

Il codice che li rappresenta è questo:

.sidebar h2 {
    margin: 0px 0px 10px 0px;
    font-size: 110%;
    font-weight: bold;
    padding-left: 25px;
    background-image: url("http://static.blog.alice.it/backend/graphics/design/preview/alice_set7/384c64/bullet_b.gif");
    background-repeat: no-repeat;
}
 

Ora, quello che vogliamo modificare sono il colore dello sfondo, l’immagine del libro e inserire una linea che divide il titolo dal contenuto dell’elemento, come nell’esempio:

Per modificare lo sfondo del titolo da verde a blu, inseriamo all’oggetto .sidebar h2 l’attributo:

dove i numeri dopo i due punti rappresentano il valore esadecimale del colore blu che abbiamo scelto. Per conoscere i valori esadecimali di tutti i colori potete identificarli grazie a questa applicazione.

La riga di codice per creare la linea bianca tratteggiata che divide il titolo dell’elemento dal suo contenuto è questa:

dove border-bottom indica il bordo inferiore dell’oggetto .sidebar h2 e dashed è il comando che disegna una linea tratteggiata.

Per sostituire l’immagine del libro, invece, dobbiamo prima scegliere l’immagine sostitutiva. Abbiamo scelto di inserire sullo sfondo blu un fiore bianco.
Per inserire un’immagine delle stesse dimensioni del libro dobbiamo innanzitutto cliccare con il tasto destro del mouse sull’immagine del libro per far apparire il menu a tendina. Clicchiamo su Salva sfondo come… (su Internet Explorer) o Visualizza immagine di sfondo (se utilizzate Firefox).

Si aprirà una finestra contenente solo l'immagine, la salviamo sul nostro computer e la apriamo con un programma di grafica.
Importiamo anche l’immagine da sostituire e adattiamo le sue dimensioni con quelle dell’immagine originale (in questo caso l’immagine del libro), in questo modo quando la inseriremo nel Blog sarà omogenea con il resto della grafica.
Salviamo il file con la nuova immagine (vi consigliamo di salvarlo nel formato JPG o PNG) e lo carichiamo nel nostro Blog da Pannello di Controllo > Gestione File.
Clicchiamo sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto nel Blog.
Dopo pochi secondi vedremo la nostra immagine apparire nell’elenco dei file all’interno della cartella images.
Clicchiamo con il tasto destro del mouse sul nome del file e selezioniamo Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo abbiamo copiato l’indirizzo web dell’immagine.
Torniamo nel Foglio di stile, cerchiamo ancora l’oggetto .sidebar h2 e nella riga:

sostituiamo http://static.blog.alice.it/backend/graphics/design/preview/alice_set7/384c64/bullet_b.gif con l’indirizzo web della nostra immagine.

Il codice finale che rappresenta il titolo degli elementi in sidebar diventerà così:

.sidebar h2 {
    margin: 0px 0px 10px -5px;
    font-size: 110%;
    font-weight: bold;
    padding-left: 25px;
    border-bottom: dashed;
    background-color: #384c64;
    background-image: url("http://mipiacelanutella.myblog.it/images/bullet_b.jpg");
    background-repeat: no-repeat;
}

Graficamente invece:

Le modifiche che potete fare sono tantissime e potete sbizzarrirvi come più vi pare!
Buon lavoro!