→ Pour rendre vos Srollbar plus sex' qu'un rectangle gris !
Attention. Seul les navigateurs basés sur Webkit (Chrome et Safari donc) supporte ces mises en pages ! Pour les autres navigateurs, vos Scrollbar resteront grises et rectangulaires ! Il existe actuellement des code Javascript ou jQuery -qui installés- permettent une mise en page des Scrollbar sur les autres navigateurs, mais leur mise en place est bien plus compliqué et ne sera donc pas abordé ici.
Modification de toutes les Scrollbars du forum
Ajoutez dans feuille CSS de votre forum les 3 bouts de code suivant : - Code:
-
::-webkit-scrollbar {
width: 5px; /* fixe la largeur de la barre verticale */
height: 5px; /* fixe la largeur de la barre verticale */
background-color: #000000;
}
Ce code permet de modifier les deux flèches noirs
(n°1 sur le schéma). Je vous conseille vivement de mettre une width et heigh identique, sinon, lorsque vous aurez une double scrollbar (à droite et en bas de la fenêtre vous pourriez avoir un décalage affreux).
- Code:
-
::-webkit-scrollbar-track {
background-color: #FFFFFF; /* couleur de fond de la scrollbar */
}
Va permettre de définir un fond de couleur à votre scrollbar
(n°2 du schéma).
- Code:
-
::-webkit-scrollbar-thumb {
background-color: #89725B; /* couleur du slider */
border-radius: 15px;
}
Va permettre de changer la couleur et même la forme du slider (aussi appelée ascenseur ... comme vous voulez ^^) (
n°3 du schéma). Ici, je lui donne une couleur brune et je mets des arrondis aux angles.
Modification d'une seule scrollbar
Et si je voulais laisser des scrollbar grises et rectangulaires partout sauf dans ma fiche de lien ?!
Fastoch, vous prenez le même code CSS que l'on vient de voir et vous lui ajoutez un nom de class devant les deux fois deux petits points.
- Code:
-
/* modification d'une seule Scrollbar dans le cadre Love_Slider */
.Love_Slider::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #000000;
}
.Love_Slider::-webkit-scrollbar-track {
background-color: #FFFFFF;
}
.Love_Slider::-webkit-scrollbar-thumb {
background-color: #89725B;
border-radius: 15px;
}
Vous validez votre code comme d'habitude et le cadre qui portera la class Love_Slider aura un super design et pas les autres.
Et voilà !!
En espérant que ce tuto va autant te simplifier la vie que la mienne ! Si une question subsiste, n'hésite pas à répondre à ce sujet pour demander des éclaircissements.
Enjoy coding ! 
