How to access Tabs
I see Mozilla has done it again how the heck do I access my tabs they all briefly showed at the bottom in the status bar and then all vanished!
And I know the update is new but how do I get them back to where I had them??? I do not want my tabs at the bottom of my browser I want them right where I had them at the bottom of the header bars at top of screen!
Chosen solution
Okay, go back to your working tabs-on-bottom code, and then here is how you can safely combine the files:
(1) Download the SVG Fill file, it's name is userChrome-color_bookmark_folders_Proton89.css
(2) Put that file in your chrome folder next to your userChrome.css file
(3) Paste this new line on the top of your userChrome.css file (@import lines need to be before other lines):
@import url(userChrome-color_bookmark_folders_Proton89.css);
When Firefox starts, it will read in the file and then continue with the rest of userChrome.css.
Success?
More info on this method: https://www.userchrome.org/adding-style-recipes-userchrome-css.html
Read this answer in context 👍 1All Replies (7)
Hello, have you been using style rules in a userChrome.css file to move your tabs below the address bar? The old CSS rules cause the tabs to clump together at the very bottom of the browser. You need to delete the CSS (to return to the standard layout) or update it to work with Firefox 89.
You could take a look at this thread: https://support.mozilla.org/questions/1338147
jscher2000 said
Hello, have you been using style rules in a userChrome.css file to move your tabs below the address bar? The old CSS rules cause the tabs to clump together at the very bottom of the browser. You need to delete the CSS (to return to the standard layout) or update it to work with Firefox 89. You could take a look at this thread: https://support.mozilla.org/questions/1338147
Yeah let me remove it and reload as this is totally browser breaking the way it is. Will update this once I reload.
UPDATE: OK so I have tabs back again and the post you posted for REDDIT did get the tabs back on bottom again. Gonna check on the color options see if I can get them back.
While I search that any ideas?
This is the code I currently have in my CSS file. The bottom section is a section of code we used to colorize the folders and such but doesn't seem to be working on this update.
Also my bookmark tool bar the drop down menus seem to have just a tad to much space between the items in the list. I have tried adjusting some of the height numbers but not found the right one. Is there a way in the code below I might have missed to remove some of the spacing between items in the drop down menus list for the bookmarks toolbar.
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Modify to change window drag space width */ /* Use tabs_on_bottom_menubar_on_top_patch.css if you have menubar permanently enabled and want it on top */ /* IMPORTANT */ /* Get window_control_placeholder_support.css Window controls will be all wrong without it. Additionally on Linux, you may need to get: linux_gtk_window_control_patch.css */ :root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container{ position: fixed; display: block; top: var(--uc-titlebar-padding,0px); right:0; height: 35px; } /* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ :root{ --uc-titlebar-padding: 0px !important } .titlebar-buttonbox-container{ left:0; right: unset !important; } } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } #navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; } .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } .titlebar-placeholder, #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } @media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } /* These exist only for compatibility with autohide-tabstoolbar.css */ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root{ --uc-window-control-width: 0px !important } #navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important } #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 25px; width: 100%; overflow: hidden; } #toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; } #toolbar-menubar > [flex]{ flex-grow: 100; } #toolbar-menubar > spacer[flex]{ order: 99; flex-grow: 1; min-width: var(--uc-window-drag-space-width,20px); } #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; } #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } /* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 29px !important; --tab-min-width: 80px !important; #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} .tab-background { border-radius: 8px 8px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } .tab-close-button { color: red!important; } /* Colored bookmark sidebar, toolbar, menu button containers */ /* Standard folder */ #bookmarks-view treechildren::-moz-tree-image(container), #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon { fill: gold !important; } /* Live Bookmark (RSS Feed) */ #bookmarks-view treechildren::-moz-tree-image(container, livemark), #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon { fill: orange !important; } /* Smart bookmark folder */ #bookmarks-view treechildren::-moz-tree-image(container, query), #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon, #PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left, #BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon { fill: dimtan !important; } /* These "containers" are SVG in the sidebar, not yet on the menu */ #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) { fill: tan !important; } #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) { fill: tan !important; } #bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) { fill: tan !important; }
Modified
OK in answer to your PM question no just the outline as the color seems to stay black even though we had a color on the frame last time. And not sure on the middle as I can't remember what it was and there is a reference a number of times to fill like the line below as an example from the code above
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
fill: orange !important;
That worked but one issue was it moved my tabs back on top. I tried combining the codes to keep the tabs on bottom but then it removed the color. thoughts?
Chosen Solution
Okay, go back to your working tabs-on-bottom code, and then here is how you can safely combine the files:
(1) Download the SVG Fill file, it's name is userChrome-color_bookmark_folders_Proton89.css
(2) Put that file in your chrome folder next to your userChrome.css file
(3) Paste this new line on the top of your userChrome.css file (@import lines need to be before other lines):
@import url(userChrome-color_bookmark_folders_Proton89.css);
When Firefox starts, it will read in the file and then continue with the rest of userChrome.css.
Success?
More info on this method: https://www.userchrome.org/adding-style-recipes-userchrome-css.html
Perfect THANKS! You're always a huge help getting these issues resolved!!!