Customize Firefox 57 with CSS - gHacks Tech News

Customize Firefox 57 with CSS

Custom CSS for Fx is a collection of CSS styles for Firefox 57 and newer by the author of the popular Firefox add-on Classic Theme Restorer.

Firefox 57 won't support Classic Theme Restorer or any other interface changing extensions or themes anymore because of the switch to a WebExtensions exclusive system. The new WebExtensions system prevents changes to the browser's user interface by not providing APIs to extensions developers.

The only option that is left for Firefox users to modify the UI, apart from what Mozilla provides natively in Firefox, is to use CSS.

Firefox users who know their way around CSS may edit CSS files manually to modify their version of the web browser. Most Firefox users on the other hand probably don't, and that's where Custom CSS for Fx comes into play.

Customize Firefox 57 with CSS

classic firefox 57

The project is hosted on GitHub, and it is maintained by Aris who is known for popular Firefox add-ons such as Classic Theme Restorer and NoiaButtons. Classic Theme Restorer was created as a response to the Australis interface that Mozilla launched in Firefox 29. The extension won't work in Firefox 57 or newer anymore because Mozilla dropped support for legacy add-ons in that Firefox version, and did not introduce capabilities to modify the user interface as WebExtensions API.

The startpage of the project offers information on locating the profile folder of the Firefox web browser, and using the provided styles to modify Firefox.

The easiest way to locate the profile folder is by loading about:support in the browser's address bar, and clicking on the "open folder" button under Application Basics > Profile Folder.

You need to create a folder called chrome if it does not exist in the root of the profile directory. Once done, copy the content of the archive into that folder. Make sure that userChrome.css and userContent.css are located in the root of the chrome folder.

This is all that needs to be done to add these custom styles to Firefox. There is however another step that you may want to take, and that is customizing the tweaks.

The default set of tweaks may appeal to some users, but the CSS files come with options to enable or disable different tweaks to change the interface further.

userchrome css firefox styles

Open the userChrome.css file in a plain text editor. The file uses the @import command to import the actual CSS styles from CSS files. This is done to keep the main userChrome.css tidy and make it easier for users of Firefox to modify it.

Lines that begin with /* are commented out and the CSS files they link to are not imported because of that.

What you need to do is go through the listing one section at a time to determine which of the available tweaks you'd like enabled in Firefox.

You unload tweaks by adding /* in front of the line and */ at the back. Similarly, you remove /* in front and */ at the back to enable a tweak.

