What is the correct Relative Path to the chrome folder in Firefox Portable?
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.
Modified by cor-el
All Replies (4)
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;
}
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.
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.
- https://developer.mozilla.org/Tools/Page_Inspector
- https://developer.mozilla.org/Tools/Network_Monitor
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAQMAAABtzGvEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUBAuP///yq0q40AAAB2SURBVBjTndAxDoAgDAXQGgdHj+BRPJolDIwcgaPAUTgCIwOhYvPjoBssLyFt+YVEmERoApMUmxVXFF+V0JTYled8oNXmTESbK2Ww+1oHR2htcMbeB5cWage/4BIlaEA7hmH0YlKi3+uIhICIi/BYBYsxT/zLDYE9073W2CG0AAAAAElFTkSuQmCC
Modified by cor-el
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.
Modified by the-edmeister