Skip to content

Styling Firefox UI

Jump to bottom
Frank Dana edited this page Jun 21, 2020 · 17 revisions

Stylus cannot style Firefox's user interface (UI)

Mozilla has opted to not create an API allowing WebExtensions to control the browser appearance via CSS, which was previously possible. This means targeting any form of @-moz-document url("chrome://browser/content/browser.xul") will not work with Stylus. The same goes for the built-in pages like about:addons.

You can find details and discussions about removal / inclusion of the Theming API in the following links:

Current Workarounds

If you absolutely can't deal with not being able to modify how the Firefox UI looks, you have a couple of different options.

  1. userChrome.css.

    • This is a file in your Firefox profile that can change the style of the Firefox UI. This is currently the only thing that can change how Firefox looks. More information on how to do so can be found on both userchrome.org external link, and mozillaZine external link.

  2. reStyle external link, (source) external link.

    • This extension connects to a server (that you have to install) which automatically saves the userChrome.css. The only thing you have to do with this extension is save the CSS, then restart Firefox to see the changes.

A lot of excellent information regarding userChrome.css, how you can use it, and some ready-to-use scripts are available in the CustomCSSforFx Project external link.

Styling Restricted Mozilla pages

The following information is mostly shown in the popup when on a restricted domain. This entry is to expand on the instructions.

Firefox prevents browser extensions from accessing the following domains:

accounts-static.cdn.mozilla.net,accounts.firefox.com,addons.cdn.mozilla.net,addons.mozilla.org,api.accounts.firefox.com,content.cdn.mozilla.net,discovery.addons.mozilla.org,input.mozilla.org,install.mozilla.org,oauth.accounts.firefox.com,profile.accounts.firefox.com,support.mozilla.org,sync.services.mozilla.com,testpilot.firefox.com

To get access:

  • Open about:config page in the browser.

  • Right-click in the list.

  • Choose "New", then "Boolean".

  • Paste privacy.resistFingerprinting.block_mozAddonManager into the input and click "OK".

  • Choose true as the value.

  • Click "OK"

  • If you're using Firefox 60+:

    • On the about:config page, search for extensions.webextensions.restrictedDomains.

    • Double-click on the entry to edit the value.

    • Remove addons.mozilla.org domain from the list.

    • You should end up with the following value:

      accounts-static.cdn.mozilla.net,accounts.firefox.com,addons.cdn.mozilla.net,api.accounts.firefox.com,content.cdn.mozilla.net,discovery.addons.mozilla.org,input.mozilla.org,install.mozilla.org,oauth.accounts.firefox.com,profile.accounts.firefox.com,support.mozilla.org,sync.services.mozilla.com,testpilot.firefox.com

  • Now reload the addons.mozilla.org page and the style should apply.

Other Alternatives

If the style isn't applying, it may be due to additional restrictions applied to the page by Mozilla. Your last option would be to import the style, in user.css format, into your userContent.css file.

When using Firefox you can have two files in your profile.default\chrome directory. userChrome.css and userContent.css.

(That directory is normally located at...)

  • Windows: C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\RANDOM.default\chrome\
  • Linux: /home/username/.mozilla/Firefox/Profiles/RANDOM.default/chrome/

If your styles are in C:\MyStyles you would add the following line to userContent.css:

@import url("file:///C:/MyStyles/YourMozillaStyleName.user.css");

For Linux it might be:

@import url("file:///home/username/MyStyles/YourMozillaStyleName.user.css");

Restart Firefox and you should have your style applied to addons.mozilla.org. If you need more help please feel free to stop by Discord to discuss the issue further.

Home

Clone this wiki locally