[Résolu] couleur de la barre de défilement verticale

[krysale]

Bonjour,
comment faire pour changer la couleur de la barre de défilement vericale avec ff 3.6.11? Merci

[myahoo]

Bonjour,

En tant qu'utilisateur, ou en tant que site Web ?

Pour la modification en tant qu'utilisateur, il y a une discussion à ce sujet :
http://www.geckozone.org/forum/viewtopi ... =5&t=55281

[krysale]

C'est en tant qu'utilisateur.
Malheureusement, ta réponse ne m'aide pas: je ne sais pas quel code ajouter dans usercontent.css.
Merci quand même d'avoir pris le temps de me répondre.

[myahoo]

Non-non, un lien est bien proposé sur l'article que tu as lu, renvoyant vers la discussion au sujet de userContent.css :
http://www.geckozone.org/forum/viewtopic.php?t=29039

Il en est question dès le début, d'ailleurs :

Code : Tout sélectionner

    /*
    Barres de défilement horizontales et verticales
    Jusqu'à 4 boutons possibles :
      scrollbarbutton[sbattr="scrollbar-up-top"]
      scrollbarbutton[sbattr="scrollbar-down-top"]
      scrollbarbutton[sbattr="scrollbar-up-bottom"]
      scrollbarbutton[sbattr="scrollbar-down-bottom"]
    2 valeurs possibles pour chacun des boutons :
      display: none !important
      display: -moz-box !important
    */
    scrollbarbutton[sbattr="scrollbar-up-top"],
    scrollbarbutton[sbattr="scrollbar-down-top"],
    scrollbarbutton[sbattr="scrollbar-up-bottom"],
    scrollbarbutton[sbattr="scrollbar-down-bottom"] {
      display: -moz-box !important;
    }

[Freddy]

Bonjour,

Oui, mais seulement ce code ne concerne que les 4 petits boutons (ou flèches).

J'avais pas trouvé non plus à l'époque où j'ai voulu personnaliser ça, et 'DOM inspector' n'est pas bavard pour aider là-dessus

La solution pour moi à été d'aller voir sur le site de Stylish pour copier un bout de code que j'ai ensuite adapté à mes besoins
Voilà donc par exemple ce que ça donne chez moi:

Code : Tout sélectionner

scrollbar * 
{ -moz-appearance: -moz-win-glass !important; 
background: none !important; }

/*====================*/
/********Barre********/
scrollbar[orient="vertical"] 
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_vertical.jpg) !important;
max-width: 7px !important;
min-width: 7px !important;
}


/*********Curseur*********/
scrollbar thumb[orient="vertical"]
{ -moz-appearance: none !important;
 max-width: 7px !important;
 background: -moz-linear-gradient(rgb(35%,50%,30%), rgb(95%,95%,5%), rgb(35%,50%,30%) ) !important;
 -moz-border-radius: 10px !important;
 border-left-width: 1px !important;
 border-right-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;
  
 min-height: 20px !important;
}



/*======================*/
scrollbar[orient="horizontal"]
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_horizontal.jpg) repeat-x !important; 
max-height: 7px !important;
min-height: 7px !important;
}


scrollbar thumb[orient="horizontal"]
{ -moz-appearance: none !important; 
 max-height: 7px !important;
background: -moz-linear-gradient(rgba(35%,50%,30%,0.1), rgba(95%,95%,5%,0.1), rgba(35%,50%,30%,0.1)) !important;
 -moz-border-radius: 10px !important;
 border-top-width: 1px !important;
 border-bottom-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;

 min-width: 20px !important;
} 



/*======================*/
/********Boutons********/
scrollbar scrollbarbutton
{ -moz-appearance: none ! important;
background: transparent ! important;
border: none !important; }


/*** coin bas/droite***/
scrollcorner
{ background: rgb(80%,70%,45%) !important; }

Et donc à modifier bien sûr suivant tes envies; tu peux mettre simplement une(des) couleur(s) pour le background des barres, modifier leur largeur,...
Dans mon cas j'ai carrément supprimer l'affichage des boutons, mais si tu choisis de les laisser afficher en voulant les différencier chacun, là le code cité par myahoo doit pouvoir te servir.

