Moving webite tabs below bookmarks
Last time Firefox updated, I managed to find information online about moving the website tabs so they were below the bookmarks instead of at the top of the screen. It was a huge pain-in-the-butt to do.
After a recent re-install, the tabs have moved themselves back to the top of the screen and nothing I do seems to be able to move them back below the bookmarks.
Is there a way I can move the tabs that doesn't involve spending hours hunting through posts on the web, changing hidden Firefox settings, and recoding .css files?
If not, why do you not give the option to move the tabs wherever the user wants? Especially when it makes far more sense to have the website tabs directly above the website being viewed, at least in my opinion?
I'm currently using Firefox 85.0.2 (64-bit).
Chosen solution
Normally when you reinstall Firefox it simply picks up your existing settings. Did Firefox indicate that it couldn't use your existing settings and needed to create a new profile?
I'm asking because:
You already know that you need to use a userChrome.css file for this project. If you still have the files from your old profile, you can just copy/paste the chrome folder from your old profile into your new one, set one preference, and then restart Firefox.
But if you are starting from scratch, it's not going to take hours. Here's how you do it:
(A) Download the style code
There are many possible sources. I have some files here:
https://www.userchrome.org/what-is-userchrome-css.html#movetabbar
After downloading, use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See attached example screenshot)
Minimize that file browser window for later reference.
If you already have a userChrome.css file, the rules in this file can be added to your existing file. If you do not already have a userChrome.css file, please continue.
(B) Create a new chrome
folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(C) Move the file you downloaded in Step A into the chrome
folder you created in Step B
You can drag and drop between the two file browser windows, or use right-click > Copy in the source window and then right-click > Paste a blank area in the destination window.
(D) Rename the file to userChrome.css
Right-click the file and choose Rename. Then delete the -tabs_on_bottom_Fx74-80_WindowsLinux
part so the file name ends up being userChrome.css.
(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Success?
Read this answer in context 👍 1All Replies (18)
Suluhisho teule
Normally when you reinstall Firefox it simply picks up your existing settings. Did Firefox indicate that it couldn't use your existing settings and needed to create a new profile?
I'm asking because:
You already know that you need to use a userChrome.css file for this project. If you still have the files from your old profile, you can just copy/paste the chrome folder from your old profile into your new one, set one preference, and then restart Firefox.
But if you are starting from scratch, it's not going to take hours. Here's how you do it:
(A) Download the style code
There are many possible sources. I have some files here:
https://www.userchrome.org/what-is-userchrome-css.html#movetabbar
After downloading, use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See attached example screenshot)
Minimize that file browser window for later reference.
If you already have a userChrome.css file, the rules in this file can be added to your existing file. If you do not already have a userChrome.css file, please continue.
(B) Create a new chrome
folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(C) Move the file you downloaded in Step A into the chrome
folder you created in Step B
You can drag and drop between the two file browser windows, or use right-click > Copy in the source window and then right-click > Paste a blank area in the destination window.
(D) Rename the file to userChrome.css
Right-click the file and choose Rename. Then delete the -tabs_on_bottom_Fx74-80_WindowsLinux
part so the file name ends up being userChrome.css.
(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Success?
You can possibly try the code posted in the thread.
- /questions/1305615 tabs below address bar - an ongoing problem not fixed !!!
You may have to adjust some of the vars that are defined at the start of the code.
Thank you so much, jscher2000!
Unfortunately, there was file corruption involved, so I couldn't reuse my old profile (in fact, I couldn't even find it). I spent a bunch of time going through suggested solutions, none of which worked. It had been years since the last time I needed to do this and there was a lot of out-dated info out there that just didn't work.
Your solution worked great!
If only every question I asked online was answered in such a timely, accurate, and polite manner.
I really appreciate it. Thank you kindly!
Modified
Look jasher2000, with all due respect, this is bullshit.
I'm a software developer and not unfamiliar with having to go to such obscure trouble for problems I encounter with IT. But I have better things to do than go to such lengths to simply shift the tabs toolbar below the address bar, where it has always been for me until one of these insane daily updates!
Let's be frank, this is why non-IT people rage against stupid developers who believe they know better than their users. They forget the overriding rule - once users get used to a design, it is a complete turnoff to muck with it because the developers sat around and came up with some fancy modification. Normal people I meet are infuriated with IT developers! They don't care about the way a program works - they just want to use it for their purposes.
Software designers have and ego problem, and they are always trying to draw attention to themselves ("Look what we've designed for you!"). Just get out of the way, and leave things alone, or provide easy options for reversions.
Many software companies refuse to verify Firefox as a compatible browser because of their stupid daily updates. I would shift to Chrome like so many others I know except that the effort of learning yet another browser is more than I care to waste on context. Take a leaf from Apple, who despite annoying security changes, have left the basic navigation design alone for decades. (Personally, I blame it all on young people with too many ideas an insufficient knowledge of functional design, but I know that's just sour agist-grapes.)
Hi mmaher2, Firefox generally updates about twice a month, not daily, unless you install one of the pre-release test versions (beta, Developer, Nightly). You can check the cadence if normal releases by reviewing the dates on the release notes:
https://www.mozilla.org/firefox/releases/
As for the question of how the UI should work in Firefox, that's beyond our scope here in support. We can explain features and workarounds, but we don't make the programming decisions.
HERE IS THE CORRECT ANSWER for Firefox version 9.00 of how to achieve it now edited into my very first question https://support.mozilla.org/en-US/questions/1339095
Modified
Thanks, Trevor George! The new update broke tabs under the bookmarks and moved them to the bottom of the screen. This fixed it and put them back where I wanted them. Thanks again!
I have been using FF for many years now. But the answer to this question is my reason to say BYE FF. Maybe developers should read mmaher2's message carefully.
cor-el said
See also:
Hi cor-el . . . it was pointless posting that link as the - css - code shown there was way out-of-date. After all this time, and after so many protests about retaining TABS BELOW the Bookmarks Toolbar, one would have thought these complaints might have been conveyed to the Firefox Developers by now, and they should already have done something to rectify it. Thank you . . from a damp and rainy Bristol, UK this morning
I've recently updated the code in that forum response and it should now work in Firefox 89+ including the current Nightly 91 build.
Thank you cor-el. I've had tabs at the bottom since 2019 and the previous userChrome.css has always survived prompt updates, until 90.0.2, where the tabs just disappeared altogether. I replaced the userChrome.css file with the "fixed 89+" code you posted above, restarted FF, and the tabs at the bottom are back!
How do I remove the grey shading that got introduced over my coloured theme, please? It covers everything except the height of the menu bar. Image attached.
Modified
Hi henrietta_stroph, that "haze" or "fog" on the toolbars is meant to make the button icons easier to read. We've had it for a long time, and if you still have your old userChrome.css file, the rules you have used up to now might still be in there. If you can't find those, here are some posts from a few years ago in case they help:
Thank you, but I could really use some serious help here. I made a userChrome.css.ORG copy before today's overwrite, but I really don't know what's what in it. I was hoping to attach the file, but this forum only allows images.
I'll paste the file here, and if you could extract the pertinent section into a followup containing what needs to be added to the new userChrome.css to get rid of the fog, I would be grateful. These old eyes are just about worn out today, and my brain is confused after spending most of the day on this project.
/* Firefox Quantum userChrome.css tweaks ************************************************/ /* Github: https://github.com/aris-t2/customcssforfx ************************************/ /* THIS EXTRACT combines two files from the above repository: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar.css version 2.6.8 as of Aug. 30, 2019 https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx65.css version 2.7.5 as of Sept. 30, 2019 */ /****************************************************************************************/ :root { --colored_menubar_background_image: linear-gradient(#f9f9fa,#f9f9fa); --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa); --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa); --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa); --tabs_toolbar_border-tnot_normal_mode_size: 1px; --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color); --classic_squared_tabs_tab_text_color: black; --classic_squared_tabs_new_tab_icon_color: black; --classic_squared_tabs_tab_text_shadow: transparent; --tab-min-height_tnot: 32px; } :root[uidensity=compact] { --tab-min-height_tnot: 28px; } :root[uidensity=touch] { --tab-min-height_tnot: 40px; } /* tabs toolbar adjustment */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #TabsToolbar { -moz-padding-start: 2px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[sizemode="maximized"] #TabsToolbar, #main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"]:not([style*='--lwt-header-image']):-moz-lwtheme #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar]:not([style*='--lwt-header-image']):-moz-lwtheme #TabsToolbar { -moz-padding-start: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar { margin-top: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar { padding-top: 0px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar, #main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{ margin-top: 0px !important; } /* tab title in titlebar support */ #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{ margin-top: 0px !important; } /* titlebar button support */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{ margin-top: 2px !important; } /* fix for application/hamburger button in titlebar */ #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button { visibility: collapse !important; } #main-window[inDOMFullscreen="true"] #TabsToolbar { opacity: 0 !important; } /* tab height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height_tnot) !important; } /* toolbar order (start) ************************************/ #print-preview-toolbar, #printedit-toolbar, #titlebar { -moz-box-ordinal-group: 0 !important; } #navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* navigation toolbar */ #navigator-toolbox #nav-bar { -moz-box-ordinal-group: 2 !important; } /* bookmarks toolbar */ #navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* 3rd party toolbars */ #navigator-toolbox toolbar { -moz-box-ordinal-group: 10 !important; } /* tabs toolbar */ #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100 !important; } /* toolbar order (end) **************************************/ /* toolbar colors */ #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) { background-image: var(--colored_menubar_background_image) !important; border: 0px !important; margin-bottom: -1px !important; } #nav-bar:not(:-moz-lwtheme) { -moz-appearance: none !important; background: var(--general_toolbar_color_navbar, inherit) !important; } toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) { -moz-appearance: none !important; background: var(--general_toolbar_color_toolbars, inherit) !important; } #TabsToolbar:not(:-moz-lwtheme){ -moz-appearance: none !important; background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important; } /* remove color overlay for lw-themes */ #main-window[style*='--lwt-header-image'] :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{ background: unset !important; } /* adjust compact themes background color */ #main-window:not([style*='--lwt-header-image']) #TabsToolbar:-moz-lwtheme { -moz-appearance: none !important; background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; } #main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton, #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton { fill: var(--classic_squared_tabs_new_tab_icon_color) !important; color: var(--classic_squared_tabs_new_tab_icon_color) !important; } /* toolbar borders */ #main-window #navigator-toolbox::after { opacity: 0 !important; } #TabsToolbar{ margin-bottom: 0px !important; border-bottom: 1px solid #5f7181 !important; } #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; background-clip: padding-box !important; }
--------- to be continued -----------
Modified
---------- continued -------------
#main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: 0px !important; border-right: 0px !important; } #main-window[style*='--lwt-header-image'][sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme, #main-window[style*='--lwt-header-image'][sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } #main-window:not([style*='--lwt-header-image']):-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { border-bottom: 1px solid #323234 !important; } #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { border-bottom: 1px solid #323234 !important; } #main-window:not([sizemode="fullscreen"])[tabsintitlebar] #TabsToolbar{ -moz-margin-end: 0px !important; } #main-window[tabsintitlebar] #TabsToolbar .titlebar-placeholder{ visibility: collapse !important; } #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] { margin-top: 21px !important; } #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] { margin-top: 20px !important; } #tabbrowser-tabs .tab-drop-indicator { margin-bottom: 0px !important; } #PersonalToolbar:-moz-lwtheme, #nav-bar:-moz-lwtheme { background-image: none !important; box-shadow: none !important; border-top: none !important; border-bottom: none !important; } /* remove tab fog */ #TabsToolbar:not(:-moz-lwtheme), #TabsToolbar:not(:-moz-lwtheme)::before, #TabsToolbar:not(:-moz-lwtheme)::after { box-shadow: unset !important; } /* remove 'dragging tab' margin/padding nonsense */ #TabsToolbar[movingtab] { padding-bottom: unset !important; } #TabsToolbar[movingtab] > .tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #TabsToolbar[movingtab] + #nav-bar { margin-top: unset !important; } /* scroll buttons */ #TabsToolbar:not(:-moz-lwtheme) #alltabs-button, #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-up, #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-arrowscrollbox > .scrollbutton-down { fill: black !important; } /* Fx58+ titlebar placeholders */ #TabsToolbar *[type="pre-tabs"], #TabsToolbar *[type="post-tabs"] { display: none !important; } @media (-moz-os-version: windows-win10) { #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] { margin-top: 30px !important; } #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] { margin-top: 30px !important; } } @media (-moz-windows-classic) { /* tweaks for Windows Classic theme */ #nav-bar:not(:-moz-lwtheme), #PersonalToolbar:not(:-moz-lwtheme), #main-window:not([tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) { border-left: unset !important; border-right: unset !important; background: unset !important; } #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: 0px !important; border-right: 0px !important; } #main-window:not([tabsintitlebar]) #toolbar-menubar:not(:-moz-lwtheme) { background: unset !important; box-shadow: unset !important; border-bottom: unset !important; } #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox, #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar, #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::before, #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::before, #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #navigator-toolbox::after, #main-window:not([tabsintitlebar]):not(:-moz-lwtheme) #nav-bar::after { background: unset !important; box-shadow: unset !important; border: unset !important; border-image: unset !important; } #main-window:not([tabsintitlebar]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) { background: unset !important; } } /* tab text colors */ #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab { color: var(--classic_squared_tabs_tab_text_color) !important; text-shadow: 1px 1px 1px var(--classic_squared_tabs_tab_text_shadow) !important; } /* fix Windows 7s default tab background (remove dark purple bg color)*/ @media (-moz-os-version: windows-win7) { @media (-moz-windows-default-theme) { .tabbrowser-tab:not([selected]):not(:hover):not(:-moz-lwtheme) { background-color: #e3e4e6 !important; } .tabbrowser-tab:not([selected]):hover:not(:-moz-lwtheme) { background-color: #cccdcf !important; } } } /* Simple Close Tab button */ #TabsToolbar:not(:-moz-lwtheme) #_fe8cab45-aaee-45f8-8765-781e0ebea300_-browser-action { --webextension-toolbar-image-light: url("moz-extension://7904448c-2319-4f6f-aac9-a1f701258098/icons/Close-dark.svg") !important; }
------- to be continued -------
Modified
------- continued -------
/* close tab button */ #TabsToolbar:not(:-moz-lwtheme) #closetab_fmarin_com-browser-action { --webextension-toolbar-image-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important; --webextension-toolbar-image-2x-light: url("moz-extension://31006e48-8e00-476f-8ea9-697e40934b02/icons/icon.svg") !important; } /* close window button */ #TabsToolbar:not(:-moz-lwtheme) #close-window-button_nanpuyue_com-browser-action { --webextension-toolbar-image-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important; --webextension-toolbar-image-2x-light: url("moz-extension://c914bd13-793f-4a2d-ab66-c655a3d75c52/icons/icon.svg") !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(1px + var(--tab-min-height_tnot)) !important; } #TabsToolbar { position: absolute !important; display:block !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } /* make sure button icon colors set correctly */ #main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon, #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon { fill: var(--classic_squared_tabs_new_tab_icon_color) !important; color: var(--classic_squared_tabs_new_tab_icon_color) !important; } #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar .titlebar-buttonbox-container { /*display: none !important;*/ visibility: hidden !important; } /* move caption buttons to windows top right position */ #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; visibility: visible !important; display: block !important; } /* caption button position in maximized mode after moving to the top */ #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container, #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #TabsToolbar .titlebar-buttonbox-container { top: -14px !important; } /* Windows */ @media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) { #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: 1px !important; } #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: 8px !important; } } /* Windows 7/8 extra tweaks */ @media (-moz-os-version: windows-win7) { @media all and (-moz-windows-compositor) { #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { display: none !important; } #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]):-moz-lwtheme #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { display: block !important; margin-top: -13px !important; } } @media not all and (-moz-windows-compositor) { #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: -2px !important; } #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: 0px !important; } } } @media (-moz-os-version:windows-win8) { #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: -13px !important; } #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container { top: -5px !important; } } /* Windows 10 extra tweaks */ @media (-moz-os-version: windows-win10) { #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]), #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) { background-color: Highlight !important; color: HighlightText !important; } } /* tweaks for fullscreen mode */ #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar ~ #TabsToolbar .titlebar-buttonbox-container, #main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button, #main-window #TabsToolbar #window-controls { display: none !important; } /* hide non-required items */ #TabsToolbar .private-browsing-indicator, #TabsToolbar #window-controls, #TabsToolbar *[type="caption-buttons"], #TabsToolbar *[type="pre-tabs"], #TabsToolbar *[type="post-tabs"] { display: none !important; } /* adjust private mode icon position */ @media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) { #main-window[tabsintitlebar][privatebrowsingmode=temporary]:not([inDOMFullscreen="true"]) #TabsToolbar .private-browsing-indicator { position: fixed !important; top: 0 !important; right: 130px !important; visibility: visible !important; display: block !important; } #main-window[tabsintitlebar][privatebrowsingmode=temporary][sizemode="maximized"]:not([inDOMFullscreen="true"]) #TabsToolbar .private-browsing-indicator { top: 8px !important; } } /* adjust tabs toolbar padding */ #main-window:-moz-any([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar]:-moz-any([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window:-moz-any([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar]:-moz-any([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #TabsToolbar { -moz-padding-start: 0px !important; -moz-margin-start: 0px !important; } /* hide line above navigation toolbar appearing in some cases */ #main-window:not([tabsintitlebar]) #nav-bar, #main-window:not([tabsintitlebar]) #navigator-toolbox { border-top: 0 !important; box-shadow: unset !important; } /* disable Mozillas tab jumping nonsense when moving tabs */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* size of new tab tabs '+' icon */ :-moz-any(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon { padding: 0px !important; margin: 0px !important; width: 18px !important; height: 18px !important; } /* some id!ot at Moz thought it is a great idea to add padding and margin values here */ @media (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) { #TabsToolbar > .toolbar-items { padding-top: 0 !important; margin-top: 0 !important; } } /* show window caption buttons in fullscreen mode */ #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls { position: absolute !important; display: block !important; top: 0 !important; right: 0 !important; margin-top: -32px !important; z-index: 1000 !important; } #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #nav-bar { -moz-padding-end: 60px !important; } #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls toolbarbutton, #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls toolbarbutton .toolbarbutton-icon { padding: 0 !important; margin: 0 !important; } @media (-moz-os-version: windows-win10) { #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"] #TabsToolbar #window-controls *, #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"]:-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar #window-controls * { color: black !important; fill: black !important; } #main-window:not([inDOMFullscreen="true"])[sizemode="fullscreen"]:-moz-lwtheme #TabsToolbar #window-controls * { color: white !important; fill: white !important; } }
Modified
Hi Henrietta, as you can see, code does not paste well here. Also, everyone who posted here is getting copies of all this, so it would be more considerate to start a new question and to share code using a site like Pastebin and share that link in your question.
New question form: https://support.mozilla.org/questions/new/desktop/form
https://pastebin.com/ (no account required)
(locking this thread as it is marked as solved; please create a new thread if you still have issues)