PILLOLA: Come fare per colorare la Scroll Bar?
A seguito di numerose e ripetitive richieste sul Forum "HTML", in merito alla possibilità ed al metodo adatto per colorare e personalizzare la scrollbar del browser agli utenti che visitano il Vs sito, ho pensato di realizzare questa breve pillola.
(che battezzeremo quick-pill)
Quindi, se siete stufi di vedere la solita scrollbar grigia nel Vs website, e volete anche adattarla allo stile della vostra grafica, sappiate che questo è possibile con l'utilizzo dei fogli di stile, i cosiddetti CSS (Cascading style sheet ).
Per personalizzare la barra del browser, basta inserire il seguente codice tra i tag <head> e </head> della pagina interessata o di tutte quelle pagine che volete personalizzare con questa colorazione:
Nel codice di una pagina web tipo, tale CSS risulterà inserito in questo modo:codice:<STYLE TYPE="text/css"> <!-- BODY { scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#6D8693; scrollbar-shadow-color:#F3F3F3; scrollbar-face-color:#617087; scrollbar-highlight-color:#F3F3F3; scrollbar-dark-shadow-color:white; scrollbar-3d-light-color:#9BAAC1; } //--> </STYLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Esempio ScrollBar colorata</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="boolbo.com">
<STYLE TYPE="text/css">
<!--
BODY {
scrollbar-arrow-color:#FFFFFF;
scrollbar-base-color:#6D8693;
scrollbar-shadow-color:#F3F3F3;
scrollbar-face-color:#617087;
scrollbar-highlight-color:#F3F3F3;
scrollbar-dark-shadow-color:white;
scrollbar-3d-light-color:#9BAAC1;
}
//-->
</STYLE>
</head>
<body>
</body>
</html>
Adesso per personalizzarla davvero, non vi resta che sostituire ai miei codici colore (es. #9BAAC1 ) i vostri colori che più si avvicinano allo stile grafico che avete adottato nelle Vs pagine web. Naturalmente oltre ai colori indicati con codice esadecimale potete inserire i colori semplici a parole (es. "white" per il bianco).
La domanda più postata sul forum dagli utenti, dopo che hanno inserito questo codice è quella che chiede a cosa corrispondano le varie voci del codice CSS in analisi, per capire a quale parte della scrollbar si stia applicando un colore piuttosto che un altro. Domanda per altro lecita.
Per questo allego a questa pillola un'immagine che vi servirà a capire visivamente, più che a parole, a quale componente (o parte) della scrollbar si riferisca ogni istruzione tra quelle in lista nel codice CSS.
ATTENZIONE:
Vi ricordo che questo sistema è garantito solo con Browser Internet Explorer 5.0 o superiori. Non vi sono garanzie per gli altri tipi di browser.
Chiunque utilizzi differenti tipi di browser ed abbia verificato l'effettivo funzionalmente di questo codice CSS sulle barre è invitato a postare in questo thread/Pillola il nome del browser e la versione utilizzata.
Buon lavoro a tutti!
Marco Lodovichi
Rispondi quotando
Il grande saintex :gren: :gren: :gren: 
