This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Remove Tabs on Top

more options

Hi all,

I am trying to customize my Firefox on Mac because the tabs on top interfere with the menu bar, thus I only want tree-style tab extension to work on the side, with the tabs on top disabled.

I followed this thread: https://support.mozilla.org/en-US/questions/1184674#answer-1028260 as well as this clear guide on how to create userChrome.css: https://www.userchrome.org/how-create-userchrome-css.html When I tried to restart the browser, I seemed to have been logged out of my profile, with all customization gone and a standard white (instead of black) menu. I deleted the chrome folder and it is normal again now.

I suspect the userChrome.css file should contain more than just the one line I tried to add: #tabbrowser-tabs { visibility: collapse !important; } ; Is there any location where I can copy my current intra-browser customization into the userChrome.css file?

Hi all, I am trying to customize my Firefox on Mac because the tabs on top interfere with the menu bar, thus I only want tree-style tab extension to work on the side, with the tabs on top disabled. I followed this thread: https://support.mozilla.org/en-US/questions/1184674#answer-1028260 as well as this clear guide on how to create userChrome.css: https://www.userchrome.org/how-create-userchrome-css.html When I tried to restart the browser, I seemed to have been logged out of my profile, with all customization gone and a standard white (instead of black) menu. I deleted the chrome folder and it is normal again now. I suspect the userChrome.css file should contain more than just the one line I tried to add: #tabbrowser-tabs { visibility: collapse !important; } ; Is there any location where I can copy my current intra-browser customization into the userChrome.css file?

Chosen solution

Hi Castor, userChrome.css works the same way on Mac and Windows, but the rules for the layout are different between the two platforms, so some rules don't have the same effects.

Are you saying that you already have a userChrome.css file and you need to know whether it is safe to add more rules? I'm not sure what you mean in this part:

Thus I wanted to ask, in the userChrome.css file, should I add anything in addition to the code you gave, to not mess up my current layout, color and customization?

The code you quoted --

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

-- is very specific to the tab bar.

I realize CSS and especially CSS related to the user interface is a rare language with limited documentation. Here's how I read it:

The first rule is for the case where the tabs are in the title bar (the title is not shown in the title bar). In this case, the tabs are made invisible and unclickable. (There's an exception if the bar has extra drag space, but I'm not sure why that would be turned on.)

The second rule is for the case where the tabs are below the title bar (the title is shown in the bar). In this case, the title bar is collapsed so it should have a zero height.

Read this answer in context 👍 1

All Replies (11)

more options

A lot of things have changed since 2017. ;-)

However, this CSS code --

  #tabbrowser-tabs { visibility: collapse !important; }

-- should still hide the tabs. Is the problem that it leaves a blank space in the title bar?

(I run Windows, so I'm never sure if I can replicate problems experienced by Mac users.)

Modified by jscher2000 - Support Volunteer

more options

The author of Tree Style Tab has some rules on his wiki that you could try:

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#hide-horizontal-tabs-at-the-top-of-the-window-1349-1672-2147

Note: if you quote a URL in a reply here your post won't appear immediately, it will be directed to a link moderation queue.

more options

Thank you @jscher2000. I had a look, but I did not try it yet as I would not like to mess it up. It is on OSX, and the userChrome.css file has a similar use as in Windows.

What happened to me was that I was - apparently - logged out of my account and saw just the "default" Firefox appearance and settings (as well as no user logged in). I would not like to mess this up.

Thus I wanted to ask, in the userChrome.css file, should I add anything in addition to the code you gave, to not mess up my current layout, color and customization?

  1. main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
 opacity: 0;
 pointer-events: none;

}

  1. main-window:not([tabsintitlebar="true"]) #TabsToolbar {
   visibility: collapse !important;

}

I am *not* a programmer, so userChrome.css is still unclear to me.

more options

Chosen Solution

Hi Castor, userChrome.css works the same way on Mac and Windows, but the rules for the layout are different between the two platforms, so some rules don't have the same effects.

Are you saying that you already have a userChrome.css file and you need to know whether it is safe to add more rules? I'm not sure what you mean in this part:

Thus I wanted to ask, in the userChrome.css file, should I add anything in addition to the code you gave, to not mess up my current layout, color and customization?

The code you quoted --

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

-- is very specific to the tab bar.

I realize CSS and especially CSS related to the user interface is a rare language with limited documentation. Here's how I read it:

