Barre à droite et l'a changer

[Ninel]

Bonjour,
J'ai vu sur certains forum qu'ils implantent dans un onglet une barre, ceci :


Et j'ai vu sur certains forums que l'on peut la changer :



Donc ma question : "Comment mettre une barre (comme dans l'exemple 2) lorsqu'un texte dépasse l'onglet ?"

[Cædes]

Bonjour Ninel,
pour modifier la scrollbar -c'est son nom- d'une div, il faut passer par la feuille de style css.

Tout d'abord, tu entoures ton texte d'une div classée :

Code:

<div class="elevator">votre texte</div>

Ensuite, tu vas poster ce code dans ta feuille de style css :

Code:

/*la div elevator en elle-même*/
.elevator {
  overflow: auto; /*ne pas toucher*/
  height: 150px; /*hauteur que tu veux donner au div, si le texte dépasse cette hauteur, la scrollbar apparait*/}

/*modifier la scrollbar du div elevator*/
.elevator::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}

.elevator::-webkit-scrollbar-track {
  background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}

.elevator::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 /*couleur de l'ascenseur*/;}

Vérifie bien que vous gardez les deux fois deux points ( :: ) ! Sinon cela ne fonctionnera pas

Je reste à ta disposition si tu as des questions.

[Ninel]

Et si je veux la mettre à mon forum en entier ?
Merci beaucoup.

[Adam_sfp]

Bonjour

Il y a ce script qui est assez sympa ICI

Cordialement.

[Ninel]

Oulah.
Je odis copier tous les codes qu'ils proposent ? Y'en a une partie en javascript et une autre sur le template. Mais là, je suis perdu.

Merci de votre aide.

[Cædes]

Pas besoin de javascript !
Colle ceci dans ta feuille de style css :

Code:

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}

::-webkit-scrollbar-track {
  background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}

::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 /*couleur de l'ascenseur*/;}

Là, ça touchera toutes les scrollbars du forum sans distinction !

[Ninel]

Vous êtes des anges !

Merci à vous.