Stile Links in Home Page

09-10-2010, 11.54.37

http://djrevolution.it/
Come potrete notare non mi piace la visualizzazione dei link! Troppo rigidi e poi hanno colori che non c'entrano nulla col sito (Rosso, Blu e Fuxia).
Come faccio a cambiare lo stile?
(Es: guardate il link della sitemap in basso)

10-10-2010, 20.59.15

tra il tag <head></head> devi mettere questo codice:

Codice HTML:

<style type="text/css">
a:link{color: #colore dei link non ancora clickati;}
a:visited{color: #colore dei link visitati;}
a:hover{color: #colore dei link quando il mouse ci passa sopra;}
</style>

**karl94** · 10-10-2010, 22.00.38

Originalmente inviato da ALFRAN

tra il tag <head></head> devi mettere questo codice:
<style type="text/css">
a:link{color: #colore dei link non ancora clickati;}
a:visited{color: #colore dei link visitati;}
a:hover{color: #colore dei link quando il mouse ci passa sopra;}
</style>

Io consiglio di semplificare: è meglio generalizzare il selettore omettendo l'elemento a (non tutti i link sono creati tramite l'elemento a), così:

Codice HTML:

<style type="text/css">
:link{color: #colore dei link non visitati;}
:visited{color: #colore dei link visitati;}
:hover{color: #colore dei link quando il mouse ci passa sopra;}
</style>

11-10-2010, 14.46.14

Originalmente inviato da karl94

Io consiglio di semplificare: è meglio generalizzare il selettore omettendo l'elemento a (non tutti i link sono creati tramite l'elemento a), così:

Codice HTML:

<style type="text/css">
:link{color: #colore dei link non visitati;}
:visited{color: #colore dei link visitati;}
:hover{color: #colore dei link quando il mouse ci passa sopra;}
</style>

E se voglio creare effetti speciali (ad esempio appena passo sul link) su questi link? Cosa metto?
Esempio:
Passo sul link rosso e diventa bianco, non tutto ad un tratto, ma pian piano!
Visualizza: http://www.templates-15.joomla-downl...&Submit=Change

Altro problema: perchè li visualizzo sottolineati? http://revolutiondj.altervista.org/index.html

**karl94** · 11-10-2010, 15.32.06

Originalmente inviato da revolutiondj

E se voglio creare effetti speciali (ad esempio appena passo sul link) su questi link? Cosa metto?
Esempio:
Passo sul link rosso e diventa bianco, non tutto ad un tratto, ma pian piano!
Visualizza: http://www.templates-15.joomla-downl...&Submit=Change

Puoi usare le proprietà definite dal modulo CSS3-Transitions, è ancora una bozza e quindi non è supportato da tutti i browsers. Se vuoi che si veda in tutti i browsers allo stesso modo, devi usare il javascript (lo sconsiglio, è meglio che il sito venga visualizzato diversamente a seconda del browser, così qualcuno imparerà che i browsers non sono tutti uguali).
Il codice è un po' difficile da spiegare, se non hai basi è meglio che dica esattamente l'effetto che vuoi (specificando tempi, colori, e tutto quello che ti viene in mente), così te lo scrivo e ti spiego in cosa consiste.

Originalmente inviato da revolutiondj

Altro problema: perchè li visualizzo sottolineati? http://revolutiondj.altervista.org/index.html

Perché di default i browsers applicano l'effetto sottolineato a tutti i link, per eliminare l'effetto devi impostare la proprietà text-decoration su none (poi includerò anche questo nel codice che ti scriverò quando mi farai sapere i dettagli).

11-10-2010, 22.40.10

Grazie mille. Comunque se mi puoi scrivere il codice mi fà piacere. Hai come esempio quel template...voglio quell'effetto :)

**karl94** · 12-10-2010, 15.32.19

Ecco il codice, ho scritto in ogni riga la descrizione, se c'è qualcosa che non ti serve toglila, se manca qualcosa dillo pure.

Codice HTML:

<style type="text/css">
:link, :visited{ /*Proprietà da applicare a tutti i collegamenti, visitati e non*/
    color: white; /*Specifica che il colore del testo deve essere bianco*/
    font-weight: bold; /*Usa il font in grassetto*/
    text-decoration: none; /*Specifica che il testo non deve avere decorazioni, serve per evitare che venga sottolineato*/
    text-transform: uppercase; /*Rende il testo maiuscolo*/
    -moz-transition: color 0.5s; /*Equivalente a transition, per Gecko*/
    -webkit-transition: color 0.5s; /*Equivalente a transition, per Webkit*/
    transition: color 0.5s; /*Specifica che la proprietà color, quando cambiata, deve cambiare gradualmente in 0.5 secondi*/
}

:link:hover, :visited:hover{ /*Proprietà da applicare a tutti i collegamenti, visitati e non, quando il mouse ci passa sopra*/
    text-decoration: underline; /*Specifica che il testo deve essere sottolineato*/
    color: red; /*Specifica che il colore del testo deve essere bianco*/
}
</style>

12-10-2010, 17.20.20

Ho fatto alcune modifiche:

Codice HTML:

<style type="text/css">
:link, :visited{ /*Proprietà da applicare a tutti i collegamenti, visitati e non*/
    color: #BFBFBF; /*Specifica che il colore del testo deve essere bianco*/
    font-weight: bold; /*Usa il font in grassetto*/
    -moz-transition: color 1s; /*Equivalente a transition, per Gecko*/
    -webkit-transition: color 1s; /*Equivalente a transition, per Webkit*/
    transition: color 1s; /*Specifica che la proprietà color, quando cambiata, deve cambiare gradualmente in 0.5 secondi*/
}

:link:hover, :visited:hover{ /*Proprietà da applicare a tutti i collegamenti, visitati e non, quando il mouse ci passa sopra*/
     color: white; /*Specifica che il colore del testo deve essere bianco*/
   
}
</style>

Ma l'effetto non và! Come mai? :)

Grazie del supporto Karl94

**karl94** · 12-10-2010, 17.36.30

Come ho già scritto, solo nei browsers più recenti c'è il supporto alle transizioni CSS, Chrome e Safari (che usano lo stesso motore di rendering, Webkit) le supportano, poiché è stato proprio il team di Webkit che ha proposto al W3C l'introduzione di questo modulo. Anche Opera le supporta, ma Internet Explorer no, nemmeno la nuova versione. La versione attuale di Firefox non le supporta ancora, ma la versione in via di sviluppo (Firefox 4) sì.

12-10-2010, 17.41.50

Perchè allora nel template li visualizzo, con Firefox?

**karl94** · 12-10-2010, 17.46.00

Quel sito usa uno script javascript che cambia colore. Ti sconsiglio però di usare uno script per ottenere l'effetto, esiste l'altro modo, anche se non del tutto supportato, che è di sicuro più efficiente.

12-10-2010, 17.48.57

Ok allora aspetterò l'evoluzione dei Browsers :)

**karl94** · 12-10-2010, 17.50.54

Intanto, prova il sito con Google Chrome (o Opera, sono entrambi ottimi e gratuiti), così vedi l'effetto.
P.s.: io uso Firefox beta 6 e vedo correttamente l'effetto, anche se non si nota molto.

14-10-2010, 14.16.35

Forte...con google chrome è ottimo :)

Discussione: Stile Links in Home Page

LinkBack

Strumenti discussione

Display

Stile Links in Home Page

Regole di scrittura