16 aprile 2015

Graphic Tricks #3 Modificare il titolo del post

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 ^_^


18 commenti:

  1. Ciao Giusy!!!
    Ti sei spiegata benissimo non ti preoccupare, è sempre bello leggere di questi trucchetti, siete bravissime ^_^

    RispondiElimina
  2. OMG GRAZIE MILLE! Cercavo di capire questa cosa da una vita praticamente, mi avete illuminato *_*

    RispondiElimina
  3. Ohhh ma questo post è utilissimo!!! Siete fantastiche, grazie Giusy bella!!! *.*

    RispondiElimina
    Risposte
    1. Mi fa sempre piacere essere utile a qualcuno ^_^ mi raccomando, voglio vedere i risultati u.u

      Elimina
  4. *_____* nooooo vabbè ma che meraviglia di roba!!!!!
    Se continuate così prima o poi avrò il blog più bello del mondo u.u (se, vabbè, come no).
    Comunque... Grazie <3 <3 <3

    RispondiElimina
    Risposte
    1. AHAHAHAHAH può essere u.u never say never. Chissà, magari un giorno apprenderemo da te XD

      Elimina
  5. Ma sieteee fantatsicheee... adoro questi post!

    RispondiElimina
  6. Avete una capacità di spiegarvi davvero semplice e si capisce tutto ciò che scrivete *-* grazie per aver aperto questo blog vi seguirò con piacere <3

    RispondiElimina
  7. Giusy grazie mille di questo meraviglioso post ricco di consigli!!!!!!!!!!!!Un bacione Giusy!!!

    RispondiElimina
  8. Ciao Giusy...una domanda, il codice deve essere inserito su "Aggiungi CCS"?

    RispondiElimina
  9. Ragazze io vi sto adorando tantissimo, grazie ai vostri consigli ho deciso di riaprire il blog che avevo chiuso (perché proprio non mi piaceva da vedere) e invece ora sto finalmente cominciando a capirci qualcosa di grafica *-*

    RispondiElimina
  10. Che consigli preziosi! Molto utili per chi come me è nuova in questo campo!!! Grazie dei consigli!!!

    RispondiElimina