What css rules will makes these UI tweaks ?
Screen shot shows near completion. I've tried without success lots of things to make some final changes. I need help with further css rules to put in userChrome.css.
1) Selected tab versus the others: they should look the same except for font-weight, how to get rid of the white in the selected tab 'background'?
2) Tab labels: how to shift them left to be almost flush with red border-left?
3) 3 buttons for minimize, fullscreen and close: what css rules will move them up a few pixels to the top edge of the window?
4) Narrow white rectangle to the right of the reload button: how to get rid of it?
5) Gap between the Info and PadLock icons: how to get rid of it?
6) Icons for Privacy Badger, etc. and the Triple-Bar: how to make them larger, similar to the Back, Forward, and Reload svgs?
All Replies (9)
Sorry about the second, identical png attachment
Unfortunately firefox forum is a End user help form for the standard firefox release. And if you do choose the route of userChrome.css edits you might have to find some sites that hosts them to see if they match what you're looking for. Otherwise you might have to create your own custom userChrome.css from scratch to do what you want.
You can try to ask at this forum:
Without knowing your current CSS rules in userChrome.css it is hard to tell what needs to be changed or added.
You can use the Browser Toolbox to check what CSS rules are applied to user interface elements.
(1) You probably see some white because you only change the text label background (.tab-label-container or .tab-text tab-label) and not to full tab container (.tabbrowser-tab).
(2) You can shift a container left via a negative margin-left rule.
(3) For the buttons in the top right corner, try code like this:
#titlebar-content { margin-top: -2px !important; }
(4) Are you setting a background color for the Navigation Toolbar (#nav-bar)?
(5) use the Browser Toolbox to check what element(s) are causing this gap.
(6) you may have to remove some padding to get the icons bigger, check this with the Browser Toolbox
Hi Micky--, it's very difficult to answer about things like mysterious white areas and gaps without having "hands on" with your userChrome.css rules. Because for sure those are not part of the regular look.
If you haven't already discovered it, this subreddit is great for help with Ui tweaking:
https://www.reddit.com/r/FirefoxCSS/
To share CSS, you can create a new "paste" here: https://pastebin.com/
cor-el said
You can use the Browser Toolbox to check what CSS rules are applied to user interface elements.
Thanks. A couple are now solved. The BT tool led me to the selectors .tab-label-container (which I margin-left) and .tab-content (which I background-color)
I was launching BT with "ctrl-alt-shift I". That worked 4 or 5 times (because I had to restart FF after each UC.css alteration), but now BT fails to launch. BT also fails to launch via the dropdown menus: Tools -> Web Developer -> Browser Toolbox.
Modified by 120P52
Try to reboot the computer or check the Windows Task Manager in case some process is stuck. The BT uses its own profile (located in the profile folder) and communicates with Firefox via a remote connection.
Double extra thanks to cor-el for pointing out BrowserToolbox. Not only did BT identify unknown selectors, but clean up some my CSS in userChrome.css. I'm not on reddit, so unable to use that forum except to read it.
Attached is a screenshot showing current state.
There are a couple details left to change that I haven't been able to figure out.
A) in the upper right, eliminate black space to left and right of window close button
B) on the right, eliminate the narrow space between the grey webextension area (Privacy Badger, etc) and the orange triplebar icon
C) prevent grey webextension area (Privacy Badger, etc) from collapsing to chevrons. The screenshot shows it expanded, but it collapses at times, and re-expands/collapses if I play around resizing the window and/or switch back and forth between tabs.
Fixing item "C" would be really helpful.
Modified by 120P52
The badges that are added to some of the extension's icons may add just enough width to make Firefox can do to prevent this apart from setting a fixed width to the #urlbar-container, but that will add extra empty space around the icons that you are tryig to avoid.
Did you check if there is a margin or padding on the close button (#titlebar-close) or there is some background color leaking?
It appears you were right about the badges. Changing margin-left margin-right from 0,0 to -2,2 fixed it. It also produced white bars to the right, so I went with margin-left padding-right -2,2. Thanks for your help fixing item "C".
Regarding the close button, I tried all sorts of things like zero or negative values for margin, margin-inline, padding, and border for various selectors in browser.xul via BrowserToolkit and expanding the ellipses. I also tried #titlebar > * { selector:0px !important}. I also tried moz-appearance:none. and .toolbarbutton-menu-dropmarker{display:none}.
One element I couldn't seem to change was .toolbarbutton-multiline-text which has 5,6px for margin-inline.
Those were stabs-in-the-dark because all three buttons have the same xul boilerplate and style values.
The black bands on either side of the close button could be part of the image. However, BT's dashed red borders are just as tight to the close button as they are to the fullscreen button when but mousing over them. Oddly, clicking on the black band doesn't cause BT to highlight anything in the browser.xul file.
Modified by 120P52