![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
My Tabs Bar has changed height
Hi - firstly, I hope I've not abused Forum etiquette by posting all the code below!
I upgraded to 47.0 today & the settings I had via a mix of "Classic Toolbar Buttons" & Stylish code don't work as they did before.
I don't have the F'fox window maximized & as seen on the attached pic (PNG, 6.9KB, which has said "Uploading" for 20 mins, so I guess it might not be here when I submit), the tabs are now *not* touching the top of the screen as they were before. I don't "code" myself, but have tried adjusting the values in the code to no avail.
Also the Min, Max & Exit buttons' "clickable fields" are off-centre, moved to the left & the 'X' shifts slightly down & left when I hover on it.
I think some of the code might be redundant but don't know what to remove &/or change, all I know is that it was ok before the update. Assuming I'm asking in the right place, can anyone please advise me how to fix this or where to go/who to ask if not.
The code I have is as follows -
/* Tabs to top of browser window when not maximized */ #TabsToolbar { margin-top: 0px !important; margin-bottom: 1px !important; } /* New Dimensions */ #TabsToolbar { min-height: 24px!important } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before, .tabbrowser-tabs{ min-height: 24px!important } #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } /* Toolbar Dimensions */ #TabBrowser-tabs { height: 15px !important; margin-top: -5px !important; margin-bottom: -5px !important } #TabsToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -2px !important } #BookmarksToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -5px !important } #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #MenuToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important} #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* Overlaid Buttons */ /* #titlebar-buttonbox .titlebar-button .toolbarbutton-icon{ display: none !important; } */ /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; } /* Tri-Button Box Fix Attempt */ /* #main-window { background-color: transparent !important; } #titlebar-buttonbox .titlebar-button { background-color: transparent !important; } #titlebar-buttonbox #titlebar-min:-moz-any(:hover,[open]), #titlebar-buttonbox #titlebar-max:-moz-any(:hover,[open]) { background-color: hsla(210,4%,10%,.08) !important; } #titlebar-buttonbox #titlebar-close:-moz-any(:hover,[open]) { background-color: hsla(360,100%,50%,.4) !important; } */
Thanks for taking the time to look at this.
Addition - hopefully edited correctly as suggested - sorry, I didn't know!
ప్రత్యుత్తరాలన్నీ (15)
I've hopefully managed to add the pic now...
Can you still edit your original question? To prevent the forum turning IDs into numbered items, type or paste <nowiki> before and </nowiki> after your style rules.
Have I done that correctly, jscher2000?
I'm not sure why, but the line breaks got lost now. Here's what I get if I "quote" your question but remove the blockquote tags:
/* Tabs to top of browser window when not maximized */ #TabsToolbar { margin-top: 0px !important; margin-bottom: 1px !important; } /* New Dimensions */ #TabsToolbar { min-height: 24px!important } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before, .tabbrowser-tabs{ min-height: 24px!important } #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } /* Toolbar Dimensions */ #TabBrowser-tabs { height: 15px !important; margin-top: -5px !important; margin-bottom: -5px !important } #TabsToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -2px !important } #BookmarksToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: -5px !important } #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #MenuToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important} #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* Overlaid Buttons */ /* #titlebar-buttonbox .titlebar-button .toolbarbutton-icon{ display: none !important; } */ /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; } /* Tri-Button Box Fix Attempt */ /* #main-window { background-color: transparent !important; } #titlebar-buttonbox .titlebar-button { background-color: transparent !important; } #titlebar-buttonbox #titlebar-min:-moz-any(:hover,[open]), #titlebar-buttonbox #titlebar-max:-moz-any(:hover,[open]) { background-color: hsla(210,4%,10%,.08) !important; } #titlebar-buttonbox #titlebar-close:-moz-any(:hover,[open]) { background-color: hsla(360,100%,50%,.4) !important; } */
That looks how it did to me when I posted at first - I'm sorry to muck you about, I'm not au fait with the tricks you guys know.
I really appreciate that you've even taken the time to look my post over :-)
Hi again - for no reason other than trying something for the sake of it, I opened Waterfox & the Tab Bar is back to the size I want (pic attached), thus giving me that space back at the bottom of the screen.
The Min, Max & Exit buttons are as described in my OP.
Does this info help at all?
Your code works on Windows 7 for me in Firefox 47, although I did get some selector errors when I clicked Preview (attached). I might be able to put hands on Windows 10 after hours.
The selector errors went away when I copied/pasted differently.
Apologies, this is the first chance I've had to get back here.
jscher - does that mean I have to redo the code as you have shown, ie without spaces? I don't know how to get the colours - or are they automatic? I'm sorry, I promise I'm not being deliberately obtuse but this is really outside my ability to do, as evidenced by my not even knowing what "selector errors" are.
You definitely do not need to delete the spaces. This seems to be a theme difference between Windows 7 (screen shot earlier) and Windows 10 (screen shots attached).
(I use a user style to add shape to the background tabs, but otherwise, this is default stuff.)
There seems to be about an 8 pixel space for the title bar even when you don't display it. If you never intend to display it, it is simplest to completely hide it. This may prevent Windows from showing NOT RESPONDING messages there, but I suppose you can tell when Firefox is not responding...
#titlebar {display:none !important;}
See the third screenshot.
Uh-oh, that blocks the title bar buttons and maximized windows don't have enough headroom for the tabs. I'm out of time to experiment, sorry.
Thank you for your efforts, jscher, much appreciated.
I'll keep popping back here in the hope that you or someone else has a fix & in the meantime will try to learn something about this coding, but I fear my brain isn't built for it :-)
The min-height rules seemed to be squashing the tabs. I think this might work better, although not quite what you had before:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Tabs to top of browser window when not maximized */ #main-window[sizemode="normal"] #navigator-toolbox { margin-top: -4px !important; } /* Tab bar */ #TabsToolbar { height: 15px !important; margin-top: -5px !important; margin-bottom: -1px !important; } #tabbrowser-tabs { height: 15px !important; } /* Nav Bar */ #nav-bar .toolbarbutton-1:not([type=menu-button]), #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { padding-top: 0px!important; padding-bottom: 0px!important } #navigator-toolbox #nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button)){ margin-top: -5px !important; margin-bottom: -5px !important } #back-button > .toolbarbutton-icon, #forward-button > .toolbarbutton-icon { padding: 3px 6px !important; } #back-button > .toolbarbutton-icon { border-radius: 0 !important; -moz-image-region: rect(0, 54px, 18px, 36px); } #forward-button[disabled] { visibility: hidden !important; } #urlbar-wrapper { clip-path: none !important; -moz-margin-start: 0px !important; } #urlbar { height: 10px !important; margin-top: 0.5px !important; margin-bottom: 0px !important; } /* Bookmarks Toolbar */ #PersonalToolbar { height: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important } #personal-bookmarks { min-height: 10px; } /* AskVG Buttons Code */ #main-window[windowtype="navigator:browser"] { background-color: transparent !important; } .titlebar-button { background-color: transparent !important; transition: background-color 0.2s ease; } .titlebar-button > .toolbarbutton-icon { list-style-image: none; } .titlebar-button:hover { background-color: rgba(0, 0, 0, 0.15) !important; } #titlebar-close:hover { background-color: #E81123 !important; } #titlebar-close:hover > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important; }
jscher, you're a genius! But (isn't there always one?)... the attached pics are, in order -
1 - open with oldcode only 2 - add newcode to oldcode - perfect! 3 - both enabled, shutdown, reopen 4 - after 2, oldcode disabled 5 - after 4, oldcode re-enabled 6 - open F'fox newcode only 7 - after 6, oldcode enabled
In essence, your code ONLY works if I disable it BEFORE closing then re-enable it AFTER opening again. I can live with that but it does seem odd to my mind that it only works in that order.
Once again, my sincere thanks for your hard work :-)
PS. I have oldcode & newcode as 2 separate User Style add-ons as I didn't think lumping yours on the end would be the right thing to do - was that correct?
Perhaps it has something to do with the order in which the rules are applied?? I took out the min-height:24px which is related to the tab height being squashed somehow. If you actually wanted that effect, you could try to reintegrate that part and see whether it works as one rule.
Apologies for the late replies to your posts, jscher - that last is a good idea & I'll have a try at the order of the rules as soon as I get a chance - probably Monday now.