How do I get rid of transparency in tabs?
I just installed updated Firefox and the address bar, bookmarks, and plugins bar is a different shade than the rest of the browser. Is there a way to make these bars the same transparency as the menu bar?
All Replies (3)
Are you already using custom style rules in a userChrome.css file? That's how you could modify the appearance of the toolbar area.
What theme is that in the background? To create a custom style rule for you, it's important to make sure it fits the actual color scheme of that theme.
Also, the "active" tab usually is a different color from the "background" tabs. Did you want to keep that "gray" or make it the same color as the background? If you make it the same color, what kind of indication would your want on the active tab so you can easily spot it on a crowded tab bar?
It is an animated lightning theme. I want to eliminate the gray all together if possible.
I have tried a CSS file before but couldn't get it to work at all. I am not sure if I typed out the coding wrong or placed the file in the wrong place.
Here's a little something you could try. I worked on it in Nightly, which is future Firefox 59, so hopefully Firefox 57 is very similar. I tried to get rid of as much as possible to let the background shine through. Example screenshot attached.
/* 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; }
Creating userChrome.css: https://www.userchrome.org/how-create-userchrome-css.html