[erickman]

Bonjour,

Oui, mais seulement ce code ne concerne que les 4 petits boutons (ou flèches).

J'avais pas trouvé non plus à l'époque où j'ai voulu personnaliser ça, et 'DOM inspector' n'est pas bavard pour aider là-dessus

La solution pour moi à été d'aller voir sur le site de Stylish pour copier un bout de code que j'ai ensuite adapté à mes besoins
Voilà donc par exemple ce que ça donne chez moi:

Code : Tout sélectionner

scrollbar * 
{ -moz-appearance: -moz-win-glass !important; 
background: none !important; }

/*====================*/
/********Barre********/
scrollbar[orient="vertical"] 
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_vertical.jpg) !important;
max-width: 7px !important;
min-width: 7px !important;
}


/*********Curseur*********/
scrollbar thumb[orient="vertical"]
{ -moz-appearance: none !important;
 max-width: 7px !important;
 background: -moz-linear-gradient(rgb(35%,50%,30%), rgb(95%,95%,5%), rgb(35%,50%,30%) ) !important;
 -moz-border-radius: 10px !important;
 border-left-width: 1px !important;
 border-right-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;
  
 min-height: 20px !important;
}



/*======================*/
scrollbar[orient="horizontal"]
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_horizontal.jpg) repeat-x !important; 
max-height: 7px !important;
min-height: 7px !important;
}


scrollbar thumb[orient="horizontal"]
{ -moz-appearance: none !important; 
 max-height: 7px !important;
background: -moz-linear-gradient(rgba(35%,50%,30%,0.1), rgba(95%,95%,5%,0.1), rgba(35%,50%,30%,0.1)) !important;
 -moz-border-radius: 10px !important;
 border-top-width: 1px !important;
 border-bottom-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;

 min-width: 20px !important;
} 



/*======================*/
/********Boutons********/
scrollbar scrollbarbutton
{ -moz-appearance: none ! important;
background: transparent ! important;
border: none !important; }


/*** coin bas/droite***/
scrollcorner
{ background: rgb(80%,70%,45%) !important; }

Et donc à modifier bien sûr suivant tes envies; tu peux mettre simplement une(des) couleur(s) pour le background des barres, modifier leur largeur,...
Dans mon cas j'ai carrément supprimer l'affichage des boutons, mais si tu choisis de les laisser afficher en voulant les différencier chacun, là le code cité par myahoo doit pouvoir te servir.

ton code ne fonctionne pas j'ai passer 2 heures dessus , rien a faire , merci tout de meme.


[Modération] les balises de citation ne sont à utiliser que pour citer ; pas pour ce que l'on veut dire

[krysale]

