Page 1 sur 1
Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 06 août 2022, 10:36
par huik
Bonjour
Je voudrais remplacer les boutons Fermer Niveau inf et Réduire (en haut a droite) par d'autres boutons plus sympa mais je ne connais pas le code a mettre dans Userchrome.
Pouvez vous m'aider?
Merci d'avance
Re: Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 06 août 2022, 11:11
par Agent virtuel
Bonjour
Inspiré de
https://mrotherguy.github.io/firefox-cs ... _theme.css
Essayer
Code : Tout sélectionner
.titlebar-close{ list-style-image: url(mozfr.png) !important }
.titlebar-min{ list-style-image: url(mozfr2.png) !important }
.titlebar-max{ list-style-image: url(bleu.png) !important }
.titlebar-restore{ list-style-image: url(mozzila.png) !important }
Et, et ce n'est qu'un exemple, mozfr.png, mozfr2.png, bleu.png, mozzila.png, sont des images à placer dans votre dossier chrome
Re: Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 06 août 2022, 11:20
par huik
Merci beaucoup pour votre aide
Quel doit être la taille des images?
Les images sont elles mises directement dans le dossier Chrome ou dans un dossier image?
Re: Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 06 août 2022, 11:39
par Agent virtuel
huik a écrit : 06 août 2022, 11:20
Quel doit être la taille des images?
Rien de précis, essayer et vous verrez
huik a écrit : 06 août 2022, 11:20
Les images sont elles mises directement dans le dossier Chrome ou dans un dossier image?
Directement dans le dossier chrome
Re: Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 08 août 2022, 16:41
par huik
Bonjour et merci pour l'aide qui a bien fonctionnée
Petit soucis. Lorsque je suis en mode Agrandir l'icone verte du milieu n'apparait pas (voir Rep 1 de la photo). Si je réduit l'icone verte apparait (voir 2 3 4). Lorsque je passe le curseur sur les icones un carré rouge ou gris apparait.
Comment faire apparaitre l'icone verte en mode Agrandir?
Comment enlever ces carrés rouge ou gris?
Comment réduire l'espace entre les 3 icones?
merci pour votre aide
https://zupimages.net/viewer.php?id=22/32/5f0r.png
Re: Remplacer les boutons Fermer Niveau inf et Reduire
Publié : 08 août 2022, 17:45
par Agent virtuel
Bonsoir
Déjà, ces quelques réponses
Toujours inspiré de
https://mrotherguy.github.io/firefox-cs ... _theme.css
Et avec l'aide de
https://www.w3schools.com/colors/colors_hsl.asp
Code : Tout sélectionner
.titlebar-close:hover{ background-color: hsl(212,72%,55%) !important }
.titlebar-close{ list-style-image: url(mozfr.png) !important }
.titlebar-min{ list-style-image: url(mozfr2.png) !important }
.titlebar-max{ list-style-image: url(bleu.png) !important }
.titlebar-restore{ list-style-image: url(mozzila.png) !important }
Et pour information dans l'exemple ci-dessus, titlebar-restore, c'est mozzila.png
Vous avez la possibilité (et par exemple) d'ajouter aussi
Code : Tout sélectionner
.titlebar-min:hover{ background-color: hsl(212,30%,10%) !important }
.titlebar-max:hover{ background-color: hsl(290,26%,60%) !important }
.titlebar-restore:hover{ background-color: hsl(18,89%,67%) !important }
Edit : 09 Août 2022
huik a écrit : 08 août 2022, 16:41
Comment réduire l'espace entre les 3 icones?
https://www.reddit.com/r/FirefoxCSS
Inspiré de
https://www.reddit.com/r/FirefoxCSS/com ... se_buttons ci-dessous, et, ce n'est qu'un exemple
Code : Tout sélectionner
.titlebar-button{padding-left:3px !important;padding-right:3px !important}
Ci-dessous, résumé du userChrome.css, et, ce n'est qu'une illustration
Code : Tout sélectionner
.titlebar-button{padding-left:3px!important;padding-right:3px!important}
.titlebar-close:hover{background-color:hsl(212,72%,55%)!important}
.titlebar-close{list-style-image:url(mozfr.png)!important}
.titlebar-min:hover{background-color:hsl(212,30%,10%)!important}
.titlebar-min{list-style-image:url(mozfr2.png)!important}
.titlebar-max:hover{background-color:hsl(290,26%,60%)!important}
.titlebar-max{list-style-image:url(bleu.png)!important}
.titlebar-restore:hover{background-color:hsl(18,89%,67%)!important}
.titlebar-restore{list-style-image:url(mozzila.png)!important}
