Eccoci alla quinta puntata sulle modifiche da apportare per fare un piccolo restyling del blog.
Inserendo questo codice CSS come abbiamo già visto qui aggiungerete una sottolineatura al titolo del gadget sulle barre laterali del blog:
.sidebar h2{
border-bottom: 1px dotted grey !important;
padding-bottom: 5px}
Questo però è un codice composto da elementi che potete modificare a seconda delle vostre esigenze.
border-bottom: Questa proprietà del bordo produce l'effetto di sottolineare il titolo del gadget delle colonne laterali. Potete cambiare la larghezza modificando il valore 1px. Potete anche cambiare la linea in puntini oppure in riga doppia ecc. inserendo solid | groove | ridge | double | inset | outset | dotted. Fate delle prove e vedete quale vi piace di più!
Alla fine potete cambiare il colore della linea usando i codici che trovate in questa tabella di colori di riferimento.
padding-bottom: definisce lo spazio tra la sottolineatura e il titolo. Potete aggiustare il valore dei pixel a vostro gusto.
Spero che anche questo breve tutorial vi possa essere utile!
*******
Aggiornamento del 03/10/2013
Per modificare grandezza font, font, centrare il titolo, ecc date un'occhiata qui!
*******
Aggiornamento del 03/10/2013
Per modificare grandezza font, font, centrare il titolo, ecc date un'occhiata qui!
Fatto!!Grazie per questi accorgimenti!!^_^
RispondiEliminaSaralilla sono contenta che d'esserti stata utile! fa sempre piacere ricevere un feedback positivo! :-))))
EliminaUtili questi tutorial, sono facili e veloci! Grazie :)
RispondiEliminaCiao Silvia! prego! grazie per aver lasciato un segno del tuo apprezzamento! :-)))
Eliminaoh finalmente.... era una vita che cercava una cosa simile!!! devo dire che il tutto mi piace proprio !!! grazie mille. Ps. nuova follower
RispondiEliminaCiao Antonella! Benvenuta!!! :-))
Eliminagrazie per questo tutorial!
RispondiEliminavorrei farti un altra domanda, ma se io voglio che la linea vada fino al bordo della pagina come devo fare?
francesca
Mi spiace Francesca ma in questo caso nn so aiutarti! Ciao!!!
Eliminati ringrazio lo stesso
Eliminafrancesca
Grazie mille!!!
RispondiEliminaSono riuscita a sottolineare i titoli dei gadget e a inserire anche una linea sopra ogni titolo usando questo CSS:
.sidebar h2{
border-bottom: 1px solid #000000!important;
padding-top: 3px}
.sidebar h2{
border-top: 1px solid #000000!important;
padding-bottom: 3px}
E’ tutto merito tuo, non ci sarei mai riuscita senza i tuoi consigli preziosi!!!!
Domanda: c’è un modo per fare la stessa cosa con il menu delle pagine di blogger (come in questo sito http://www.domainehome.com/ dove decor, celebrity e tutti i nomi delle pagine sono evidenziati da 2 linee orizzontali sopra e sotto.)
Grazie!!! Beba
Ciao Beba!
Eliminascusa se risp solo ora! come vedi ultimamente non ho molto tempo da dedicare al blog ... sigh!
grazie per il css! purtroppo non so aiutarti per quello che domandi, dovrei cercare un po' ma dopodomani parto per le vacanze e quindi rimando tutto a settembre!
ciaoooooo :-)
Ciao!!! Grazie... nessun problema!
RispondiEliminaBuone vacanze!! Ciao ciao :-)
Grazie per questo tutorial a te Smile e a Beba, per l'aggiunta... sapete come posso modificare il font e la grandezza del titolo del gadget attraverso il codice HTML, senza dover modificare automaticamente anche la data del post?
RispondiEliminagrazie Francesca
Francesca, domani cerco di rispondere alla tua richiesta! ciao! :-)
Eliminagrazie! ^_^
EliminaFrancesca
Francesca
Eliminaper cambiare font e grandezza dei titoli della colonna laterale senza modificare anche quelli della data devi aggiungere qs css
.sidebar h2 {
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
}
ora questo è un esempio, quello che è scritto dopo i due puntini lo devi cambiare tu a tuo piacimento!
se poi avevi aggiunto i puntini sotto al titolo come ho spiegato nel post il tutto verrà così:
.sidebar h2{
border-bottom: 1px dotted grey !important;
padding-bottom: 5px
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
}
ok? spero d'essere stata chiara, comunque nei prossimi giorni scriverò un post più dettagliato!
ciao!!!
ti ringrazio ancora!
RispondiEliminaprovo subito!
Francesca
mi conviene aspettare il tuo post!!!
Eliminaperché facendo questa modifica l'unica cosa che cambia è la grandezza e non il tipo di font!. Ho provato varie modifiche anche direttamente dal codice sorgente, ma nulla...
Francesca
ti ringrazio nuovamente per la disponibilità.
Grazie mille per questo tutorial, veloce e chiarissimo! ^_^
RispondiEliminaAlice
Grazie mille per il tutorial!! Utilissimo! :)
RispondiElimina