Install a Material Design inspired theme in Firefox - gHacks Tech News

Install a Material Design inspired theme in Firefox

MaterialFox is a user-designed theme for Firefox that turns the Firefox web browser into a material-design inspired browser.

Firefox users have two main options when it comes to changing the default theme of the browser. Starting with Firefox 57 Stable and Firefox 60 ESR, the options are to install themes from the official Mozilla extensions website or to apply custom styles to the browser.

The option to install full themes that could change any part of the browser interface is no longer available as of Firefox 57 and Firefox 60 ESR. The best option to modify the Firefox interface is through the use of styles and CSS but it appears that it is not possible to upload these interface changes to Mozilla's official repository.

Note: MaterialFox has been optimized for Firefox on Mac OS X. While you can install the theme on Windows or Linux devices, expect some quirks that the developer needs to iron out in future releases.

MaterialFox

material design firefox

Installation of the theme is a bit more complicated than hitting the install button on the Mozilla website. While that is the case, it is the only option to make certain modifications in Firefox as themes can't be used for that.

Here is how you install the theme in Firefox:

  1. Go to the project's GitHub page and download the entire project with a click on "clone or download" and the selection of "download ZIP".
  2. Extract the archive on your system using built-in unzipping functionality or by using programs such as 7-Zip or Bandizip. If you want to know more about 7-Zip or Bandizip check out our reviews of recent versions.
  3. Open Firefox, type about:support and there on the "open folder" button to open the profile folder on the hard drive. You may use about:profiles instead for that.
  4. Copy the entire chrome folder into the Firefox profile folder if "chrome" does not exist.
    • If a chrome folder exists, you may have made modifications to Firefox in the past using the userChrome.css file. You could copy the content of the MozillaFox userChrome.css file and paste it at the end of the existing userChrome.css file in the Firefox profile folder. Note that you may run into dupes if you do depending on the CSS that is already in the file.
    • You do need to copy all other files that are in the MaterialFox chrome folder to the Firefox chrome folder.
  5. Load about:config?filter=svg.context-properties.content.enabled and the set the preference to true with a double-click.
  6. Install the Firefox extension Simple new tab button.
  7. Select Menu > Customize.
  8. Remove the "new tab button" on Firefox's tab bar using drag and drop.
  9. Move the new tab button of the Simple new tab button extension to the rightmost location on the tab bar of the browser. This places the new tab button at a fixed location on the rightmost side of the tab bar in Firefox.
  10. Restart Firefox.

Firefox should open up in the new Material Design look. The theme styles the titlebar and browser toolbox only at this point in time. The developer may release new versions of the theme that style other browser areas such as the right-click context menu.

Now You: Do you use themes or modifications in Firefox or your browser?

