Generic CSS Loader 2 improves the loading of custom CSS code in Firefox

Martin Brinkmann
Jan 7, 2014
Firefox, Firefox add-ons
|
5

Firefox users have lots of options to customize the web browser, and in particular the interface of it. From using the integrated customize options available to them over installing extensions such as Classic Theme Restorer to custom CSS code that can modify the interface of the browser.

And those adventurous and knowledgeable enough can build their own version of Firefox from Open Source code if they so desire.

Adding CSS code to the userChrome.css file is one of the most popular options, likely because it can be done without having to install yet another extension to the browser.

It is likely that most Firefox users are not aware of the possibility, as it is not advertised by Mozilla and requires some knowledge of CSS to begin with.

Basically, to come up with your own modifications, you need to look up interface IDs of the browser that you modify with CSS code (or use the built-in Browser Toolbox for that). This code needs to be placed in the userChrome.css file that you find in the Chrome folder of the Firefox profile folder. It may not exist by default (both the Chrome folder and the file), so that you may have to create it.

Generic CSS Loader 2 improves that process. While it does not change anything in regards to coming up with the style changes, it enables you to paste them directly in a small window of the browser. So, no more opening the profile folder to add the information to it there.

generic css loader 2

What's also interesting is that it comes with a preview button that you can use for easier testing of new code.

This works for code that you write yourself, but also for code that you find elsewhere, as you can simply paste it into the form the extension provides to run it in the browser.

Another interesting feature is the ability to add theme specific code. Instead of running code globally, CSS code that you add here will only be executed if the selected theme is enabled. If it is not, it will be ignored. Useful if you want to make modifications to a Firefox theme that you have installed.

Code can also be unloaded in the browser, which is excellent for testing purposes.

The author has added the launcher to the Web Developer Tools menu. Press Alt to bring up the menubar, and select Tools > Web Developer > Generic CSS Loader from the menu. Or, use the keyboard shortcut Ctrl-Alt-/ for that.

Verdict

If you work with userChrome.css code regularly, or simply want an easier way to enter it, then you may want to try out Generic CSS Loader 2 as it simplifies the process.

Now Read: Change Firefox's min and max tab width with CSS code.

Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. hum said on January 8, 2014 at 10:16 am
    Reply

    Except for the theme-specific styles, isn’t Stylish more convenient for applying custom styles?

    1. Ken Saunders said on January 8, 2014 at 11:41 am
      Reply

      It depends on what your needs are.
      Generic CSS Loader 2 is a whole lot lighter (uses far less resources) than Stylish and provides extremely basic options. It’s a good quick way to apply some basic styles to sites, perhaps UI elements, fix annoyances, etc,, but for more involved, deeper customization, web development, and with more options, ways to manage styles and so on, of course Stylish is the way to go.
      Using Stylish-Custom along with Stylish is essential imo.

      The original developer of Stylish-Custom no longer maintains it so Sonny Razzano (addons.mozilla.org/firefox/user/srazzano/) has taken it over and has done some really great work with breathing new life into it.
      http://forum.userstyles.org/discussion/37939/stylish-custom-add-on/p1

  2. Ken Saunders said on January 8, 2014 at 2:18 am
    Reply

    It is a good add-on. Pretty lightweight and simple.

  3. Q said on January 7, 2014 at 8:13 pm
    Reply

    Useful. Thanks.

  4. Karl Gephart said on January 7, 2014 at 11:07 am
    Reply

    Sweet! Got the addon in my AIO sidebar for even faster and better access to userChrome.css than the file itself from the Easy Access addon! Brings up my FXChrome theme easily! Thanks again, Martin! (Of course, I may be ditching FXChrome this Spring once my browser is assimilated by Australis! Depends on what the Reversal addon does! LOL!)

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.