We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

সহায়তা খুঁজুন

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

আরও জানুন

list-style-image property not working in userChrome.css

  • 8 উত্তরসমূহ
  • 2 এই সমস্যাটি আছে
  • 10 দেখুন
  • শেষ জবাব দ্বারা tbrammer

more options

All,

I'm struggling to replace an icon for the home button in Firefox 38.

In userChrome.css I've got the following:

  1. 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:

  1. home-button { list-style-image: url("mainhome.png") !important; }

and it worked like a charm.

Thanks for any help in advance.

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)

more options

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;
}
more options

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.

more options

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?

more options

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.

more options

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.

more options

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?

more options

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.

more options

Cor-el,

Thanks again for all your help. I'll try updating and see how it goes.