Bizarre que ça n'ait pas marché sur ton pc, j'ai fait la même chose (stylish+le bout de code) et ça marche chez moi.
Juste un détail: c'est con de ne pas pouvoir virer l'icône de stylish de la barre du dessous (j'ai oublié son nom).
J'en profite pour réparer un oubli: merci à tous de votre aide.

[erickman]

je croit que j'ai trouver le pourquoi,

mon theme visuel xp que j'ai modifier depuis.. avec ResHacker
et que je n'avait pas changer le SCROLLTHUMBVERTICAL100

mais la ou ce que je ne comprend pas cest en le modifiant avec reshacker
il est egalement en fonction dans firefox, ca par exemple
ca m'echappe , comme ici:



j'ai remarquer en prenant des code , que certain ne fonctionne pas
comme sur cette image


le bleu marine que j'aurais voulu changer , cest la couleur system
que j'ai mis [3d] pour le reste du code tout fonctionne , et pourtant
dans le code il yavait le code pour le scrollbar

merci de votre aides

[erickman]

Non-non, un lien est bien proposé sur l'article que tu as lu, renvoyant vers la discussion au sujet de userContent.css :
http://www.geckozone.org/forum/viewtopic.php?t=29039

Il en est question dès le début, d'ailleurs :

Code : Tout sélectionner

    /*
    Barres de défilement horizontales et verticales
    Jusqu'à 4 boutons possibles :
      scrollbarbutton[sbattr="scrollbar-up-top"]
      scrollbarbutton[sbattr="scrollbar-down-top"]
      scrollbarbutton[sbattr="scrollbar-up-bottom"]
      scrollbarbutton[sbattr="scrollbar-down-bottom"]
    2 valeurs possibles pour chacun des boutons :
      display: none !important
      display: -moz-box !important
    */
    scrollbarbutton[sbattr="scrollbar-up-top"],
    scrollbarbutton[sbattr="scrollbar-down-top"],
    scrollbarbutton[sbattr="scrollbar-up-bottom"],
    scrollbarbutton[sbattr="scrollbar-down-bottom"] {
      display: -moz-box !important;
    }

merci mayahoo , mais comme je le disait , j'ai essayer
par tout les moyen avec ce code , avec moi ... rien
cest avec reshacker que j'ai reussi a le changer depuis mon theme visuel xp
merci pour ton aide.


[Modération] les balises de citation ne sont à utiliser que pour citer ; pas pour ce que l'on veut dire

[erickman]

Bonjour,

Oui, mais seulement ce code ne concerne que les 4 petits boutons (ou flèches).

J'avais pas trouvé non plus à l'époque où j'ai voulu personnaliser ça, et 'DOM inspector' n'est pas bavard pour aider là-dessus

La solution pour moi à été d'aller voir sur le site de Stylish pour copier un bout de code que j'ai ensuite adapté à mes besoins
Voilà donc par exemple ce que ça donne chez moi:

Code : Tout sélectionner

scrollbar * 
{ -moz-appearance: -moz-win-glass !important; 
background: none !important; }

/*====================*/
/********Barre********/
scrollbar[orient="vertical"] 
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_vertical.jpg) !important;
max-width: 7px !important;
min-width: 7px !important;
}


/*********Curseur*********/
scrollbar thumb[orient="vertical"]
{ -moz-appearance: none !important;
 max-width: 7px !important;
 background: -moz-linear-gradient(rgb(35%,50%,30%), rgb(95%,95%,5%), rgb(35%,50%,30%) ) !important;
 -moz-border-radius: 10px !important;
 border-left-width: 1px !important;
 border-right-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;
  
 min-height: 20px !important;
}



/*======================*/
scrollbar[orient="horizontal"]
{ -moz-appearance: none ! important;
background: url(file:/D:/images/boutons/scrollbar_horizontal.jpg) repeat-x !important; 
max-height: 7px !important;
min-height: 7px !important;
}


scrollbar thumb[orient="horizontal"]
{ -moz-appearance: none !important; 
 max-height: 7px !important;
background: -moz-linear-gradient(rgba(35%,50%,30%,0.1), rgba(95%,95%,5%,0.1), rgba(35%,50%,30%,0.1)) !important;
 -moz-border-radius: 10px !important;
 border-top-width: 1px !important;
 border-bottom-width: 1px !important;
  -moz-border-top-colors: #883011 !important;
  -moz-border-right-colors: #883011 !important;
  -moz-border-bottom-colors: #883011 !important;
  -moz-border-left-colors: #883011 !important;

 min-width: 20px !important;
} 



/*======================*/
/********Boutons********/
scrollbar scrollbarbutton
{ -moz-appearance: none ! important;
background: transparent ! important;
border: none !important; }


/*** coin bas/droite***/
scrollcorner
{ background: rgb(80%,70%,45%) !important; }

Et donc à modifier bien sûr suivant tes envies; tu peux mettre simplement une(des) couleur(s) pour le background des barres, modifier leur largeur,...
Dans mon cas j'ai carrément supprimer l'affichage des boutons, mais si tu choisis de les laisser afficher en voulant les différencier chacun, là le code cité par myahoo doit pouvoir te servir.

oui freddy merci , mais comme je le disait j'ai passer 2 heures dessus
rien . je croit qu'il confuse avec mon theme visuel modifier
mais je l'ai fait avec reshacker.

merci

[myahoo]

erickman > Euh… ce n'est pas la peine de répondre à Freddy, ce n'est pas à toi qu'il écrivait

[erickman]

probleme regler , discussion close

[erickman]

de quoi tu parle mayo