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

This thread was closed and archived. Please ask a new question if you need help.

Need help removing transparent overlay from menu and bookmarks bars

  • 5 replies
  • 13 have this problem
  • 68 views
  • Last reply by alanroig

more options

Same problem as: https://support.mozilla.org/en-US/questions/1114202

I had been using the stylish fix since that update, but the most recent update must have changed something related to that on firefox's side, as that fix no longer works. I don't care if it's with stylish or not, I just want to be able to see my themes without some semi-transparent crap all over it.

Same problem as: https://support.mozilla.org/en-US/questions/1114202 I had been using the stylish fix since that update, but the most recent update must have changed something related to that on firefox's side, as that fix no longer works. I don't care if it's with stylish or not, I just want to be able to see my themes without some semi-transparent crap all over it.

Chosen solution

Now that Stylish can't do anything with the user interface, you will need to paste your modifications into a userChrome.css file. If you have never created one before, I posted a website with info: https://www.userchrome.org/

The old rule doesn't seem to work...

I created a rule for someone the other day who was using a black theme:

/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent) !important;
}
  /* No top line on selected tab */
#main-window[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-line {
  display: none !important;
}
  /* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  background-color: transparent !important;
  background-image: none !important;
}
  /* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

The effect is illustrated in the attached. Depending on what's behind it, the black border line can be distracting. Also, the address bar area maybe is brighter than needed. What kinds of improvements would make sense for your theme?

Read this answer in context 👍 7

All Replies (5)

more options

Chosen Solution

Now that Stylish can't do anything with the user interface, you will need to paste your modifications into a userChrome.css file. If you have never created one before, I posted a website with info: https://www.userchrome.org/

The old rule doesn't seem to work...

I created a rule for someone the other day who was using a black theme:

/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent) !important;
}
  /* No top line on selected tab */
#main-window[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-line {
  display: none !important;
}
  /* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  background-color: transparent !important;
  background-image: none !important;
}
  /* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

The effect is illustrated in the attached. Depending on what's behind it, the black border line can be distracting. Also, the address bar area maybe is brighter than needed. What kinds of improvements would make sense for your theme?

more options

Other than the black line that it leaves behind, that completely gets rid of the grey overlay, so that's really the only improvement I could say would be needed. Thank you for your support

more options

I can't figure out what that line is. I vaguely recall there's a box shadow somewhere, but I can't track it down. Hopefully I'll find it somewhere by accident and can report back.

more options

jscher2000 said

Now that Stylish can't do anything with the user interface, you will need to paste your modifications into a userChrome.css file. If you have never created one before, I posted a website with info: https://www.userchrome.org/ The old rule doesn't seem to work... I created a rule for someone the other day who was using a black theme:
/* Mostly transparent on dark theme */
  /* More subtle background color on selected tab */
#main-window[lwthemetextcolor="bright"] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent) !important;
}
  /* No top line on selected tab */
#main-window[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-line {
  display: none !important;
}
  /* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  background-color: transparent !important;
  background-image: none !important;
}
  /* Hide tab close buttons until hovered */
.tabbrowser-tab:not([pinned="true"]):not(:hover) .tab-close-button {
  display: none !important;
}

The effect is illustrated in the attached. Depending on what's behind it, the black border line can be distracting. Also, the address bar area maybe is brighter than needed. What kinds of improvements would make sense for your theme?

Thank you jscher2000 I found it ridiculous that the default dark theme provided didn't have the annoying overlay yet they decided everything else required it. Ever since I decided to finally try Quantum it's like they are doing everything in their power to make me just want to stick to an older version.

more options

The stupid dev who made all these idiotic changes in Firefox and eliminated most of good customize options, should go to jail. Only for making tabs on top should be punished. Everybody using Firefox wants to have logically tabs NOT on top. Classic Theme Restorer was everything that some stupid developers took from us but doesn't work in Quantum.

Modified by alanroig