為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

What is the correct Relative Path to the chrome folder in Firefox Portable?

more options

I am using the following example code to change the Brand Logo on Firefox's About: Home page.

#brandLogo {
  width: 0px !important;
  padding-left: 154px !important;
  background: url("file:///C:/Absolute%20Path%20to%20image/example.png") !important;
}

This works perfectly when I insert an 'absolute' path to my image file (i.e. full path including drive letter).

However, I am using Firefox portable, and I would therefore like to use a relative path so that the image can always be found even when the Firefox portable folder is moved to a different location. This will obviously not work if an absolute path is used.

I have stored my image in the following folder: Firefox Portable\Data\profile\chrome\ but I need to know the EXACT "Relative" path that I should use in order to reach Firefox's own chrome folder.

I've tried using various online relative path examples, but I have no idea what Firefox is considering the relative path to be relative to (i.e. the starting point) so I can't get the path right.

I'd therefore appreciate someone letting me know exactly how to write the correct RELATIVE path so that it works with a portable Firefox.

Thanks.

I am using the following example code to change the Brand Logo on Firefox's About: Home page. <pre><nowiki>#brandLogo { width: 0px !important; padding-left: 154px !important; background: url("file:///C:/Absolute%20Path%20to%20image/example.png") !important; }</nowiki></pre> This works perfectly when I insert an 'absolute' path to my image file (i.e. full path including drive letter). However, I am using Firefox portable, and I would therefore like to use a relative path so that the image can always be found even when the Firefox portable folder is moved to a different location. This will obviously not work if an absolute path is used. I have stored my image in the following folder: Firefox Portable\Data\profile\chrome\ but I need to know the EXACT "Relative" path that I should use in order to reach Firefox's own chrome folder. I've tried using various online relative path examples, but I have no idea what Firefox is considering the relative path to be relative to (i.e. the starting point) so I can't get the path right. I'd therefore appreciate someone letting me know exactly how to write the correct RELATIVE path so that it works with a portable Firefox. Thanks.

由 cor-el 於 修改

所有回覆 (4)

more options

If the image file is in the same chrome folder as the userChrome.css file then it is sufficient to only specify the image name.

#brandLogo {
 width: 0px !important;
 padding-left: 154px !important;
 background: url("example.png") !important;
}
more options

I'm not using a userChrome.css file, I'm using Stylish.

I looked up where stylish stores its scripts and it's in the root of the main profile folder (as stylish.sqlite). So as a test I put a copy of the image in the same location and tried using just the file name (as you suggested) and it still doesn't work.

more options

Did you try to place the image in the chrome folder?

I'm not using Stylish, but I assume that it is compatible with userChrome.css and would use the chrome folder as well. You can try to ask advice in the Stylish forum or check out some styles for Stylish that use embedded images. Are a last resort you can embed the image via a base64 data URI.

  • data:image/png;base64,<base64 image code>

The Page Inspector and the Network Monitor have a "Copy Image as Data URI" item in the right-click context menu to copy the image to the clipboard.


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUBAuP///yq0q40AAAB2SURBVBjTndAxDoAgDAXQGgdHj+BRPJolDIwcgaPAUTgCIwOhYvPjoBssLyFt+YVEmERoApMUmxVXFF+V0JTYled8oNXmTESbK2Ww+1oHR2htcMbeB5cWage/4BIlaEA7hmH0YlKi3+uIhICIi/BYBYsxT/zLDYE9073W2CG0AAAAAElFTkSuQmCC

由 cor-el 於 修改

more options

There's a converter over here to convert images to Base64 data string. https://www.base64-image.de/ and here http://www.dailycoding.com/utils/converter/imagetobase64.aspx


Also, you can use both userChrome.css AND Stylish at the same time. I even have one UserStyle that I hacked together that uses both Stylish along with lines of UserChrome.css to do Menu Panel modifications. I found a UserStyle I liked to mod the Australis Menu Panel which worked fine with the default toolbar buttons, but didn't work for a few add-ons toolbar buttons due to contextual menus those add-ons had. Couldn't get it 'right' in the UserStyle I made from "shared code", but before I gave up I tried the userChrome code in userChrome.css - lo & behold that did work.

由 the-edmeister 於 修改