list-style-image property not working in userChrome.css
All,
I'm struggling to replace an icon for the home button in Firefox 38.
In userChrome.css I've got the following:
- home-button {
list-style-image: url("mainhome.png") !important;
-moz-image-region: rect(0 16px 16px 0) !important;
}
The mainhome.png file is right in the chrome directory of the profile and readable. Despite that, the home icon is blank; if I remove the line, the default icon shows, so I know I have the name right. Am I referencing the image incorrectly? I'm not sure what I'm doing wrong, but in FF25 I just used:
- home-button { list-style-image: url("mainhome.png") !important; }
and it worked like a charm.
Thanks for any help in advance.
All Replies (8)
The toolbar icon are in this file:
- chrome://browser/skin/Toolbar.png
The CSS rules are here:
- chrome://browser/skin/browser.css
Try this code:
#home-button {
list-style-image: url("mainhome.png") !important;
-moz-image-region: auto !important;
}
Hey cor-el,
Thanks for your quick response. Unfortunately this didn't have an effect. I'm certain that I'm referencing the button correctly, as the !important tag causes it to become a blank button. The issue appears to be in the way I'm referencing the image. I've also posted this at the MozillaZine forums, so I'll report back if I make any progress.
Are you using the default Firefox theme?
Are you sure that the image is a valid PNG image?
Can you open the image in a Firefox tab?
I'm using the default theme, and I'm able to open the image. It shows as 60x60, is that too big?
This is for a touchscreen kiosk so the idea is to have the buttons be big enough to touch comfortably.
If the image is 60x60 then you will only see part of it with -moz-image-region: rect(0 16px 16px 0) The -moz-image-region:auto setting like I posted above should show the full image, but likely won't look good (image will look stretched). This was likely used in Firefox 25 that had a single standalone image for this button.
You would have to re-save te image with the correct dimensions.
Hi core-el,
I went ahead and save the image 16x16 and still a no go. I'm not sure whats happened, but I think the method of applying an icon to a button has changed and I'm just not finding it in my searches. Are you able to use the code you provided me to change an icon anything 38 or newer?
I've tested the code with an image in the chrome folder and that worked for me on Linux with Firefox 41. The DOM Inspector also doesn't show any changes in the DOM tree structure.
- DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
Cor-el,
Thanks again for all your help. I'll try updating and see how it goes.