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

  • 7 uphendule
  • 1 inale nkinga
  • 52 views
  • Igcine ukuphendulwa ngu Castor

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?

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (7)

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.)

Okulungisiwe ngu jscher2000

Helpful?

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.

Helpful?

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.

Helpful?

more options

Isisombululo Esikhethiwe

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.

Helpful?

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.

Helpful?

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

Helpful?

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.

Helpful?

Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.