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.

Avatar for Username

Search Support

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.

Learn More

This thread was archived. Please ask a new question if you need help.

How to change the about:home Brand Logo in Firefox portable using CSS

Quisquose
Quisquose
more options

I searched Mozilla Support and I found this archived topic: https://support.mozilla.org/en-US/questions/944199

However the CSS provided in that answer does not work in current versions of Firefox.

1. What CSS should be used to replace the about:home brand logo in Firefox Portable v29 (Australis).

2. If I wish to store my replacement image somewhere inside the Firefox Portable folder, how do I specify a relative path (instead of an absolute one) so that the replacement image can always be found, regardless of where Firefox portable folder is located.

I searched Mozilla Support and I found this archived topic: https://support.mozilla.org/en-US/questions/944199 However the CSS provided in that answer does not work in current versions of Firefox. 1. What CSS should be used to replace the about:home brand logo in Firefox Portable v29 (Australis). 2. If I wish to store my replacement image somewhere inside the Firefox Portable folder, how do I specify a relative path (instead of an absolute one) so that the replacement image can always be found, regardless of where Firefox portable folder is located.

All Replies (1)

Gingerbread Man
Gingerbread Man
more options

Put the following in the userContent.css file. 

@-moz-document url("about:home") {
#brandLogo { background-image: url("brandlogo.png") !important; }
}
  • Your image should be 192×192.
  • Your image should be placed in the chrome folder, next to userContent.css.
  • Otherwise, you can use relative paths as usual, ../ meaning up one folder and so on. See Absolute and Relative Paths | About.com for details.
  • If you're using Stylish instead, then you have a choice of either embedding the image using the Insert button, or specifying an absolute path. Firefox presumably tries to fetch the image from chrome://… so specifying a relative path isn't possible.

Modified by Gingerbread Man