Here is the list of tweaks that is available right now:

  • Modify navigation toolbar buttons.
  • Enable Squared buttons
  • Change icon appearance
  • Change the app button popup.
  • Change bookmarks menu and popup appearance.
  • Old bookmarks toolbar  button appearance
  • Other button settings (Forward button hide, back and forward buttons separated history popups, zoom buttons hide reset).
  • Custom back and forward buttons appearance
  • Application/hamburger button on navigation toolbar
  • Application/hamburger button in Firefox titlebar (Windows only)
  • Tabs appearance (style, toolbar position for instance below toolbars (read: tabs not on top), tab titles, icons, and more.
  • Modify searchbar, context menus, icons, and other toolbars.
  • Change the style of the location bar.

Some of these are self-explanatory. Others are not, but you have two options when it comes to these. Either enable them and check them out directly, or open the CSS file that gets loaded to find out what they do. The latter requires some knowledge of CSS however.

The userContent.css file uses the same layout. It imports CSS files, and it is up to you to enable or disable those.

A list of suggested native interface tweaks and about:config tweaks are provided as well by the project to modify Firefox's appearance further.

Closing Words

Custom CSS for Fx offers plenty of interface modifications for Firefox 57's interface that cannot be done using extensions or using built-in features. Existing Firefox users may find it useful, especially if they have used Classic Theme Restorer or a comparable add-on until now.

Updates are released regularly by Aris; that's good not only for new functionality that may get introduced through tweaks, but also to keep the styles compatible with new Firefox releases.

 

Summary
software image
Author Rating
1star1star1star1star1star
4 based on 21 votes
Software Name
Custom CSS for Firefox
Software Category
Browser
Landing Page




  • 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 (video ads) or subscription fees.

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

    Comments

    1. HK-Rapper said on November 13, 2017 at 11:49 am
      Reply

      Hello Nightly friends, want FF57+ look again like Firefox Classic?

      Preview: https://i.imgur.com/qmGdeqX.png

      1) Select dark theme
      2) go to customize
      3) add menu bar, bookmark bar, you MUST select small/compact layout (most important step!)
      4) try my userChrome.css

      Link: https://hastebin.com/efunisosem.css

      Some of the features: Bottom Tabs, slim tabbar, clean integrated search (limited width)

      You will never want to turn back again from the new Firefox.

      1. HK-Rapper said on November 13, 2017 at 12:21 pm
        Reply

        For optimal experience and un-breaking some changes, please also try the following addons:

        https://i.imgur.com/Ge8T9As.png

        PS: If they don’t dramatically change FF59 (the base build for the 2018 ESR version) and these addons and CSS continue to work, I feel like all is going to turn out well despite the paradigm change with webextensions.

        greetings

        1. Anonymous said on November 13, 2017 at 6:45 pm
          Reply

          You’re are using a lot of add-ons concerning privacy, included uMatrix, and for “optimal experience” you put a link on Ghacks redirecting to a page with 20 scripts just to see an image. Nonsense?

      2. Appster said on November 13, 2017 at 1:45 pm
        Reply

        @HK-Rapper:

        Wow, truly impressed… I am not attempting to diminish your work in any way, as it’s better than nothing obviously, but you should be aware that most of the stuff you posted could be done within CTR with five clicks or so before. Again, I don’t get how people can put up with fiddling when Mozilla has removed far more comfortable options just hours before. It’s beyond me. We should pressure them to do something about weak ass WebExtensions instead of fiddling ourselves. They ruined it, they need to fix it. It’s not up to us.

        Also, saying that Firefox 57 “is going to turn out well” just because of your userChrome.css is a bit of an overstatement, don’t you think? I’ll show you why. If you can show me how to replicate:

        – the entire Tab Mix Plus
        – private tabs
        – a separate downloads window (as opposed to the damn built-in pop-up)

        Then we are talking! Legacy add-ons had more capabilities than fiddling with the UI. They brought actual feature enhancements.

        Still, your CSS code might help people who don’t need anything more. I just wouldn’t overrate it as much as you do.

        1. HK-Rapper said on November 13, 2017 at 2:31 pm
          Reply

          I avoid bloat like CTR because it often broke for me after Nightly updates in the past. A simple userChrome.css is puristic, minimalistic and directly interfaces with Mozilla official standards. It can be rolled out with custom installers if someone would, let’s say want to use it in a corporate or educational environment.

          You should try some of the suggested addons in my followup post which give me 90% of the same experience as I previously had on FF52 ESR.

          Shame there is no help for people who always 100+ tabs open, a strange case of digital compulsive hoarding.

          >private tabs
          What for? I never save history and uMatrix prevents most cookies from being created, CookieAutoDelete scrubs them after closing tabs.

          >I just wouldn’t overrate it as much as you do.
          But there is no cure for the always unhappy. Regarding bookmarks: https://i.imgur.com/5wdqvXL.png

          Leave a man some joy, you could need a cheer up it seems.

        2. Appster said on November 13, 2017 at 3:59 pm
          Reply

          @HK-Rapper:

          > I avoid bloat like CTR because it often broke for me after Nightly updates in the past.

          1) CTR is/was meant for stable or ESR, not Nightly.
          2) Who uses Nightly anyway? I won’t test any Beta/Alpha unstable crap for Mozilla, nor will I report data to them, that’s for sure. Don’t know about you.
          3) CTR is not bloat. It utilizes userChrome.cssjust as much as you would, just in a way easier and more comfortable way.

          > A simple userChrome.css is puristic, minimalistic and directly interfaces with Mozilla official standards.

          It’s neither puristic (in a masochistic sense of the word, maybe) nor minimal. It’s fiddling with stuff when 99% of what you are doing has been already available in an add-on.

          > It can be rolled out with custom installers if someone would, let’s say want to use it in a corporate or educational environment.

          Nobody actually does that AFAIK.

          > You should try some of the suggested addons in my followup post which give me 90% of the same experience as I previously had on FF52 ESR.

          With all due respect… Most of the add-ons shown there are pretty nonsensical when it comes to recreating UI elements Mozilla deliberately broke. Except Downloads Window, which is legacy, haha.

          > Shame there is no help for people who always 100+ tabs open, a strange case of digital compulsive hoarding.

          You realize that Tab Mix Plus is not only for tab hoarders, right? Using it despite not being a tab hoarder myself.

          > What for? I never save history and uMatrix prevents most cookies from being created, CookieAutoDelete scrubs them after closing tabs.

          You want your history saved in some cases, especially when researching things. It’s useful if you have to separate those work-related tabs from your own hobby stuff. A general setting won’t achieve that.

          > But there is no cure for the always unhappy.

          Unhappiness is sometimes induced by others, especially when they are deliberately breaking your stuff. Generalizations do not always work, son.

          > Leave a man some joy, you could need a cheer up it seems.

          Watch out for Cliqz while you cheer. It may record that, too. :D

        3. HK-Rapper said on November 13, 2017 at 4:45 pm
          Reply

          @Appster:

          All you have contributed today was extreme black and white thinking full of surrenderism and cynicism. You have not provided a single astute solution to deal with the ESR v52 being discontinued and replaced next year.

          Despite your tantrum even you will either evolve (ESR 59), leave to Chrome (I can dream), or be stuck on outdated insecure code (end of life ESR ~April 2018).

          >Who uses Nightly anyway? I won’t test any Beta/Alpha unstable crap for Mozilla, nor will I report data to them, that’s for sure. Don’t know about you.

          People who care, I filed dozens of bug reports under my real name and helped developers when they asked for replicating a bug.

          >CTR is not bloat. It utilizes userChrome.cssjust as much as you would, just in a way easier and more comfortable way.

          It is for the average joe who doesn’t like bare metal tweaking.

          >Unhappiness is sometimes induced by others, especially when they are deliberately breaking your stuff.
          >Generalizations do not always work, son.

          That’s still sir to you, I pay my own food, water, electricity and real estate. God who hurt you, and what is up with these inane infantile smileys?

          >Watch out for Cliqz while you cheer. It may record that, too. :D

          Cliqz won’t install on those machines where users manually downloaded an offline installer instead of the <1MB webinstaller. Please educate yourself.

          Please try working on your netiquette, for the sake of your fellow humans that have to put up with you.

      3. Daniel said on November 13, 2017 at 10:15 pm
        Reply

        Can this script be imported into Tampermonkey or GreaseMonkey?

        1. Appster said on November 13, 2017 at 10:28 pm
          Reply

          No. WebExtensions have no access to the UI.

      4. Dee Dee said on November 18, 2017 at 1:04 am
        Reply

        I’m really new to CSS. When you say on point 4. try my userChrome.css what do you mean? Am I to copy the lines into my userChrome.css? Where do I copy them or make changes. Any insight will be most appreciated. Like so-o many others, I’m aggravated with Firefox. They present a “better” product, but they always screw us on the visuals! Millions of us really like the Classic look and don’t want to change.

      5. daniel said on November 23, 2017 at 2:22 am
        Reply

        @HK-Rapper This is just perfect. Thank you

    2. ZzzZombi said on November 13, 2017 at 11:54 am
      Reply

      Also if you know your way around CSS just a little bit, you can inspect the whole FF interface by enabling “Enable browser chrome and addon debugging” and “enable remote debugging” from the advanced settings of the developer console. After that you press “ctrl+alt+shift+i” and it opens a new FF window in which you can inspect UI elements just as you would with a regular website.

      1. Pants said on November 13, 2017 at 1:35 pm
        Reply

        ^^ Yup, … and from that “Developer Toolbox”, the easiest way to identify something is to just use the element picker in the top left (the icon is a rectangle with a mouse cursor in it)

    3. Gambino said on November 13, 2017 at 11:54 am
      Reply

      It has always been possible to edit Firefox with userChrome.css. What’s sad is that now Mozilla make it so much harder for people to do it easily with the gutted Stylish addon. I’m just going to wait for some nefarious actor coming out with a third-party software that messes with the Firefox profile folder pretending to fill the gap that Stylish used to be able to do. No security threat there!

    4. Appster said on November 13, 2017 at 11:57 am
      Reply

      You know, we used to have actual add-ons for that kind of stuff. In all honesty, how is Firefox different now from Vivaldi? I can customize Vivaldi via CSS code all the same, obviously.

      1. Appster said on November 13, 2017 at 1:23 pm
        Reply

        Addendum: I find it ridiculous what users are willing to put up with when these changes were clearly deliberately introduced by Mozilla. Instead of promoting comfortable add-ons Mozilla is now forcing you to fiddle with userChrome.css.
        Most of the stuff people do with CSS code came with Classic Theme Restorer options anyway. But instead of pressuring Mozilla to make CTR and/or Stylish in its most feature-rich forms compatible with the current code base, people are satisfied with the shenanigans forced on them and call the feces on their collective heads nice hats.
        Humorously spoken, if Mozilla hid the option to access userChrome.css away in an unknown location, additionally protecting it with a secret password only Mozilla knows, you guys would try and go search for it. Hilarious!

      2. Richard Allen said on November 13, 2017 at 1:26 pm
        Reply

        You’re kind of overstating the ability in Vivaldi aren’t you?

        For one thing, after Every update the css is Removed and you will need to be sure to save all of your custom css in a separate file as a reference. After you are sure to have done that you can then modify the browser.html file inside the Application folder, then, you have to open the ‘style’ folder and copy your custom css file into that folder. If you per chance use the snapshots then you will actually get very familiar with the Whole process because Vivaldi is by no means bashful about pushing out frequent updates (a good thing) even the stable channel gets it’s share.

        As Annoying as it is to keep re-doing the css I appreciate the fact that Vivaldi has that ability, I’m using a bit myself and probably always will.

        1. Appster said on November 13, 2017 at 1:35 pm
          Reply

          @Richard Allen: As a Vivaldi user I’m of course aware of the procedure. It’s kind of annoying, that’s very true. However – and this was the basic essence of my post – we should really ask ourselves how it could come that vvialdi and Firefox are now in the same league and why Mozilla is forcing us to fiddle with userChrome.css in the first place instead of giving us back actual, far more comfortable add-ons. They should introduce the ability to change UI elements to WebExtensions, but they won’t do it. Brand recognition, you know. After all, UI is a central part of branding. How dare the users touching it? Let’s make it much harder for them.

        2. Appster said on November 13, 2017 at 1:46 pm
          Reply

          * Vivaldi

        3. Richard Allen said on November 13, 2017 at 2:20 pm
          Reply

          @Appster
          Obviously, I know, that you know, that I know, that you know the process on using css in Vivaldi. LoL. I broke it down for all those that don’t use Vivaldi and those that do but don’t use css. You did say “I can customize Vivaldi via CSS code all the same” and the reality is, considering it’s just temporary, it’s not the same.

          “vvialdi and Firefox are now in the same league” not even close to the same UI customizability or available security and privacy options. Don’t get me wrong, I like Vivaldi, performance is excellent and after using the Chrome useragent in a command line switch the inconsistent page load times that I was seeing finally went away. If someone would figure out the mediocre smooth scrolling in chromium browsers I would be happy to use it more than I do now.

          I will agree that it sucks that FF WebExtensions do not have browser UI level css access anymore but I don’t know anyone ‘personally’ that cares about a browser UI being customizable. Seriously. Actually, I don’t care all that much about webext UI level css access either because I’ve been using userchrome since FFv3 so for me it’s not a thing. I feel for you!!! :-D

        4. Appster said on November 13, 2017 at 4:19 pm
          Reply

          > not even close to the same UI customizability

          It’s pretty close. Look what is still possible in Firefox 57: Rearranging some UI elements and fiddling with CSS. The former is still a (albeit pretty small) advantage of Firefox, the latter also works with Vivaldi. Pathetic when you think about what was possible with Firefox not too long ago. Remember full themes? Remember CTR? Roomy Bookmarks?

          > or available security and privacy options.

          The fact alone that one has to considerably change Firefox’s about:config options to make it acceptable privacy-wise speaks volumes about Mozzarella, pardon, Mozilla. Ever heard of Cliqz in this particular case? I distrust Mozilla for reasons.
          By the way, tweaking the browser alone is not enough. Your OS does some stuff, too. I use Little Snitch on macOS which blocks unnecessary conncetions. If it’s that bad on macOS I can’t even imagine how bad it must me on the Windows 10 botnet.

          I agree with you about the mediocre scrolling performance of Blink-based browsers.

          WebExtensions deliberately not having access to UI elements sucks big time and is a reason to ditch Firefox if you don’t intend to fiddle as Mozilla in its infinite wisdom intends you to do.

        5. Richard Allen said on November 13, 2017 at 5:07 pm
          Reply

          @Appster
          Geez, now you’re understating the facts trying to justify your rational. That’s awesome, thank you for the laugh! Did you even read the article? Are you aware of how much the elements can be changed? Or did you see that the article was about FFv57 and went straight to the comments? There is a github link to Aris-t2’s work, go check it out and then tell me Vivaldi has the abiltiy to do the same.

          Cliqz? Correct me if I’m wrong but that is only in Germany and affects less than 1% of those users… in Germany. Don’t live in Germany, don’t care. Just being honest. And of course it can’t be opted out of. Right?

          “The fact alone that one has to considerably change Firefox’s about:config options to make it acceptable privacy-wise speaks volumes” Of course we all know that Chrome and Vivaldi have zero settings that need to be opted out of. What was I thinking. *joins crowd, sheds crocodile tears

        6. Richard Allen said on November 13, 2017 at 5:20 pm
          Reply

          @Appster
          One more thing. Copy/paste chrome://settings in the Vivaldi address bar, enter, click on Advanced and tell me what you see under “Privacy and Security”. I can post a screenshot if you need me to. Is everything in chrome://flags optimized for privacy and security? Not even close. ;)

    5. Thorky said on November 13, 2017 at 12:35 pm
      Reply

      When will NoScript be released as a full webextension? The unavailibility of this Add-On is the only reason why I can’t start with Firefox 57.

      1. leanon said on November 14, 2017 at 11:02 am
        Reply

        Word on the street is could be now could be a couple more days or longer. For what ever reason it looks that Firefox 57 needed to be released before Giorgio could finish.

        Personally Im staying put, at lest on that pc, til NoScript is on AMO with a few reviews.

    6. MdN said on November 13, 2017 at 12:47 pm
      Reply

      This is good news. Right now I’m just using a CSS script for two things, square tabs and “close tab” button on the left. I hope at least the latter one will be available when the time comes. I can live without the rest.

    7. Tom Hawack said on November 13, 2017 at 2:54 pm
      Reply

      A touch of lyricism as I face this valuable work, ‘Custom CSS tweaks for Firefox 57+ ‘ developed by Aris who’s work with ‘Classic Theme Restorer’ has enchanted so many Firefox users who couldn’t bear the Australis atrocity, and who now carries on the work, as a man knocked to the ground, rising yet on one knee, fist raised, declaring “I’m not done, yet, you jerks!”. We know who he’d have in mind.

      Most valuable work. Unfortunately Firefox 57 does more harm than what may be partially repaired with this ‘Custom CSS tweaks for Firefox 57+ ‘ workaround using Firefox’s userChrome and userContent. I won’t repeat what we all know. But but but … if I were to surrender to Mozilla and forget pre-57 Firefox versions then I’d welcome this work with enthusiasm and gratitude.

      1. Richard Allen said on November 13, 2017 at 3:57 pm
        Reply

        I am shocked, that was soooo hurtful! What happened to “Tolerance”? Loving your fellow browser. There is so much hate and discontent nowadays. Just messing. ;)

        By the way, Nightly just updated to v59. BOOM Shaka Lacka (I love old R&B;)

    8. VioletMoon said on November 13, 2017 at 4:10 pm
      Reply

      Kind of going over my head, but with the tutorial given, I open a whole different Firefox–nice interface!

      Which makes me wonder why Mozilla developers don’t-can’t do the same.

      Anyway, thanks–good lesson for me.

      How to get the bottom status bar back?

      1. Appster said on November 13, 2017 at 4:22 pm
        Reply

        > Which makes me wonder why Mozilla developers don’t-can’t do the same.

        Mozilla refuses to grant WebExtensions access to the UI aside from creating a single button.

        > How to get the bottom status bar back?

        No chance, Mozilla has not implemented a (proposed) API for that, so WebExtensions can’t create toolbars of any kind.

        WebExtensions are sucking big time.

        1. Jody Thornton said on November 13, 2017 at 4:50 pm
          Reply

          See that would be one shortcoming I’d like to hurdle over. I do like having a status bar and a progress bar at the bottom
          :)

    9. Anonymous said on November 13, 2017 at 4:12 pm
      Reply

      At least use Notepad++ when you doing this.

    10. Jefferson said on November 13, 2017 at 6:21 pm
      Reply

      For visual learners:

      Demo – How to Create a userChrome.css File on Vimeo
      https://vimeo.com/241645477

      (Yes, I had a cold at the time!)

    11. Stefan said on November 13, 2017 at 7:05 pm
      Reply

      52.4.0 ESR will be the last FF version i use. My important addons and my preferred themes work. I can always fool sites about the user agent with the addon i have. Still even if much do work as i have it now, much is also blocked (by me). I am quite satisfied as it is with what i have.

      All this talk about webextensions seem pretty stupid to me. Mozilla seems to change things just because it is a change, not because of that it is userfriendly !

      Why not let the user make the choice ?

      1. anon said on November 15, 2017 at 8:36 am
        Reply

        ESR 52.5.0 is the same as 52.4.0 but with all the new security fixes. Legacy addons will keep working in all future ESR 52.x versions.

      2. Jody Thornton said on November 17, 2017 at 1:38 am
        Reply

        Well the way I see it is this. No question performance is better in Quantum. Now Appster has pointed out that Servo can be enable as of v56. Even still upgrade to 57 and the performance improves quite perceptibly. So could the presence of XUL still cause some overhead?

        And since Mozilla wants to allow multi-processing for tabs, many XUL extensions weren’t compatible. So I’m not sure “stupid talk” is appropriate to term this as. If you are hard set on your extensions, you’ll never be happy with Quantum. But if you have the extensions you need (I just need uBlock Origin, and I can use CSS to customize the tab bar), then you’ll love Quantum (that is, if you give it a fair chance – it really is NOT a change for the sake of change).

        Remember, I was completely against Firefox 57 changes when I first heard about them – but then I tried Nightly. Now, I’m getting a newer machine that will get the most out of Quantum.

    12. Anonymous said on November 13, 2017 at 7:10 pm
      Reply

      “The new WebExtensions system prevents changes to the browser’s user interface by not providing APIs to extensions developers.”

      This sentence has something terrifying.

    13. ghask said on November 14, 2017 at 5:46 am
      Reply

      I’ve been wondering for a while, why people like the tabs on top of address bar? I rarely touch address bar while I navigate around the tabs a lot. That’s why I don’t understand why you need to make navigating the tab harder, am I the only one navigating the tabs using mouse?

      1. George said on November 14, 2017 at 11:56 am
        Reply

        Google Chrome does it too, and it is considered “modern”. I guess some people prefer it that way even though it seems harder, exactly as you describe. Perhaps they work mostly on the address bar, I wouldn’t know. The real question is: why FORCE it to be like that and take away the option from the user?

        I haven’t tested these CSS solutions but hopefully they’ll work well across browser updates, with no impact on performance or browser operation.

      2. Jody Thornton said on November 17, 2017 at 1:32 am
        Reply

        I’ve never been stuck on that either. There was a CSS script method to fix this in Vivaldi, but it stopped working. It can be changed in Quantum though.

    14. Nasay said on November 14, 2017 at 12:14 pm
      Reply

      So it happens.

      My solution: Mozilla’s new Chrome inspired browser deinstall, Otter-Browser with QTWebkit-NG install.

      Mozilla and their Google Chrome inspired simplicity fetish is of no interest for me. Fully customizable old Firefox versions have been rocking, this new “average joe/Chrome user optimized” Firefox 57 is garbage if i compare the still built in feature set with Firefox versions before 29.

      Seriously, dumping most complex built in features to be attractive for simple users aka fighting from now on for the same target user group like Chrome, IE, Safari or similar… in earlier years something like that never would have been Mozilla’s focus, where they still cared for feature diversity and a more than rich option set.

      Anyway…

      Have fun with simple minded Chrome users Mozilla :)

    15. Pavel said on November 14, 2017 at 10:26 pm
      Reply

      I need multiple tab rows. How i do it?

      please

      1. Mystique said on November 15, 2017 at 12:59 pm
        Reply

        If Mozilla is anything like I am thinking then it comes with all the UI limitations that both chrome and vivaldi come with and there is no way (aside from those dicky little extensions to add stupid little lists of tabs) manipulate the tab bar. It’s a huge oversight in my opinion so I struggle to imagine that Mozilla would allow it to stand but I haven’t anything that would suggest it is possible.

      2. John said on November 16, 2017 at 4:51 am
        Reply

        https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/toolbars/bookmarks_toolbar_multiple_lines.css

        Create file userChrome.css (simple text file) in folder “chrome” (create if missing) inside your Firefox profile folder (C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\.default\ )
        Copy/paste the code from above link in userChrome.css, save and restart Firefox.
        Enjoy,

    16. Lange_666 said on November 15, 2017 at 8:30 pm
      Reply

      Only one thing pops to mind after upgrading to FireFox 57…visually it has become… BORING !!

    17. Gabriele said on November 15, 2017 at 9:20 pm
      Reply

      Hello to all the community, i’m trying to find a fix for the last mozilla “broking-something-on-every-release” politic.
      In Firefox 56 i was using a css for making more smaller tabs in height.
      The css have in syntax:
      .tabbrowser-tabs {min-height: 23px !important;}

      I have tryed:
      tab {max-height: 23px !important;}

      The tab is more tinner, but i have a extra margin on bottom between tabs and toolbar.

      someone know how to fix that on Firefox 57?

      1. AF said on November 17, 2017 at 12:39 am
        Reply

        I have the same issue i posted it on http://forums.mozillazine.org/ support forum. No solution yet. This is and the fact you can’t combine forward back buttons really irks me.

      2. zmei said on November 17, 2017 at 6:07 pm
        Reply

        In “personalize” menu (right-click so called hamburger) there is an option to change tab height, not sure if will be thin enough for you though.
        Has anyone managed to change the extremely annoying white background which is showed while a page is loading? The background that appears just before the one that can be set with userChrome.css for about:whatever I mean, it is purple in Private Browsing.

        1. zmei said on November 20, 2017 at 3:49 pm
          Reply

          #content in userChrome fixed my issue

    18. Walter Teague said on November 16, 2017 at 3:17 am
      Reply

      What is the “archive”? You write “copy the content of the archive into that folder.” What and where is it?

      1. Martin Brinkmann said on November 16, 2017 at 5:42 am
        Reply

        You download the file archive that contains all the files from the GitHub repository.

    19. Anonymous said on November 16, 2017 at 7:44 am
      Reply

      Trying to disable “Pocket” in the user.js [user_pref(“extensions.pocket.enabled”, false);], it does not work!?

      1. Jody Thornton said on November 17, 2017 at 1:30 am
        Reply

        Isn’t there a pref for that one?

        1. Anonymous said on November 17, 2017 at 11:36 pm
          Reply

          Of course there is, I just wonder why it does not work with the user.js like with earlier FF versions.

          !?

    20. solar said on November 16, 2017 at 9:04 am
      Reply

      How about Tabs at the bottom of the screen? I’ve found Tabs at the bottom, but it puts Tabs below address bar, not at the bottom of the screen. Is that possible?

    21. AF said on November 17, 2017 at 12:40 am
      Reply

      Anyone have any clue how to combine the Back Forward buttons part of the search URL bar like FF56 and prior. Using CSS not add-on

    22. Max K said on November 17, 2017 at 3:41 am
      Reply

      LET USERS ANFD ADDONS CUSTOMIZE THE UI AGAIN!!!!! IF NOT WHY THE F*** SHOULD FIREFOY BE BETTER THAN ANY OTHER BROWSER???? ALL THE OTHERS ARE FAST THERE IS NO USP TO FF ANYMORE!!!!!!!!!!!!! I USED IT BECAUSE IT WAS SO COMPACT AND HIGHLY ADAPTED DTO MY NEEDS! I DON’T WANT TO SPEND HOURS LEARNING TO ORIENT MYSELF IN THE CSS LANDSCAPE OF FF WHATF****** EVER VERSION!!!

      1. Anonymous said on November 19, 2017 at 1:45 am
        Reply

        Amen!!!

    23. Blue Lily said on November 17, 2017 at 4:26 pm
      Reply

      Somebody please develop something similar to the classic theme restorer, or…
      Give us a complete userchrome.css file so that we can easily restore the classic look in a few clicks!

      I did it already but it’s not perfect and I hate how I can’t read enough text on my tabs…
      Is there a way to make the tabs larger?

      The code provided by “HK-Rapper” above doesn’t work on my side.

    24. RiE said on November 17, 2017 at 6:59 pm
      Reply

      I like the new look of FF 57. I hate the whiteout on the book marks and the internal option screens; addons, etc.

      I’ve installed this customized CSS, how do I just edit the bookmark side menu to have a black or dark background with white or blue text associated with the actual bookmarks displayed?

      I’ve very comfortable in with CSS as I use it every day, just trying to efficiently identify the correct file/class to edit.

      Thanks in advance!

    25. Joe M said on November 18, 2017 at 8:00 pm
      Reply

      Wow. An excellent project no thanks to the Firefox developers!

      I have been trying to get multiple bookmark toolbar rows and finally did it.

      But it needs some slight tweaking. Now the toolbar no longer shows the overflow menu. Is there a way to limit the toolbar size to two rows and add the overflow menu?

      1. blockedFace said on November 20, 2017 at 10:51 am
        Reply

        I need this answer, too.

      2. Jody Thornton said on November 21, 2017 at 1:17 am
        Reply

        Actually the whole CSS code editing ability would be completely thanks to the Firefox developers, wouldn’t it? :)

        1. Joe M said on November 21, 2017 at 1:40 am
          Reply

          I stand corrected Jody.

        2. Jody Thornton said on November 22, 2017 at 2:16 am
          Reply

          Well actually I was just being a smart alec, but I know what you meant :)

    26. Rob MacDonald said on November 20, 2017 at 11:45 pm
      Reply

      Is there some way to modify the.CSS file to display the buttons with words, or words and icons, instead of just icons? This was an option in Classic Restorer.

      Thanks.

      1. Scapo said on November 21, 2017 at 11:20 am
        Reply

        #personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }

    27. Rob MacDonald said on November 21, 2017 at 6:00 pm
      Reply

      This is for bookmarks, correct? I want to add words to the toolbar buttons.

    28. Mike said on November 21, 2017 at 7:17 pm
      Reply

      Can Firefox Nightly be customized using CSS?

    29. Dave said on November 26, 2017 at 5:47 am
      Reply

      A few questions.
      1. How to remove the circle-i (info) icon to the left of the URL.
      2. How to remove the padlock icon to the left of the URL. I show the full URL, including https:, so the padlock is useless.
      3. How to remove the reader icon to the right of the URL.
      4. How to remove the star (bookmark) icon to the right of the URL.
      5. How to remove all bolding or other emphasis in the URL itself.
      6. How to remove the Firefox Menu.

    30. Gary said on November 30, 2017 at 9:52 am
      Reply

      I am a disabled person not technical Dose Firefox 57 have the Classic Look, (Grey Menus of Windows 98) how is this done ?

      1. Martin Brinkmann said on November 30, 2017 at 10:47 am
        Reply

        I don’t think so, not without modifying the CSS.

    31. Gary said on November 30, 2017 at 10:52 am
      Reply

      Mr Brinkmann I am a disabled person not technical can you please guide me thru it ?

      1. Martin Brinkmann said on November 30, 2017 at 10:56 am
        Reply

        I don’t have this ready, it requires analyzing Firefox styles and modifying them. It is not a simple process, and I don’t know if a solution exists for that.

    32. Gary said on November 30, 2017 at 11:01 am
      Reply

      Mr Brinkmann is their a way to post a screenshot here or show you a link ?

      1. Martin Brinkmann said on November 30, 2017 at 11:28 am
        Reply

        No, this functionality does not exist. You can check out this article on customizing Firefox with CSS code that exists already: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

        I don’t know if you find what you are looking for there, but you may open an issue on GitHub to ask for that there: https://github.com/Aris-t2/CustomCSSforFx

    33. Gary said on November 30, 2017 at 7:04 pm
      Reply

      Mr Brinkmann is this link you gave me https://github.com/Aris-t2/CustomCSSforFx can I ask my ?I am a disabled person not technical Dose Firefox 57 have the Classic Look, (Grey Menus of Windows 98) how is this done ?
      who do I contact is their forum ?

      1. Martin Brinkmann said on November 30, 2017 at 7:08 pm
        Reply

        I suggest you posts this as a new issue on the page: https://github.com/Aris-t2/CustomCSSforFx/issues

    34. Achille said on November 30, 2017 at 7:19 pm
      Reply

      Hi!
      (text by a translator)

      I write about new Firefox 57 and possibilities of supporting css code.
      In firefox 56 I was using with stylish addo-on the follow code for transparent background in “about:newtab”
      ____________________________________________________________________________
      @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
      @media all and (-moz-windows-compositor) {

      #main-window[stylish-url=”about:newtab”]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content browser,
      #main-window[stylish-url=” “]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content browser {
      opacity: 0 !important;
      background-color:transparent !important;
      }
      #main-window[stylish-url=”about:newtab”]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content,
      #main-window[stylish-url=” “]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content{
      background-color: rgba(255,255,127,.0) !important;
      }
      #appcontent, #content > tabbox > tabpanels {
      background-color: transparent !important;
      }
      ___________________________________________________________________________
      Now I’m trying to do the same with firefox 57 in chrome folder and “userChrome.css”
      Unfortunately, with no results. Do you have any idea how to fix it and what code I could use?

      Thank you very much!

    35. Gary said on November 30, 2017 at 7:20 pm
      Reply

      Martin Brinkmann I a new issue on the page: https://github.com/Aris-t2/CustomCSSforFx/issues do you know this person or has anything to do with github here is a link http://www.markheadrick.com/firefox/firefox_config.php ?

      1. Martin Brinkmann said on November 30, 2017 at 7:33 pm
        Reply

        Gary, I don’t know him but he seems to have modified the custom CSS that is posted on the GitHub page. Maybe contact him on his site for assistance on getting this to run on your system?

    36. Gary said on November 30, 2017 at 7:43 pm
      Reply

      Mr Brinkmann I will post their ask for him or first ask my ? what do you think ?

      1. Martin Brinkmann said on November 30, 2017 at 8:01 pm
        Reply

        I’d give it a try. Best of luck!

    37. Gary said on November 30, 2017 at 8:07 pm
      Reply

      Martin Brinkmann thanks I will update you on my issue

    38. Jordan said on December 1, 2017 at 4:32 pm
      Reply

      Delete previous comment as this is updated.

      Can someone please create a css file or as close to it with the configurations from below for Firefox 57? Also could I have round tabs because the Firefox 57 new squared tabs look awful? I am not that good with CSS. I would like to use dark theme also included css please.

      Thank you.
      ————–
      CTR_Preferences__DO_NOT_EDIT__’=’->booleans__’:’->strings__’~’->integers
      tabseparator:tabsep_default
      tabfbold_def=false
      tabcolor_pen=false
      bmbutpanelm=true
      noconicons=true
      hideprivmask=true
      ctabpen2:#007700
      altautocompl=true
      sbsize_minw~200
      bookbarfs=false
      alt_addonsp=true
      oldtoplevimg2=true
      anewtaburl:about:newtab
      ctabtsh:#FFFFFF
      findb_widthva~170
      nonavtbborder=false
      am_hovshowb=false
      contextfind=true
      oldfontgfx=true
      tabtextc_def=false
      nbcompact=false
      combrelstop=true
      showalltabsb=false
      lbradius_left~0
      ctab2:#007700
      autocompl_not=false
      cntab2:#007700
      alt_newtabp=true
      emptyfavico_g:emptyfavico_g_def
      appbclmmenus=true
      tabfita_def=false
      hidezoomres=true
      menubarnofog=false
      iat_notf_vt=false
      search_ant=true
      tabtextsh_act=false
      sbfontsize~12
      tabcolor_act=false
      nodevtheme2=true
      ctab1:#00FF00
      tabcolor_hov=false
      aboutprefsww~850
      nobookbarbg=false
      lb_roundness=false
      dblclnewtab=true
      autocompl_hlb=false
      urlbardropm=false
      cappbutpc2:#993399
      cappbutpc1:#CC33CC
      bmbunsortbm=true
      toptb_oldpad=false
      starinurl=true
      autocompl_hlu=false
      invicoextrabar=false
      invicobookbar=false
      appbautocol=false
      closeonleft=false
      hidesbclose=true
      tabmokcolor4=false
      emptyfavico_t:emptyfavico_t_gen
      ib_graycolor=false
      hidetbwot=false
      lbfontsize~12
      tabtitlepos:tabtitlepos_default
      icopageinfo=false
      autocompl_rhl=true
      notabbg=false
      ibinfoico2=false
      cstatextlb=false
      altreaderico=true
      am_showrecup=true
      invicoaddonbar=true
      oldtoplevimg=true
      addonversion=true
      altabico:altabico_white
      invicotabsbar=false
      urlbardropm2=false
      bmbviewbmsb=true
      nonavbarbg=false
      bf_space=true
      cappbutc2:#007700
      cssoverride=false
      aboutprefs:category-security
      pananimation=true
      bmbutnotb=true
      lbradius_right~0
      padlockex=true
      ctabact2:#FF0000
      locsearchbw10=false
      bmbutclpopup=true
      hide_bf_popup=false
      nosnippets=true
      ctroldsearch=false
      altmenubar=false
      appbuttontxt:
      altoptions:options_win_alt
      tabfbold_unr=false
      tabmokcolor=false
      highaddonsbar=false
      os_spsize_minw~200
      hideeditbm=false
      findbar:findbar_bottoma
      ttoverflow:ttoverfl_def
      cpanelmenus=true
      verifiedcolors=true
      contextitem=true
      tttitlebar=true
      osearch_dm=false
      nbiconsize:small
      alt_addonsm=true
      aboutprefsInd~3
      am_compact2=true
      tabtextc_pen=false
      osearch_meoit=false
      sbradius_right~0
      appbutton:appbutton_off
      appbuttonc:appbuttonc_orange
      ctabheightcb=false
      noresizerxp=false
      tabthrobber:throbber_nav
      lbsize_maxw~4000
      appbutmhi=false
      nonavborder=false
      ctabheight~28
      tabtextsh_hov=false
      tabcolor_def=false
      sbsize_maxw~4000
      nav_txt_ico:icons
      aboutprefswh~670
      transpttbew10=false
      altalertbox=true
      ctabpen1:#00FF00
      lessaddonsbar=false
      ctabactt:#000000
      feedinurl=true
      smallnavbut=false
      addonbarfs=false
      noemptypticon=true
      closeicon:closeicon_default
      hideurlsrg=true
      anewtaburlcb=false
      search_abl=true
      alttabstb=false
      extraurltarget:tab
      activndicat=true
      mbarpositionl:toolbar-menubar
      hightabpososx=true
      tbconmenu=true
      ctabunrtsh:#FFFFFF
      tabfbold_act=false
      urlbardark=false
      tabmokcolor2=false
      tabcolor_unr=false
      extraurlkeycb=false
      sbfontsizecb=false
      bmbviewbmtb=true
      ctabfontsize~12
      ctabhovtsh:#FFFFFF
      pmhidelabels=true
      fsaduration=true
      invicomenubar=true
      tabc_hov_unl=false
      lbfontsizecb=false
      ctroldsearchr=false
      closetabhfl=false
      tabs:tabs_squaredc2
      ctabact1:#FF8800
      transpttbw10=false
      closeabarbut=true
      restartapp=true
      ibinfoico=false
      inviconavbar=false
      backforward=true
      tabtextc_unr=false
      bmbunsortbm2=true
      skipprintpr=true
      tabc_act_tb=false
      dblclclosefx=false
      hidenavbar=false
      findb_widthcb=false
      tabtextsh_pen=false
      search_aho=true
      tabsontop:unset
      ctabhov1:#FFFFBB
      navbarmar_l~0
      panelmenucol=false
      navbarpad=false
      nbisizedelay~0
      ctabt:#000000
      oldsearch=true
      lbsize_minw~200
      autocompl_hln=false
      ntabcolor_hov=false
      cappbutc1:#00FF00
      altdlprogbar=true
      autocompl_sep=false
      menubarfs=false
      searchbardark=false
      tabmokcolor3=false
      sbradius_left~0
      cresultsh~400
      optionsrem=true
      tabfita_pen=false
      ctabacttsh:#FFFFFF
      hideurlzoom=false
      osearch_iwidth=true
      tbsep_winc=false
      notextshadow=false
      am_nowarning=true
      ctrnewinv=true
      padlock:padlock_modern2
      oldplacesbut=true
      puibuttonsep:puib_nosep
      cresultshcb=false
      sb_roundness=false
      ctabpentsh:#FFFFFF
      cntabhov2:#FFFF00
      tabtextc_hov=false
      autocompl_hli=false
      navbarpad_r~3
      ctabwidth~250
      tabtextc_act=false
      tabtextsh_unr=false
      bmbutnotext=true
      tabfbold_hov=false
      mbarforceleft=false
      am_buticons=false
      closeicong:closeicong_red
      ctrosearchct~0
      tablowopa_pen=false
      anewtaburlp:about:privatebrowsing
      mbarposition:toolbar-menubar
      autocompl_it2=true
      noaddonbarbg=false
      toolsitem=true
      tabfita_act=false
      chevronfix=true
      hide_bf_pitem=false
      iblabels=false
      ctabhovt:#000000
      svgfilters=true
      bmbnounsort=true
      urlresults=false
      ctabunrt:#000000
      closetabbig=true
      os_spsize_maxw~200
      ntabcolor_def=false
      sb_width=false
      autocompl_it=false
      ib_nohovcolor=false
      faviconurl=true
      transptcw10=false
      cntabhov1:#FFFFBB
      bmanimation=true
      tabfbold_pen=false
      cuibuttons=true
      html5warning=true
      osearch_meoit2=true
      altmbarpos:altmbarpos0
      tabc_hov_unr=false
      am_compact=false
      appmenuitem=true
      hidetbwote2=true
      aerocolors=false
      statusbar=true
      ctrosearchrt~0
      ctabunr2:#007700
      tabfita_unr=false
      cssoverridec:
      anewtaburlpcb=false
      hideurelstop=false
      ctroldsearchc=false
      hideurlgo=false
      ctabpent:#000000
      square_edges=false
      puictrbutton=true
      hideprbutton=true
      osearch_cwidth=false
      tablowopa_unr=false
      ctabhov2:#FFFF00
      appbutbdl=false
      aerocolorsg=false
      showfx57pcomp=false
      hideurelstop2=false
      mbarforceright=false
      anewtaburlpf=false
      closetab:closetab_default
      tabtextsh_def=false
      findb_hide_ws=false
      appbuttonct=false
      athrobberurl:
      notabfog=false
      tabfita_hov=false
      navbarpad_l~3
      tttitlebar_c=false
      menupopupscr=true
      hidetbwote=true
      am_extrabars~1
      ctabmwidth~100
      wincontrols=true
      lb_width=false
      ctabfontsizecb=false
      restartapp2=true
      navbarmar_r~0
      am_highlight=false
      alttabstb2=true
      aboutpages=true
      ctabunr1:#00FF00
      cntab1:#00FF00

    39. Jordan said on December 1, 2017 at 4:46 pm
      Reply

      adding to my previous comment, can this also be included?

      @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

      .tabbrowser-tab {
      min-width: 1em !important;
      clip-width: 1em !important;
      }

    40. Achille said on December 3, 2017 at 10:38 pm
      Reply

      Hello!
      (text by a translator)
      I write about new Firefox 57 and possibilities of supporting css code.
      In firefox 56 I was using with “stylish” add-on the follow code (see below) for transparent
      background in “about:newtab”. (see pic} https://i.stack.imgur.com/PVqeF.jpg
      ————————————————————————————————
      @namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
      @media all and (-moz-windows-compositor) {

      #main-window[stylish-url=”about:newtab”]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content browser,
      #main-window[stylish-url=” “]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content browser {
      opacity: 0 !important;
      background-color:transparent !important;
      }
      #main-window[stylish-url=”about:newtab”]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content,
      #main-window[stylish-url=” “]:not([onclose=”PrintUtils.exitPrintPreview(); return false;”]) #content{
      background-color: rgba(255,255,127,.0) !important;
      }
      #appcontent, #content > tabbox > tabpanels {
      background-color: transparent !important;
      }
      ————————————————————————————————————-
      Now I’m trying to do the same with firefox 57 in chrome folder and “userChrome.css”.
      Unfortunately, with no results. Is there someone who knows how to do this?
      Thanks!

    41. Jody Thornton said on December 12, 2017 at 4:40 am
      Reply

      A little concerning that Mozilla would to add some telemetry to gain user stats on the use of userChrome.css
      https://bugzilla.mozilla.org/show_bug.cgi?id=1416044

      Gotta wonder where this will lead.
      :(

    42. leanon said on January 6, 2018 at 12:52 pm
      Reply

      A late thanks for this, am giving userContent.css a go with rather surprising success.

    43. pd said on January 16, 2018 at 11:24 am
      Reply

      CSS helps but not enough.

      Can anyone explain why Mozilla’s own addons site thinks I’m running 52 when I’m actually running 57?

      https://i.imgur.com/9mTMCtI.png

    Leave a Reply