J'utilise la version 142.0.1 et je souhaitai modifier les icônes des raccourcis placés dans ma barre personnelle.
Après avoir consulter de nombreux sites, la doc mozilla et également demandé à l'IA (chatgpt) j'ai réaliser le code ci-dessous en personnalisant le fichier "userChrome.css" et en chargeant des images PNG à la place des icônes par défaut du site. (ou plutôt l'absence d’icône du site).
Cela fonctionne, mais j'aimerai savoir :
- s'il y a un moyen plus moderne de réaliser cela
- si cette façon de faire vous semble pérenne, notamment lors des futures mises à jour
- autres suggestions, sécurité, etc...
Un grand merci à vous.
Dans le fichier "userChrome.css"
Le code cible le nom donné au raccourci, ici "MON_SITE",
puis cache l’icône par défaut,
affiche une image PNG à la place
et finit par cacher le nom du raccourci.
Attention, cela ne fonctionne pas, si le raccourci n'a pas de nom [label]. Il suffit donc de lui donné un nom bidon, le cibler et le code s'occupe d'affiche une image et cacher le texte du nom bidon.
Code : Tout sélectionner
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xhtml") {
/* ========= BARRE PERSONNELLE — par NOM (label="MON_SITE") ========= */
/* ========== MON_SITE ========== */
/* 1) Masquer l’icône d’origine */
#PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] .toolbarbutton-icon,
#PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] image.toolbarbutton-icon,
#PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] img.toolbarbutton-icon {
display: none !important;
}
/* 2) Icône perso en fond + bouton "icône seule" (texte caché) */
#PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] {
-moz-appearance: none !important;
background-image: url("icons/MON_SITE.PNG") !important;
background-repeat: no-repeat !important;
background-position: center !important; /* centré puisque pas de texte */
background-size: 16px 16px !important;
/* icône seule : enlever le padding texte et fixer la taille cliquable */
padding: 0 !important;
margin: 4px 0px !important;
width: 26px !important; /* zone clic ~22px */
min-width: 26px !important;
height: 26px !important;
}
/* 3) Cacher le texte du favori (icône seule) */
#PersonalToolbar toolbarbutton.bookmark-item[label="MON_SITE"] .toolbarbutton-text {
display: none !important;
}
}