Come tutti saprete, la gestione dello stile del vostro blog Wordpress è centralizzata e, in particolare, è deputata al file style.css

Da tempo avrei dovuto metter mano a questo file per modificare lo stile dei link presenti sul mio blog che risultavano asettici e poco in tema con il resto del look. Siccome ho apportato alcune modifiche, ne approfitto per scrivere un piccolo post in modo da guidarvi qualora ne abbiate bisogno. Sia chiaro che non si tratta di un tutorial sui css – links, ma solo un articolo-guida per mostrarvi le potenzialità di un file (style.css) su Wordpress troppo spesso ignorato.

Sappiamo come i CSS siano in grado di cambiare attributi al testo con estrema facilità e anche la gestione dei links risulta davvero molto semplice anche perché affidata a pseudo classi dinamiche. Una pseudo-classe consente di tenere in considerazione condizioni o eventi diversi quando definisci una proprietà per una tag HTML.

Un link,infatti, può assumere diversi stati.

Pseudo-classe: link

La pseudo-classe :link viene usata per i link che non sono stati ancora visitati dall’utente.

Pseudo-classe: visited

La pseudo-classe :visited viene usata per i link che sono già stati visitati dall’utente.

Pseudo-classe: active

La pseudo-classe :active viene usata per i link attivi.

Pseudo-classe: hover

La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link.

La combinazione di queste pseudo-classi consente una personalizzazione molto ampia dei links. Senza scendere troppo in dettaglio, vi indico, come esempio, il codice con cui io ho personalizzato il mio style.css (ricordatevi un backup del file prima di apportare modifiche!!)

a:link {

color: #990000;
text-decoration: underline;

}

a:visited {
color: #660099;
text-decoration: underline;
}

a:hover {
color: #990000
text-decoration: underline;
}

Nell’esempio qui sopra ho semplicemente personalizzato tre tipologie di link in modo semplice ovvero dotando di un colore diverso i link non ancora visitati, visitati e quelli che subiscono il passaggio del mouse. Il colore può essere espresso in formato esadecimale (come nel mio caso) o meno.

Mentre, come avrete ormai intuito, il text decoration si occupa della riga che compare sul testo e che può trovarsi in alto, in basso o sopra il testo (barrato).

Si indicano così:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

Ma queste, ci tengo a precisare, sono solo alcune delle possibilità offerte dal css. Vediamo anche un altro esempio in modo che possiate prendere spunto.

Di solito, si tende a personalizzare maggiormente la classe hover ovvero quella che riguarda il passaggio del mouse sul link.

Eccovi un esempio :

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

che potete provare a questo link. In tal caso, ho aggiunto altre proprietà come il background-color, il font e il text-transform, ma molte altre ancora ne avevo a disposizione per una personalizzazione davvero infinita.

Dubbi e domande nei commenti!