Come modificare la dimensione e la posizione del titolo del blog : REDAZIONE

D	L	M	M	G	V	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29

« Virgilio OKNOtizie | Homepage | La foto della settimana: inizio in solitario »

02/07/2008

Come modificare la dimensione e la posizione del titolo del blog

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

Per modificare i parametri del titolo dobbiamo aprire il Foglio di stile del blog, quindi, dal Pannello di Controllo entrate nella sezione Presentazione > Opzioni avanzate e cliccate sul link Modifica modello del Foglio di stile.
Si aprirà una pagina popup contenente il codice CSS del template.
In questa pagina dovete cercare gli elementi denominati:
#banner h1
#banner h2

dove #banner h1 rappresenta il titolo del blog e #banner h2 il sottotitolo.
Ogni elemento ha all’interno delle parentesi graffe degli attributi che li caratterizza, noi andremo a modificare questi.

Come ridimensionare il titolo e il sottotitolo del blog
Per ridimensionare il titolo e il sottotitolo del blog, nelle parentesi graffe degli elementi #banner h1 e #banner h2 basta inserire o modificare questo attributo:

font-size: 100%;

Se si vuole un testo più piccolo o più grande basta ridurre o aumentare il valore percentuale. Le grandezze da inserire sono a proprio piacimento. Ad esempio, se vogliamo il sottotitolo più grande del titolo scriviamo:

#banner h1 { font-size: 50%;}
#banner h2 { font-size: 200%;}

Il risultato sarà questo:

Come cambiare la posizione del titolo del blog
Per modificare la posizione del titolo del blog, invece, basta inserire o modificare questi attributi all’interno dell’elemento #banner h1:

padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

Questi stessi attributi si possono scrivere anche in una sola riga, in questo modo:

padding: 0px 0px 0px 0px;

I valori 0px rappresentano le distanze dell’elemento titolo dai bordi dell’header e, rispettivamente: da sopra, da destra, da sotto e da sinistra.
Per esempio, se vogliamo spostare il titolo più a sinistra rispetto alla posizione standard di 170px, dobbiamo ridurre la distanza del titolo dal bordo sinistro dell’header, quindi scriviamo:

#banner h1 { padding-left: 60px; }
oppure
#banner h1 { padding: 0px 0px 0px 60px; }

Se vogliamo il titolo più a destra e più in alto, invece, possiamo scrivere questi valori:

#banner h1 { padding-left: 350px; padding-top: 35px; }
oppure
#banner h1 { padding: 35px 0px 0px 350px; }

Per modificare il sottotitolo gli attributi da modificare sono gli stessi, ma le distanze sono in corrispondenza a destra e a sinistra con l’header, mentre sopra e sotto con il titolo. Questo perché il sottotitolo, nel codice HTML dei template, è un sotto elemento del titolo e, quindi, fa riferimento, oltre all'header, anche alla posizione di #banner h1. Per spiegarlo meglio utilizziamo un esempio: se vogliamo centrare sia il titolo che il sottotitolo scriveremo:

#banner h1 {
padding: 70px 0px 0px 350px;
font-size: 200%;
}

#banner h2 {
padding: 10px 0px 0px 420px;
font-size: 120%;
}

E il risultato finale sarà questo: