Remplacer les boutons Fermer Niveau inf et Reduire

[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

[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

[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?

[Agent virtuel]

Quel doit être la taille des images?

Rien de précis, essayer et vous verrez

Les images sont elles mises directement dans le dossier Chrome ou dans un dossier image?

Directement dans le dossier chrome

[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

[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

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}