The first rule is for the case where the tabs are in the title bar (the title is not shown in the title bar). In this case, the tabs are made invisible and unclickable. (There's an exception if the bar has extra drag space, but I'm not sure why that would be turned on.)

The second rule is for the case where the tabs are below the title bar (the title is shown in the bar). In this case, the title bar is collapsed so it should have a zero height.

more options

Thank you for the clear explanation. I do not have a userChrome.css file. When I created it (inside of a chrome folder as instructed), I added one simple line (the one at the beginning of the thread), changed FF settings to check that the userChrome.css file at startup (under about:config>userprof) and it messed with all of my preferences, making FF on restart look as if I had just installed it, logging me out of the Firefox Support account as well.

Sorry if I was not clear enough before. I suspect that I need to somehow copy the current CSS format of my FF and paste it directly into the newly created userChrome.css file. Otherwise, only adding one (or two) lines makes everything go back to the default. In other words, with this thread I wanted to ask if there is any other FF file which contains my current CSS, as I suspect I need to add more to the newly created CSS than just adding the specified code above.

more options

Hi Castor, adding a userChrome.css file should only affect the appearance of certain areas of the browser and shouldn't modify whether your personal data is present or whether you are connected to your Firefox Account. That sounds more like Firefox started up in a fresh profile.

The CSS built in to Firefox is extremely voluminous spread over numerous files, and stored together in a compressed file. It wouldn't be practical to paste it into userChrome.css, and that should never be needed anyway.

(1) Does your Firefox still start normally with

toolkit.legacyUserProfileCustomizations.stylesheets => false

Assuming so...

(2) Is it possible that your userChrome.css file is not plain text and contains formatting codes? You could try regenerating the file using my page here:

https://www.userchrome.org/download-userchrome-css.html

more options

Thanks,

I resolved the issue with your instructions (and the code given on the Github section you gave above). Interestingly, the code I added to your CSS file also removed the icons which I had on the same level as the tabs (that is possible on OSX). I resolved this by dragging them down again in standard settings.

This is a big coincidence that the creator of the website I used for instructions also reacted to this thread. Thanks again.

more options

Castor,

I'm looking to get the same results but have zero knowledge of the things mentioned in your post. Just want to know if you were able to achieve what you wanted, before diving into the process.

If you can share an image of the result that would be awesome.

more options

@ehecati127, open about:support in FF, then click open profile folder and create a folder called chrome and create userChrome.css file or copy paste the one given above in the link. /Users/user/Library/Application Support/Firefox/Profiles/{yourProfileName}/chrome/userChrome.css

Then, my code (works for mac):

/* Replace this SAMPLE CONTENT with your own CSS */

/* No blue swipe on tabs when loaded */
.tabbrowser-tab .tab-loading-burst {
  display: none !important;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#TabsToolbar[inFullscreen]{
  display: none !important; 
}

Modified by cor-el

more options

haha can't believe Castor went back and replied. totally awesome of you guys in this whole post, everyone was very helpful. Unfortunately Castor I copied and pasted exactly that into the userchromecss (also on mac) but I guess it doesn't work anymore? Also after looking further into the issue, I used the other guys site that generates a userscript but I guess there were errors in the formatting of the css code. for example it kept giving an error on the "Use of !important"

nonetheless, I don't really know what could be the case or if you ran into this and maybe have an updated idea wanted to kind of probe this post with that question maybe get some help. Thanks in advance guys.

more options

yarub132 said

haha can't believe Castor went back and replied. totally awesome of you guys in this whole post, everyone was very helpful. Unfortunately Castor I copied and pasted exactly that into the userchromecss (also on mac) but I guess it doesn't work anymore? Also after looking further into the issue, I used the other guys site that generates a userscript but I guess there were errors in the formatting of the css code. for example it kept giving an error on the "Use of !important"

Don't worry about error messages in the Ace editor. You need !important to make sure you override built-in styles.

The rules refer to an attribute called tabsintitlebar which is no longer used (checking in Firefox 84 on Windows). So I tried removing all references to that. This also caused the three "window buttons" to disappear. I've noted the part that causes that:

/* Hide all tabs and tab bar buttons */
#main-window:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

/* This makes the bar shorter vertically but removes the 3 window buttons */
#main-window #TabsToolbar {
  visibility: collapse !important;
}

/* For full screen mode */
#TabsToolbar[inFullscreen]{
  display: none !important; 
}