Buon pomeriggio gente c: oggi la mia collega Nym non è presente, perciò dovrò fare tutto da sola e_e spero di non spiegarmi come un libro chiuso!
Oggi vi spiegherò come fare per modificare il titolo di un post e vi aiuterò con alcuni trucchetti. In realtà è davvero molto semplice. Già cliccando su →Modello →Personalizza →Avanzato →Titolo post potete apportare alcune modifiche (carattere, dimensioni, grassetto\corsivo), ma con alcuni semplicissimi codici potrete raggiunge risultati molto soddisfacenti.
Il codice base per modificare il titolo è
.post-title { }
all'interno della parenti potrete aggiungere tutto quello che volete. Ecco alcuni esempi.
Potete aggiungere un bordo:
.post-title{border: 2px solid black;}
2px è la misura del bordo, solid è l'effetto, black è il colore. Quest'ultimo può essere sostituito con white, red, pink (e così via) oppure con i codici dei colori (ovvero #eeeeee) mentre l'effetto potete modificarlo (nei prossimi post vi spiegheremo come fare). Potete aggiungere anche una sola linea, basta aggiungere a "border" la direzione, ovvero top=sopra, bottom=sotto, left=sinistra, right=destra.
Quindi avrete:
.post-title {border-bottom; 2px solid black;}
Nell'esempio che vi ho fatto, il bordo è quasi attaccato alla scritta. Come fare per mettere qualche centimetro di distanza tra i due elementi? Semplicissimo, modificando il padding!
.post-title {border: 2px solid black;padding: 5px;}
Se volete cambiare invece il colore dello sfondo, dovete cambiare il valore del background:
.post-title {border: 2px solid black;padding: 5px;background: #ffb5c5;}
I colori che sto utilizzando sono improponibili, ma è giusto per farvi capire il risultato xD
Tornando a noi, se al posto del colore volete inserire uno sfondo, non dovete fare altro che inserire l'url dell'immagine al posto del codice del colore (il tutto tra parentesi):
.post-title {padding: 5px;background: url(http://i60.tinypic.com/16k9p8o.jpg); }
Stessa cosa se volete aggiungere un'icona, anche se diviene un pochetto più complicato poiché in base alle dimensioni dell'icona, dovrete modificare qualcos'altro. Nel mio caso, ho modifica il padding.
.post-title {padding-left: 50px;background: url(http://i62.tinypic.com/4vhlpe.gif)no-repeat;}
Importante anche l'aggiunta di "no-repeat" per evitare che lo sfondo si ripeta.
Ultimo, ma non meno importante, come allineare il testo:
.post-title {
text-align: center;}
Il codice che ho utilizzato serve per centrare. Potete anche utilizzare right per allineare il titolo a destra.
E con questo credo di aver detto tutto ciò che riguarda il titolo. In realtà ci sarebbe tantissimo da dire, ma lo pubblicheremo presto in un altro post.
Spero di esservi stata utile, ma soprattutto di essermi spiegata bene. Se avete qualche domanda, fate pure. Vi risponderò con piacere! Abbiamo inserito anche un form (alla vostra destra) dove potrete chiedere tutto quello che volete! A presto ^_^
