Firefox Tweaks and Fixes and Styles and Things



Following is a collection of tweaks and fixes for the Mozilla Firefox web browser.

For the non-techies, here are brief descriptions of some of the Firefox configuration files which are in play in this article:

  • prefs.js: This is the primary Firefox configuration file that controls much of how the browser works. This file exists in the root of your Firefox profile directory. The contents of this file can be viewed and edited by entering about:config in the address bar, however you should typically not edit this file unless it's only to test something. All of your custom preferences should be placed in a user.js file (or a user-overrides.js file if you're using the 'arkenfox' user.js).
  • user.js: This file does not exist until you create it in the root of your Firefox profile directory. Any preferences that you wish to change in prefs.js or about:config that are not available in the Firefox options interface, and which you want to preserve across Firefox updates or resets, should be entered in this file.
  • userChrome.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file is used to modify the appearance of virtually any element of the Firefox user interface (UI).
  • userContent.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file can be used to modify the appearance and behavior of web pages, however i would recommend using the Stylus add-on instead because it makes working with CSS much easier.

Note that the userChrome.css and userContent.css files are ignored by default since Firefox version 69, thus you have to set the option...
toolkit.legacyUserProfileCustomizations.stylesheets true in your user.js (or user-overrides.js if you're using the 'arkenfox' user.js) or about:config if you want to use either file.

If you need help with Cascading Style Sheets (CSS), CSS selectors and what parameters they can take, see the CSS Introduction and CSS Reference documents at

Change how Firefox looks


Since Mozilla removed support for the older XUL/XPCOM add-ons in favor of WebExtensions, the much loved Classic Theme Restorer add-on won't work with Firefox version 57 or newer. The developer of CTR is still very active in maintaining the CSS code that was used in the add-on however and you can find it in the CustomCSSforFx GitHub repository. Using the new code, we can continue to tweak how Firefox looks, though it requires a bit more elbow grease. I've removed several of the CSS tweaks i had here in favor of the CustomCSSforFx code because it covers so much ground and saves a lot of time without adding too much overhead. You can also hide Firefox context menu items with CustomCSSforFx or you could roll your own styles and dump them in userChrome.css.

Instructions for implementing the CustomCSSforFx code is on the page i linked to, though i might recommend implementing it a little differently if you already have code in your userChrome.css or userContent.css that you want to keep. The method i use keeps my custom code separate from the CustomCSSforFx code which makes updating the CustomCSSforFx stuff easier. It also allows to quickly troubleshoot problems that might arise because you can just comment out a single @import line to easily eliminate large chunks of code. Here's what my userChrome.css contains:

/* 3rd party */
/* Aris-t2/CustomCSSforFx ( */
@import "./custom/aris-customcssforfx/userChrome.css"; /**/

/* my stuff */
@import "./custom/status-panel.css"; /**/
@import "./custom/ff-chrome-fixes.css"; /**/
@import "./custom/context-menu.css"; /**/

Notice that the @namespace line is missing. You need to do the same, else some of the tweaks in the CustomCSSforFx code might not work. To understand why you don't need the @namespace line, even though you may have read that you do, and why it can cause styles to break, read Adding Style Recipes to userChrome.css.

As you saw above, the userChrome.css in my /chrome folder is a rather bare-bones affair in which i use @import to link to the CustomCSSforFx files and all my other CSS files that reside in sub-folders of /chrome. Here's what the directory hierarchy looks like if you're confused:


And here's what my userContent.css file looks like, which just points to the userContent.css file contained with the CustomCSSforFx package:

@import "./custom/aris-customcssforfx/userContent.css"; /**/
@import "./custom/addon/format-link.css"; /**/
@import "./custom/addon/mark-it.css"; /**/

Once you've got the files in place, it's just a matter of editing the userChrome.css and userContent.css files to suit your needs. The instructions are contained in the files. It will take a while to go through it all, but i suggest doing so because some tweaks are OS and Firefox version specific. Aris updates the CustomCSSforFx code quite often, so you might want to watch the repository for changes.

When it's time to update the styles, things get a little tricky if you want to avoid having to sift through the userChrome.css and userContent.css files all over again. One solution by 'petsam' called 'Pretty Firefox' attempts to automate the process as much as possible. I haven't used his script so i can't comment on it, suffice to say that any effort to automate the updating of CustomCSSforFx is appreciated i'm sure.

Dark Fox

Firefox ships with a few default themes and one of them is the 'Dark' theme. To activate it, right-click on an empty part of the tab bar or the navigation tool bar, or click the 'Customize' menu item in the Hamburger menu. At the bottom of the 'Customize Firefox' tab you'll see a 'Themes' button. Click it and select the 'Dark' option.

Adjust vertical space between the bookmark items

This will change the vertical space between your bookmarks in the sidebar. You can use CustomCSSforFx for this, or copy the following code to your userChrome.css or other custom CSS file. Change the -2 to whatever suits you.

/* bookmark panel item spacing */
.sidebar-placesTree treechildren::-moz-tree-row {
    margin: -2px;

Styling the link target/network status tooltip

The hyperlink/network status tooltip is the text that appears in the lower left or right of the browser viewport when you hover over a hyperlink or when there is certain network activity. Some people (me!) find the link target tooltip to be annoying because it can cover part of a webpage and get in your way. This style will have the following effects:

  • move the hyperlink tooltip to the top of the browser, overlaying the navigation tool bar
  • make the hyperlink tooltip the full width of the browser
  • center the text for the hyperlink tooltip
  • change the background color, font size and font colors for the hyperlink and network status tooltips
  • remove the tooltip borders

You can play with the CSS to suit your preference. The only properties i would not recommend messing with are 'display' and 'transition'. At a minimum you will likely need to adjust the '-40px' number in the top: -40px !important; property in order to get the link target tool-tip to overlay the navigation tool bar.

#statuspanel[inactive] {
    display: none !important;
#statuspanel #statuspanel-label {
    padding: 6px 0.7em 0 0.7em !important;
    background: rgba(0, 0, 0, .60) !important;
    border: none !important;
    font-size: 18px !important;
#statuspanel[type="overLink"] {
    max-width: unset !important;
    padding-top: 0 !important;
    top: -40px !important;
    width: 100.9% !important;
    height: 38px !important;
    transition: none !important;
#statuspanel[type="overLink"] #statuspanel-label {
    text-align: center !important;
    color: #fff !important;
#statuspanel[type="status"] {
    max-width: max-content !important;
#statuspanel[type="status"] #statuspanel-label {
    color: #6c9bff !important;

Change how Firefox acts

In addition to the smooth scrolling tweak below, see the articles, Firefox Configuration Guide for Privacy Freaks and Performance Buffs and The Firefox Privacy Guide For Dummies!.

Smooth scrolling

Smooth scrolling is now enabled by default in Firefox, but i don't care for the way it works. If you want to try my settings, they're in my user-overrides.js file. Here's the direct link to the raw text. Scroll down until you find the general.smoothScroll preferences and copy the settings to your own user.js.

Enlarging the Developers Toolbox font size

If you use Firefox's developer tools you can enlarge the text using the devtools.toolbox.zoomValue preference.

Cleaning up context menu clutter

You can use a userChrome.css file in the 'chrome' folder of your profile directory to hide items in any of Firefox's context menus, including those added by extensions. Each menu item has a CSS selector and you need to know what they are for the menu items you wish to hide.

There's more than one way to skin a cat so let's go with the easy way first which is to get a list of all the CSS selectors for all of the context menu items by searching the Firefox source code. The other way is a bit of a convoluted process, but it's also easy to do:

  1. Open the web developer toolbox from Firefox's hamburger menu, or by pressing F12, etc..
  2. From the 3-dot icon in the Developer Tools window, click the 'Settings' menu item and in the 'Advanced Settings' section, enable the two options, 'Enable browser chrome and add-on debugging toolboxes' and 'Enable remote debugging' after which you can close the toolbox.
  3. Again from the hamburger menu, click the 'Web Developer' menu item, then 'Browser Toolbox'. This will open the remote Developer Tools window along with a prompt asking whether to you want to allow the connection between Firefox and the remote debugger, which you will.
  4. In the new Developer Tools window, click the 3-dot icon, then the 'Disable Popup Auto-Hide' menu item.

Now in Firefox you can open whatever context menu you want to change and it will stay open (press Esc. to close it). Next, click the element picker icon on the Developer Tools window (it should be the left-most icon on the top row), or click Ctrl+Shift+C, and then click the Firefox context menu item you wish to hide. This will highlight the menu item in the Developer Tools window and if you double click the <menuitem id="context-some-menu-item" part, you can then copy the CSS selector.

In this example we'll hide a single context menu item, the "Back" item in the main context menu for web pages:

menuitem#context-back { display: none !important; }

Here's another way to write the same code:

menuitem#context-back {
    display: none !important;

In the next example we'll hide multiple context menu items, this time the "Back" and "Forward" items, but not the "Reload" item. There's also a couple of dummy-proof things happening here. Normally when you want to comment out a line you would prepend it with a forward slash followed by an asterisk, and append it with an asterisk followed by a forward slash, /* like this */, but by adding the trailing /**/ to every line we only need to prepend the line with a /* to have Firefox ignore it. The other feature is the #DUMMY line. We could write this code all on one line but it's more readable if we break it up. The problem is that we need to remember to remove the comma in the last line and we might forget, or we might delete the last line, or comment it out, or we might add another line and forget to re-add the missing comma. The #DUMMY line is simply a CSS selector that doesn't exist and is therefor ignored by the browser.  By adding it, without a comma after it, we need not worry about keeping track of the rest of our commas.

menuitem#context-back, /**/
menuitem#context-forward, /**/
/*menuitem#context-reload, /**/


{ display: none !important; }

Save the file and restart Firefox to see the changes.

Changing how websites look or work

The styles below can be used in a userChrome.css file, but i would recommend using the Stylus add-on mentioned earlier. If you dump them in userChrome.css you'll need to make some changes so that they affect only the websites you want to change.

If you're using an extension to modify how a website looks or works and you want it to work on Mozilla domains, you will need to set the preference...
extensions.webextensions.restrictedDomains an empty value. You can access this preference by entering about:config in the address bar.

Making the interwebs dark

Many of us who have been staring at computer monitors too damn long cannot tolerate bright displays. White web pages with dark text feels like looking at the sun, which is one reason why i use a dark theme for this website. A lot of people seem to have this problem and there are many solutions. In the case of Firefox, there are quite a few add-ons that can darken the web and they use various methods to do so. The simplest ones invert the colors which is a dumb way to go for a couple reasons, one of them being that this can make dark pages look bright. To see my preferred extension for darkening the web, see Firefox Extensions – My Picks.

Allow text selection/copying

In a silly effort to prevent copying text, some websites will try to prevent you from selecting it, or at least make it appear that you can't select the text by changing the selection color to the same color as the background. This tweak will often solve the problem.

Note that i've gotten reports of this CSS causing problems where one is unable to drag tabs to reorganize them and YouTube video full-screen not working with the 'F' key shortcut. I've experienced none of these problems personally.

Name: [global] allow text selection
Applies to: Everything

/* override CSS preventing text selection */
* {
    -moz-user-select: text !important;
    user-select: text !important

Copying/pasting text without formatting

Sometimes you may want to copy text from a website and paste it without the HTML markup. While i'm not aware of any way to accomplish this without an extension, you can to do the next best thing by using Ctrl+Shift+V to paste instead of Ctrl+V. This works for me on Windows and Linux, however i've had some feedback that indicates it does not work in all cases. If you have a problem, look for a global or application specific Ctrl+Shift+V hotkey setting for the program you're pasting to and consider deleting or changing it.

Copying text from hyperlinks

Copying the text of a hyperlink can be a hassle, that is until you press the Alt key. Press and hold your Alt key while dragging the cursor over the hyperlink to highlight the text you want to copy. You can even copy text from the middle of a hyperlink this way. No extension needed.

Display website content hidden by JavaScript

I'm noticing more and more website developers using JavaScript and DIV layers to hide page content until the page is fully loaded. While these CSS tweaks will not overcome this shear stupidity in every case, they will work in many. Note also that these styles may occasionally break how a website is displayed, though this seems to be fairly rare.

Name: [global] anti-JS - display html
Applies to: Everything

Click to expand...

 * display html hidden by JS
 * note that some styles may break some websites
body {
    opacity: 1 !important;
    visibility: visible !important;
body :is(.site, .body-fade-in, .use-preload #page) {
    opacity: 1 !important;
    visibility: visible;
body :is(.loading, #preloder, #evt-preloader, .ta-preloader, .lj-preloader, #blocker, .page-loader, .page-preloader-cover, .twp-preloader, #mask, .content-loader, .loader-wrapper, #loader-wrapper, #preloader, .preloader-bg, #load, #loading, .loading-overlay, #ht-loader, #qLoverlay, .preLoader, .preloader, #loftloader-wrapper, #wrapper > #loader-container, #before_preloader, .loading-screen, #loadingDiv, #af-preloader, .body-fade-in, #loadingImg, #fullpage-overlay, #astroid-preloader, .pix-page-loading-bg, .pix-loading-circ-path, .overlayloader, .load-screen, .page-preloader, .page-loader-wrapper, .page-loader-overlay, #zoom-preloader) {
    display: none !important;
body:not(.ready) {
    overflow: visible;
body #contents {
    visibility: visible !important;
body::after {
    content: unset;
#content #primary,
.wpb_animate_when_almost_visible {
    opacity: 1;
.NoJs .bbCodeSpoilerContainer > .bbCodeSpoilerText,
#container {
    visibility: visible;
.open_shop_overlayloader {
    display: none !important;
.loading {
    filter: none;
html {
    display: unset;
html > .page {
    visibility: visible;

The following will display images which are hidden by JavaScript in some cases:

Name: [global] anti-JS - display images
Applies to: Everything

img {
    opacity: 1 !important;
    filter: none;
/* ex: */
.loading-circle {
    display: none !important;

Many websites will not display embedded YouTube videos unless you enable JavaScript. This will make the video display without having to enable it in some instances, however JS must still be enabled for (see Firefox Extensions - My Picks if you want to bypass YouTube altogether whilst still being able to watch YouTube videos).

Name: [global] anti-JS - display YouTube player
Applies to: Everything

/* ex: */
div.player-unavailable {
    display: none !important;

Normalizing fonts

For better readability i like font types and sizes to be uniform across all websites, plus there are privacy issues for websites that use 3rd party fonts, such as the "free" fonts that Google provides. Just be aware that forcing your own fonts can make fingerprinting the browser easier on websites where JavaScript is enabled. There are various ways to normalize fonts, but here's the method i use:

  1. in Firefox preferences, find the 'Fonts & Colors' options and click the 'Advanced' button
  2. if you read English, select 'Latin' in the combination control, else select your preferred language
  3. set the 'Proportional', 'Monospace' and 'Minimum' font styles and sizes and remember your choices. I set the 'Proportional' option to 'Serif' and leave the others at their default values
  4. in the combination control, select 'Other Writing Systems' and set the preferences to the same values as in the last step
  5. disable the option, 'Allow pages to choose their own fonts'
  6. optionally install a font toggle add-on like Enforce Browser Fonts or Toggle Fonts

Fonts should now look much more uniform across all websites and if you don't like the way a particular website looks, you can quickly toggle the 'Allow pages to choose their own fonts' setting with your add-on.

Lastly, if you use uBlock, read the 'My filters' section of the uBlock Origin Suggested Settings page which offers a way to allow all first-party fonts globally while disallowing all 3rd party fonts by default.

Fixing stuff that's busted

Firefox doesn't remember its window size after restart

If you maximize the Firefox window and then restart Firefox, it may not open in a maximized state as you might expect. This annoyance can be caused when the preference privacy.resistFingerprinting is set to true (as it should be). This preference does a number of things to make it harder for websites to fingerprint your browser and one of them is to set a generic window size. If this bothers you, try the Maximize All Windows (Minimalist Version) add-on by 'ericchase'. Note that forcing Firefox to start in a maximized window will make it easier to fingerprint the browser if JavaScript is enabled since the windows size is often quite unique.

Webpages don't fill the entire viewport (inner window)

When privacy.resistFingerprinting is set to true (as it should be), web content may not fill the entire viewport, also called the 'inner window'. The viewport is the part of the browser that displays webpages, not to be confused with the window described in the previous tweak which contains the entire browser. This behavior is controlled by a hidden preference, privacy.resistFingerprinting.letterboxing, that does not exist by default and which can be set to true or false. While not utilizing the entire viewport may be an annoyance, understand that disabling this setting is likely to make the browser easier to fingerprint. If you still want to disable this protection, you can create the preference in about:config (boolean) or add it to your user.js or user-overrides.js and set it to false.

Troubleshooting problems with add-ons

If you notice a problem that you think may be related to an add-on, there are some simple steps you can take to troubleshoot the issue before contacting the developer. In my experience problems with add-ons are usually a result of a conflict with 1) a setting in prefs.js, 2) a setting in user.js, 3) another add-on, or 4) something in userchrome.css or usercontent.css. Whatever the case, the following information should help you to troubleshoot the issue.

If you suspect an add-on is giving you trouble...

  1. Backup your Firefox profile! Load about:profiles if you don't know where it's located, then exit Firefox and find your profile folder in your file manager and press Ctrl+C and Ctrl+V to make a copy. When you are prompted for a new name, just add -bak to the existing name.
  2. If you have any custom configuration files, such as a user.js, userChrome.css or userContent.css, rename them (add .bak to the existing name), then start Firefox and verify whether the problem still exists.
    1. If the problem no longer exists, go to the Troubleshooting preferences section below.
    2. If the problem still exists, continue with the next step.
  3. Start Firefox and load about:support by entering that in the address bar, then click 'Restart with Add-ons Disabled'.
  4. Open the about:addons page and, one by one, enable each add-on until the problem reappears, at which point you will know which add-on is causing the problem.
  5. Go to and install a fresh copy of the problematic add-on and verify that the problem is still exists.
    1. If the problem no longer exists, your finished.
    2. If the problem still exists, submit a bug report to the add-on developer (see below).

How to submit a bug report like a pro

If you have a problem with an add-on, or with Firefox itself, you need to be able provide the developer with enough pertinent information so they are able to reproduce it, else they may simply ignore you. Comments like "it don't work" are useless to a developer and you shouldn't be surprised if they ridicule you for submitting such non-descriptive tripe. When describing the problem, be as brief as possible while still including every necessary detail. Here's a template which you can use for bug reports:

Operating system [name]
Firefox [version]
Add-on (if relevant) [name] [version] [link]
Affected webpage (if relevant) [URL]

Brief but accurate description of the problem...

What, if anything, you tried in order to solve the problem...

Precise steps to reproduce the problem...

With that information in hand, you need to find where the developer wants you to submit bug reports. If it's a buggy add-on, load up about:addons and see if there's a support link in the information for it by clicking the 'More' button. If there isn't, go to the add-on page at and see if the developer provides a link to a support website (preferred!) or at least an email address. If they provide neither, then you're left with no other choice than to post your issue in the add-on comments, but do this only when no other option is available and don't down-vote the add-on. Lastly, make sure the title of your submission is descriptive of the problem. Titles like "bro its so borked LOL" are meaningless to a developer who is now more likely to disregard your issue since you just exposed yourself as a 12 year old slab-fondler.

Associating settings preferences with preference name

On occasion you may have a need to know what preference in the prefs.js file is being changed when you change a setting in the Firefox settings UI (about:preferences). One easy way to do this is to make a copy of the prefs.js file, then change the setting(s), then "diff" the files using file comparison software that can highlight the difference between the two files.

Troubleshooting problems with prefs.js / user.js

First of all you should never edit the prefs.js file. Custom preferences should always be placed in a user.js file (or a user-overrides.js file if you're using the 'arkenfox' user.js). That said, problems resulting from settings in prefs.js, user.js, etc., can manifest in different ways from breaking desired Firefox or extension functionality to causing web pages to not work properly or failing to load at all. Following is one method of troubleshooting preference issues for those who are not comfortable using the Firefox console, or where the console fails provide useful information. Though tedious, this method always works if the problem is a result of a preference. You should have a decent code editor with syntax highlighting for editing js files.

  1. Start Firefox and enter about:profiles in the address bar.
  2. Create a new profile for testing, naming it something like '__TEST__' so it cannot be easily confused with your default profile. The new profile will become the default and we don't want that, so click the button below your original profile to make it the default.
  3. In the 'Root Directory' row, click the 'Open Directory' button for both your original and your testing profiles to open the folders in your file manager.
  4. Start Firefox using your testing profile. It may ask which profile to load since you now have more than one, but if it doesn't then load about:profiles again and select the option to open your testing profile in a new window.
  5. Now verify that the problem still exists, then exit Firefox. If the problem no longer exists, continue with the next step. If it does, troubleshooting the problem is beyond the scope of this troubleshooter, suffice to say that it may due to an add-on or custom CSS in your Firefox /chrome folder if you have one, etc..
  6. With Firefox closed, copy (Ctrl+C) the prefs.js file in your original profile folder and paste it (Ctrl+V) in your testing profile folder, overwriting the existing one.
  7. Repeat step 5. If the problem reappears you have verified it is due to a preference in the prefs.js file. If it does not, and you're using a custom user.js file, such as the 'arkenfox' user.js, repeat step 6 with your user.js. If it the problem now reappears, you know the trouble lies in in user.js, not prefs.js. If the problem is not reproduced then it is beyond the scope of this troubleshooter.
  8. With Firefox closed, open the prefs.js file (or user.js if that's where the problem lies) from your testing profile in your code editor and select roughly half of the contents of the file, making sure your selection starts at the beginning of a line and ends at the end of a line in order to avoid further problems. Next, cut (Ctrl+X) the selection (don't just delete it) and save the file. If your editor complains it is important that you ignore the warning and force the save. If it automatically reloads the file, you will need to disable that behavior in its settings.
  9. Keep repeating steps 5 and 8 until the issue disappears, at which point you know the preference causing the problem is stored in your clipboard (the last section you cut from prefs.js or user.js). Move on to the next step.
  10. Select all of the contents in prefs.js (or user.js) (Ctrl+A) and delete (not cut) the selection, then paste (Ctrl+V) the contents of your clipboard and save the file, again being sure to force the save if your code editor complains.
  11. Again, continue repeating steps 5 and 8 until you have narrowed down the problem to the single preference responsible.
  12. Once the problematic preference is isolated you can copy it to your user.js file (or user-overrides.js file if you have one) in your default profile and change it's value there after which you can verify the problem was solved by running Firefox with your default profile.

Once you have solved the problem in your default profile, you can delete your testing profile from about:profiles or from the profile loading prompt when Firefox starts.

More Firefox stuff

Other articles i've written about Firefox and its derivatives can be found on the Everything Firefox page.

For more CSS tweaks, see:

General Firefox stuff:

Recent changes


  • trivial edits
  • correct and improve the code in the "Styling the link target/network status tooltip" section (Firefox v112+)

48 thoughts on “Firefox Tweaks and Fixes and Styles and Things”

  1. “Unless you have a valid reason for doing so, you should never use your primary Firefox profile for troubleshooting (trust me on this) and so the first thing to do is backup your entire profile.”

    I learned it the hard way, which is mess it up first and then learn to do it right. I’ve followed your counsel and now I’ve got three ff profiles. One is named ‘testing’, another ‘default’ and the last ‘privacy’.


    1. i should also mention, when you copy from your privacy to the empty test profile, don’t overwrite the couple of files that are created when you created the test profile – times.json is one, and there may be another

  2. Hello,

    Thank you for your handy tips about FF
    I would like to share with you something I’ve found about a better scroll experience:
    “mousewheel.acceleration.factor”, 20 (I use 19 now, but that’s just my taste)
    “mousewheel.acceleration.start”, 1
    The scroll is really better only using these two lines, scrolling slowly is slow, scrolling harder is fast.
    For ex, I scroll up this page to top with 4 scroll only.

    Then, a good extension, maybe you know it already:

    Greetings from France

    1. i tried your scroll settings and i prefer my own :) thanks for sharing though

      and yes, not all of the settings are necessary – i included them just to be complete – many are now the default settings

      i played with the trace extension a while back but i stopped using it – i’m using too many extensions regarding privacy and security and at some point enough is enough, but again, thanks for mentioning it

  3. Regarding “Firefox doesn’t remember its window size after restart” and the Maximize All Windows extension (both the standard and minimalist versions): It works flawlessly in a Desktop Environment like GNOME and it is therefore a wonderful fix, but with my i3-gaps Window Manager it still doesn’t maximize Firefox.

    I have no good solution, just meant to mention it. Perhaps ericchase knows, if he has time and wants to have a look at it. I will deal with it by opening and closing another window on the same workspace until then. Not a huge deal, but it can be a little annoying because it must be done each time when starting Firefox.

    1. i didn’t look at the code, but i suspect Maximize All Windows is just using an API call and, if so, there’s probably nothing he can do about it – i’m just thinking about how the ‘gaps’ version of i3 does what it does – i wonder if it overrides maximize to set the window gap maybe? there may be hope for you though – i think i read somewhere that a future version of FF is going to allow the user to override the window sizing that the fingerprinting pref currently enforces

      oh, ps: don’t know if you’re aware, but i used to have another method in this article for maximizing FF which i dumped in favor of the much simpler Maximize All Windows add-on – check your window manager settings and see if you can apply window rules (maximize) to Firefox specifically – it didn’t always work for me (KDE), but it worked most of the time

      1. Of course, silly me: There is a full screen toggle keybinding in my config. I hardly ever used it, but this is a quick way of solving the Firefox non-full-screen issue! Thank you.

  4. Hello,

    Regarding fonts I did this:

    “In Firefox preferences, find the ‘Fonts & Colors’ options and click the ‘Advanced’ button.
    If you read English, select ‘Latin’ in the combination control, else select your preferred language.
    Set the ‘Proportional’, ‘Monospace’ and ‘Minimum’ font styles and sizes and remember your choices. I set the ‘Proportional’ option to ‘Sans Serif’ and all the other options to one of the sans fonts (not serif or sans-serif fonts)
    In the combination control, select ‘Other Writing Systems’ and set the preferences to the same values as in the last step.
    Disable the option, ‘Allow pages to choose their own fonts’.
    Install the Toggle Fonts add-on by Manuel Reimer.”


    “Lastly, if you use uBlock, read the ‘My filters’ section of the uBlock Origin Suggested Settings page which offers a way to allow all first-party fonts globally while disallowing all 3rd party fonts by default”

    Is it ok? Can I still use the “Toggle Fonts” addon if I added

    ! fonts: the following line will allow 1st party fonts globally while blocking all 3rd party fonts:
    ! to allow 3rd party fonts per domain:
    ! *$font,3p,
    ! to allow 3rd party fonts for additional domains:
    ! *$font,3p,|

    in Ublock Origine in the “my filters” tab ?

    Thank you.

    1. > Can I still use the “Toggle Fonts” addon …

      yes – the purpose of what you did is to use only the fonts you specify for all websites – as a result you will sometimes see unreadable characters that look sort of like Chinese and in these cases you can use the Toggle Fonts add-on to toggle the font setting for Firefox so that they display correctly

  5. In the “Redirecting this to that” section there is a sub heading “Bypass YouTube short links”. Does the ClearURLs (from the dummies guide) and or Skip Redirect (from your addon picks guide) addon not already do this? Or is this something else?

  6. I am not sure when this happened but I can no longer click a tab and drag it somewhere else, instead I start selecting the tab title. Do you know where this behaviour is controlled?

        1. I think there is a redundant * before the { in:
          /* override CSS preventing text selection */
          * {
          -moz-user-select: text !important;
          user-select: text !important

            1. it causes the problem described by AK47 above:

              AK47 says:
              May 30, 2020 at 7:56 am

              I am not sure when this happened but I can no longer click a tab and drag it somewhere else, instead I start selecting the tab title. Do you know where this behaviour is controlled?

              1. hmmm – there must be something else at play because i’m using that CSS code in Stylus myself and i can drag tabs…

                * {
                -moz-user-select: text !important;
                user-select: text !important;

                wonder if this could be Windows issue (i’m using Linux)

                1. This happens if browser.triple_click_selects_paragraph is set to false and using your allow text selection css. This also breaks moving the extensions from the Customize Firefox. Also if you triple click in a page it will select the tabs text and some extension icons.

                  1. in my case ‘browser.triple_click_selects_paragraph’ is false and i’m using the allow select text css – on Linux here, but i’ve no idea if that’s the difference

                    1. My bad it’s just that css. What if you used browser window instead of ‘*’ ? I don’t have any sites to test right now. But I think the selector for main browser window is “#browser”.

                    2. i couldn’t quickly find a reference to #browser selector – both Mozilla and the W3C use the asterisk as a universal selector

                    3. universal selector includes the whole browser, hence when u triple click in the page, tabs text also gets highlighted when browser.triple_click_selects_paragraph is set to default value.

                    4. There could be many other issues with the css even if one was to use it only on the page. Youtube fullscreen button breaks. If one presses F it doesn’t work most of the time. First I thought it was because of RFP but it wasn’t.

  7. You must check out how awesome, no seriously check it out, the Firefox interface looks when you use Dark Reader (make sure you Enable the Custom theme from the More tab on the toolbar icon menu) in combination with the CustomCSSforFx styling. The interface looks really sleek and polished.
    The project is on The privacy policy seems ok?

    I really wish I could have access to all my bookmarks from the big Firefox Menu Button » Library » Bookmarks, but you only see Recently Bookmarked items. It should look the same as when you go to Boomarks on the Menu Bar.

    1. i used Dark Reader for quite a while (perhaps months- longer than any other i tested) and i think it’s not as good as ‘Dark Background and Light Text’ – Dark Reader slows down page loading to a crawl in many instances, and there’s many comments about this problem on AMO – ‘Dark Background and Light Text’ just seems way faster to me and significantly easier to work with

      EVERY ONE of these dark-web add-ons completely fail on many websites, but ‘Dark Background and Light Text’ seems to fail perhaps less often and is easier to switch to another CSS style when it does ( i set ‘simple CSS’ as the default mode )

      if you want a dark theme for the Firefox UI, just enable it from the ‘Customize’ context menu (R-click on an empty space in the tab bar, or from the ‘hamburger’ menu, etc.) – Dark Reader does not affect the Firefox UI to my knowledge – only how web pages are displayed (the ‘view port’)

      > I really wish I could have access to all my bookmarks from the big Firefox Menu Button » Library » Bookmarks

      you can put the ‘show sidebars’ icon on your navigation bar which will open the sidebar with all your bookmarks, or history – you can also add the ‘show your bookmarks’ icon which also is used to access all your bookmarks

      1. You are right about Dark Reader slowing down page loading in some cases (Github, Bitchute, TheBlind, to name a few), but, that is when you have the dynamic theme generation mode enabled. If you choose static it does a very good job. Dark Reader does change the styling of the UI also. Perhaps it is new since the last time you used it. It has a specific option to change the browser UI theme as well. But you only really see it in action when you use CustomCSSforFx.

        That said, the Dark Reader theme for the Firefox interface does look a little bit different to the built-in dark theme. If you look at the two side by side you will see. Anyway that is not a biggy. I should be able to tune styling using my own CSS. It’s just not that easy to find the correct elements to style.

        Regarding the bookmarks. Will I be wasting my time or is it possible to change what the big Firefox Menu Button » Library » Bookmarks menu displays through userChrome.css. Can I change that menu to display all of my bookmarks using CSS? I get that I can use the sidebar button from the navigation bar but I prefer the menu I am referring to. If it is possible I will keep scratching, I just don’t want to waste my time.

        1. very sorry your comment didn’t get published when it should have been – it looks like you submitted it multiple times and instead of deleting all but 1 copy, i apparently deleted them all

          > Dark Reader does change the styling of the UI also.

          i probably mixed up Dark Reader and Dark Background and Light Text in my mind – the latter does not alter the FF UI

          > is it possible to change what the big Firefox Menu Button » Library » Bookmarks menu displays through userChrome.css. Can I change that menu to display all of my bookmarks using CSS?

          i highly doubt it – CSS can only style elements that are already there essentially – what i do is add the ‘Bookmarks Menu’ icon to the navigation toolbar – that’s the one that looks like a star with a horizontal bracket under it – you’ll find it in the ‘Customize’ tab

  8. I am stuck with a small CSS syntax problem, can you please help.

    I have my own userChrome.css, exactly as you describe here in your guide, in which I import the aris-t2 library,

    @import “./custom/aris-t2/userChrome.css”;

    And in my own userChrome.css file I have added additional customizations to the ones in your guide. For example I made a copy of “custom_tab_color_settings.css” in ./chrome/config and customized it. And in my own userChrome.css file I import it

    @import “./config/custom_tab_color_settings.css”;

    So far so good. It is easy to add/include something that is not added/included by default in


    However, if ~/chrome/custom/aris-t2/userChrome.css has an include in it already,

    @import “./css/tabs/classic_squared_tabs.css”; (line 321) how can I, for lack of a better term, exclude it in my userChrome.css file instead of commenting it out and then having to always remember to maintain that customization.

    1. Is ok I will answer myself, you can just use the not syntax like in C. In my own userChrome.css I add

      !@import “./css/tabs/classic_squared_tabs.css”; (note the ! in front like != meaning not equal to)

      1. Oh, no that doesn’t work. It works if I do it in the /chrome/custom/aris-t2/userChrome.css file but if I do it in my /chrome/css/tabs/userChrome.css it does not work. The @import still happens. So it appears to be easy to include something that is not included already but I have no idea how to negate.

        1. sorry for not responding – i see the mail queue for the mail server is ‘stuck’ and so i haven’t been getting mails

          not 100% sure i’m understanding what you’re trying to do – it looks like you are using aris-t2 css and wanting to override some of the settings whilst avoiding the hassle of re-editing them after an update

          the css should be processed in order, so if you have the main code in ‘a.css’ and the override code in ‘b.css’, then if you include ‘b.css’ last, it *should* override ‘a.css’ i would think (you could try it in reverse order if that doesn’t work)

  9. Can you help with a little tweak that i don’t know where to look for. I know what causes it but i do not know why.

    To start the conversation i will say that i create a new profile for my test. After launching the new profile it is on the dark theme and then i install uBlock. When i now open uBlock settings, including the menu when clicking on the toolbar icon, the entire uBlock interface is dark themed inline with the dark theme of FF.

    However, after ‘installing’ the arkenfox user.js and user-overrides.js the uBlock interface goes to its default white interface even though the rest of the FF interface is still dark. It is obviously a user_pref (perhaps even a combination of some) causing this behavior but i don’t know where to start looking for the user_pref.

    1. I will reply to myself. Which ever user_pref is responsible it doesn’t matter that much because I see the latest version of uBlock has a dark theme itself. Which essentially solves the problem.

Leave a Reply

Your email address will not be published. Required fields are marked *