CSS: Colorare barra di scorrimento del browser

0
2115

Avete notato che navigando su questo sito la barra di scorrimento del browser è di colore verde? Potete applicare una piccola porzione di codice CSS nel vostro template e modificarne completamente la grafica. Per colorare la barra di scorrimento del browser ci affideremo a questo semplice codice:

<style type=”text/css”>
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
background: #aad402;
-webkit-border-radius: 0ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #000;
}</style>

Questo codice va inserito nella pagina principale del vostro sito web all’interno dei tag <head></head>. I valori da modificare sono quelli in rosso:

height: 12px;
width: 12px;

Height è l’altezza della barra mentre width è la larghezza, aumentate o diminuite il valore numerico per stringerla e allungarla;

background: #FFFFFF;

Cambiate il codice di colore (#FFFFFF) con quello che più vi aggrada. Questo è il colore di sfondo della barra, non la barra scrollabile in se, la mia se notate è bianca.

::-webkit-scrollbar-thumb {
background: #aad402;

Cambiate il codice di colore (#aad402) con quello che più vi aggrada. Questo è il colore della barra di scorrimento vera e propria. Per intenderci quella verde di questo sito.

-webkit-border-radius: 0ex;

Aumentando il valore numerico la barra viene sempre più arrotondata ai bordi degli angoli. Io ho lasciato lo zero perchè la preferisco quadrata.

Immagine

Vuoi inserire la barra colorata per il tuo WordPress? Vai in Aspetto, poi Editor e apri il template Header (header.php). Trova il tag <head> e inserisci il codice sopra subito dopo.

Vuoi inserire la barra colorata per il tuo Phpbb? Devi scaricare via ftp il template overall_header.html del tuo tema in uso. Ad esempio /style/Prosilver/Template/overall_header.html. Aprendo il template con un editor di testo (io ti consiglio Notepad++) trova il codice <head> e inserisci il codice subito dopo.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

− 1 = 1