Summary
Install a Material Design inspired theme in Firefox
Article Name
Install a Material Design inspired theme in Firefox
Description
Do you use Firefox but like Google's Material Design language or the Chrome interface better? Install MaterialFox for Firefox to get a Material Design theme in the browser.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. Money said on August 29, 2018 at 7:51 pm
    Reply

    Cute… until corporate Mozilla gets userChrome.css on the chopping block.

  2. John Fenderson said on August 29, 2018 at 8:01 pm
    Reply

    Yes, I heavily modify the look & feel in my primary browser (Waterfox) using Classic Theme Restorer. I’m not a big fan of the Chrome-like UI (nor of the Material Design aesthetic).

    1. Anonymous said on August 30, 2018 at 8:09 am
      Reply

      It’s not safe using outdated browser!

      1. Farid Le Fleur said on August 30, 2018 at 12:34 pm
        Reply

        @anonymous Ir is not safe to be a die-hard Mozgoogle Firechrome supporter ;)

      2. John Fenderson said on August 30, 2018 at 4:56 pm
        Reply

        Waterfox isn’t outdated.

    2. TelV said on August 31, 2018 at 1:03 pm
      Reply

      @ John Fenderson,

      Re: Waterfox which I also use, do you happen to know what all those user enabled telemetry settings in about:config are all about?

      For example, there’s one called “toolkit.telemetry.cachedClientID” which appears in bold type with an alpha-numeric value.

      Another one is “devtools.telemetry.tools.opened.version” with the value (“DEVTOOLS_SCREEN_RESOLUTION_ENUMERATED_PER USER”:”56.2.2″)

      One of the reasons I use Waterfox is because I was under the impression that all telemetry was disabled.

      I got all these and others by just typing “telemetry” (without quotes in the Filter field at the top).

      Oh, and I haven’t to my knowledge deliberately enabled any telemetry settings in Waterfox.

      1. John Fenderson said on August 31, 2018 at 7:56 pm
        Reply

        @TelV

        I can’t say, specifically, but I do know that there are a number of about:config entries that are just left over from Firefox and don’t really do anything in Waterfox. There are a few bugs filed in the Waterfox bug tracker to have these removed in order to prevent confusion.

        The entries you cite may (or may not) be in that class. I don’t know. There would be no harm in changing those settings to something that you’re comfortable with.

        I have not done a full security audit of Waterfox (meaning, in part, that I haven’t sniffed the traffic it generates), so I can’t speak with authority on this. My standard practice is to block all outgoing communications with my firewall by default, then whitelist specific things I’m OK with. That way, if something sneaky is trying to phone home, it can’t.

      2. TelV said on September 1, 2018 at 11:19 am
        Reply

        Thanks for the response John.

        I assume you don’t have similar settings in the telemetry section in Waterfox?

  3. Tom Hawack said on August 29, 2018 at 9:37 pm
    Reply

    A browser out of the box never satisfies me, neither many default settings neither their layout, ugly and space poorly thought. Because Firefox is my browser of choice I tweak its layout consistently and I do this since it’s version 57 via my FF profile’s userChrome.css and userContent.css.

    I agree of course with Money’s comment : “[…]until corporate Mozilla gets userChrome.css on the chopping block”. That’s going to pose a problem (I mean a challenge!).

    I tweak almost every part of Firefox’s GUI, thanks to:

    Custom CSS for Firefox : https://github.com/Aris-t2/CustomCSSforFx
    Custom Scrollbars for Firefox : https://github.com/Aris-t2/Scrollbars
    simpleMenuWizard : https://github.com/stonecrusher/simpleMenuWizard
    userChrome.js support to Firefox : https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875

    The latter, userChrome.js support to Firefox, does marvels. First I have in mind, among everything it allows me to do, is the NewTab_custom-page.uc.js (https://luke-baker.github.io/) with which you can set your newtab page with 20 lines of code, no localhost required, beautiful! Nine other userChrome.js files here and there goes Firefox as nice as before 57 …

    Forgot to mention that I modify most extensions’ toolbar icons, not because they are ugly for most of them (this is not a beauty parlor, it’s a browser!) but because I can’t figure them out : 16px has to be drawn on a 16px frame, not resized from 128 or even 64 to 16px in which case you see nothing, not relevant, hard to differentiate chaos1 from chaos2 …

    That’s all, Folks :=)

  4. daveb said on August 29, 2018 at 11:45 pm
    Reply

    omg no. Material design needs to die a hipster death not be expanded.

    1. Richard Allen said on August 30, 2018 at 6:47 am
      Reply

      Thank You! I’m thinking the exact same thing.

  5. ULboom said on August 30, 2018 at 2:11 pm
    Reply

    Not sure what Material Design is supposed to mean; the opposite of Immaterial Design? It’s gotten to where I just ignore all the contrived gibberish designed to keep material interest in immaterial fleeting changes. For the most part, “developers” are wholly incapable of explaining what their developments do. There are plenty of good developers (no quotes!) outputting useful code they can explain, however. Mainly, I just want web stuff to work!

    My browser’s very customized but for functionality, not purtiness, the only appearance change is a soft seafoam frame. The vast majority of appearance changes seem to make text and icons almost unreadable. Yeah, the entire solar system in your browser may be cool but not if the controls are buried in Uranus.

  6. John Doe 101 said on August 30, 2018 at 9:39 pm
    Reply

    Do NOT know why here is so much Negativity against Themers, i really like the Design transscirpted to FF.

    I think it’s a good one and thanks alot to the Maker. And it is for free, so be a little more patient.

    In my Mind, i think it’s better than Quantum UI and similar to Chrome Refresh Design, or equal and smooth.

    So, keep calm u no have to use it, but i think, that is what Quantum should have been,…end of line……..

    1. John Fenderson said on August 31, 2018 at 8:01 pm
      Reply

      @John Doe 101

      What negativity is there about theming? I literally don’t see a single comment disparaging that, and see several embracing it.

  7. A different Martin said on September 2, 2018 at 4:02 am
    Reply

    I use the Compact Moon theme (and accompanying Compact Moon Options extension) in Pale Moon. I have so many pinned tabs in my standard session that without Compact Moon, I’d have to choose a multi-row tab bar in Tab Mix Plus. Actually, you know what? I recently pinned a few more tabs to monitor what my router (which I strongly suspect of sucking) is up to, plus a tab to monitor local air quality (which has been *terrible* here in Seattle, thanks to wildfires) and that left me with too little space for unpinned tabs. I just switched to a two-row tab bar. But without Compact Moon, it would have to be three or four rows. ;-) Anyway, I only have a 15.6″ screen, so two thumbs up for Compact Moon.

Leave a Reply

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

Please note that your comment may not appear immediately after you post it.