Spesso voi lettori mi contattate via email o lasciando commenti nel blog con domande del tipo:
- Come posso modificare il colore dei link? Nel mio blog sono blu e vorrei che fossero verdi.
- Come posso modificare il carattere e la dimensione dei link del mio blog?
- I link nel mio blog sono sottolineati. Come posso togliere la sottolineatura?
- Cosa devo aggiungere al codice html per far visualizzare la manina al passaggio del mouse sui link?
Queste sono solo alcune delle domande che mi sono state poste.
Vediamo insieme come personalizzare i link e quale parte del css del blog modificare.
Come ho ripetuto più volte, i template non sono tutti uguali. Quindi quello che scrivo potrebbe non esserci nel vostro o essere diverso.
In generale in ogni template, il css per i link dovrebbe essere del tipo:
a {
proprietà dei link
}
a:hover {
proprietà dei link al passaggio del mouse
}
Questa parte di codice si riferisce allo stile dei link di tutto il blog in generale; potreste trovare anche lo stile per i link dei post, della sidebar, dell'header o di altre sezioni del blog. In questo caso il codice è del tipo:
per i link dei post:
.post a {...}
.post a:hover {...}
per i link della sidebar:
#sidebar-wrapper a {...}
#sidebar-wrapper a:hover {...}
per i link dell'header:
#header-wrapper a {...}
#header-wrapper a:hover {...}
Dopo questa premessa vediamo insieme alcune proprietà dei link.
Partiamo dal
colore. Per impostare il colore dei link basta aggiungere nel codice
a {...} la proprietà
color: codice_colore;
Se vogliamo che il colore del link cambi al passaggio del mouse allora aggiungiamo in
a:hover {...} la proprietà color ma con un codice colore differente.
Ecco alcuni esempi:
Link rosso che al passaggio del mouse diventa blu
Codice:
a {color: #F71A1A;} a:hover {color: #4B58FF;}
Link giallo che al passaggio del mouse diventa verde
Codice:
a {color: #E09B00;} a:hover {color: #00A212;}
Vediamo ora come cambiare la font-family, la dimensione del carattere e l'aspetto (grassetto o normale). Le proprietà sono:
font-family: nome_font;
font-size: dimensione_font;
font-weight: bold (per il grassetto) o normal;
Anche in questo caso se vogliamo che il link al passaggio del mouse assuma un aspetto diverso basta impostare nelle proprietà del link e in quelle del link al passaggio del mouse dei valori diversi di font-family, font-size e font-weight.
Ecco un esempio:
Al passaggio del mouse cambia font-family, font-size e font-weight
Codice:
a {font-family: Comic Sans MS; font-size: 15px; font-weight: normal;}
a:hover {font-family: Verdana; font-size: 12px; font-weight: bold;}
Possiamo anche impostare uno
sfondo aggiungendo la proprietà
background: codice_colore;
Ecco un esempio:
Al passaggio del mouse cambia il colore di sfondo
Codice:
a {color: #FFFFFF; background: #6FA2E5;}
a:hover {color: #6FA2E5; background: #FFFFFF;}
Possiamo inoltre impostare dei
bordi aggiungendo la proprietà
border.
La sintassi per i bordi è:
border: spessore colore tipo;
dove
spessore può essere 1px, 2px, ...
colore è il codice del colore
e
tipo può essere
solid,
dashed,
dotted,
ridge,
inset,
outset,
double oppure
groove
Impostando la proprietà border avremo i bordi su tutti e quattro lati del link, se ne vogliamo solo uno basta impostare una delle seguenti proprietà:
border-top: dimensione colore tipo: in alto
border-bottom: dimensione colore tipo: in basso
border-left: dimensione colore tipo: a sinistra
border-right: dimensione colore tipo: a destra
Ecco alcuni esempi:
Al passaggio del mouse cambia il colore e il tipo del bordo
Codice:
a {border: 3px #F59BB2 ridge;}
a:hover {border: 3px #FA7900 double;}
Al passaggio del mouse cambia il tipo del bordo
Codice:
a {border-bottom: 1px #0D7E00 dotted;}
a:hover {border: 1px #0D7E00 dashed;}
Vediamo ora la proprietà
text-decoration:
text-decoration: none;: link non sottolineati (
Esempio)
text-decoration: underline;: link sottolineati (
Esempio)
text-decoration: line-through;: link barrati (
Esempio)
text-decoration: blink;: link lampeggianti (
Esempio)
Quest'ultimo effetto non è visibile su tutti i browser, tra cui Internet Explorer e Chrome!
Infine vediamo come far apparire la manina o altri tipi di cursore aggiungendo la proprietà
cursor (per vedere l'effetto passare sulla scritta Esempio):
cursor: pointer;:
(Esempio: pointer)
cursor: progress;:
(Esempio: progress)
cursor: crosshair;:
(Esempio: crosshair)
cursor: help;:
(Esempio: help)
cursor: move;:
(Esempio: move)
cursor: text;:
(Esempio: text)
cursor: wait;:
(Esempio: wait)
cursor: e-resize;:
(Esempio: e-resize)
cursor: n-resize;:
(Esempio: n-resize)
cursor: ne-resize;:
(Esempio: ne-resize)
cursor: nw-resize;:
(Esempio: nw-resize)
cursor: s-resize;:
(Esempio: s-resize)
cursor: se-resize;:
(Esempio: se-resize)
cursor: sw-resize;:
(Esempio: sw-resize)
cursor: w-resize;:
(Esempio: w-resize)
Resto a disposizione per ogni dubbio o chiarimento.
per intenderci) che compare nella barra degli indirizzi e nel tab del browser:
e una animata 
. Come al solito queste modifiche non sono interpretate allo stesso modo da tutti i browser. Infatti se aprite il mio blog con Firefox vedete la favicon animata, con Chrome e Internet Explorer invece vedete quella fissa.
per il blog di Amsis
per l'utilissimo Amsis Delicious Widget
per il blog di Sauro
per il blog di Benzene
per il blog di Elisabetta
per il blog di Edvige
Copyright 2008- 
Design by 
