Om de ûnderfining foar jo te ferbetterjen is tydlik de funksjonaliteit dan dizze website troch ûnderhâldswurk beheind. Wannear in artikel jo probleem net oplost en jo in fraach stelle wolle, kin ús stipemienskip jo helpe yn @FirefoxSupport op Twitter en /r/firefox op Reddit.

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

UserChrome CSS Hide Tabstoolbar when only one TAB Firefox 128.4.0esr

more options

Hi All,

Been trying to find a solution for over 2 days now! Please help me!

Firefox 128.4.0esr

I want to hide the following, because I need the screen space: 1/ Tabstoolbar = NOK 2/ Autohide main toolbars = OK 3/ Bring back the old status bar = OK

The last 2 are OK, but the first one doesn't seem to work? I think that there's something in the first script that prevents this from working, coz I have tried everything. Please help it's driving me nuts, never use tabs only windows, because on macOS that's better.

Here's what I have so far, all this is working just fine.

The very last line is disabled because this does what I want but it breaks the "auto hide" main toolbars.

MANY THANKS FOR YOU TIME AND HELP!!!!


/* Fake_Statusbar_W_Bookmarksbar_-_Creates A Statusbar At The Bottom Of The Window By Using Bookmarks Toolbar */

root:not([inFullscreen]) > body{
 --uc-statusbar-button-padding: 4px;
 --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 7px + 2px);
 --uc-statusbar-text-vertical-position: 5px;

}

  1. PersonalToolbar .toolbarbutton-1{
 --toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important;

}

root[uidensity="compact"]:not([inFullscreen]) > body{
 --uc-statusbar-text-vertical-position: 3px;

}

root:not([inFullscreen]) > body::after{
 content: "";
 display: flex;
 margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
 order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */

}

  1. PersonalToolbar{
 position: fixed;
 display: flex;
 bottom: 0;
 width: 100vw;
 border-top: 1px solid var(--chrome-content-separator-color);

}

  1. personal-toolbar-empty + toolbarspring,
  2. PersonalToolbar > :first-child + toolbarspring{
 background-position: left var(--uc-statusbar-text-vertical-position);
 background-repeat: no-repeat;
 background-image: -moz-element(#statuspanel);
 max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
 min-width: 60ch;
 flex-grow: 10 !important;

}

  1. personal-toolbar-empty{ visibility: hidden; }
  2. PersonalToolbar .toolbarbutton-1{
 align-items: center !important;

}

  1. PersonalToolbar > toolbarspring{
 flex-grow: 1;
 max-width: none !important;
 min-height: var(--uc-browser-base-padding) !important; 

}

/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */

  1. PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
  1. statuspanel{
 padding-top: 0 !important;
 text-shadow: none !important;

}

  1. statuspanel-label{
 height:3em;
 min-width: 1000px;
 background-color: transparent !important;
 border: none !important;
 font-size: inherit;
 color: inherit !important;
 margin-inline: 0px !important;
 padding-inline: 0 !important;

} /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */

  1. statuspanel-inner{ background-color: var(--toolbar-accent-color) }

/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/

  1. statuspanel{
 color: lightpink; /* color used to indicate insecure http:// links */
 z-index: -1;
 visibility: visible !important;
 opacity: 1 !important;

}

  1. statuspanel[inactive] #statuspanel-label{ visibility: hidden }

.browserStack > #statuspanel[inactive]::before,

  1. statuspanel[inactive] > #statuspanel-inner::before{
 content: "Done";
 display: flex;
 margin-top: 2px;
 color: var(--toolbar-field-color, black) !important;

}

  1. statuspanel[type="status"] { color: skyblue }
  1. statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }

/* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */ .browserContainer, .browserSidebarContainer{

 background-color: inherit;

}




/* Autohide_Bookmarks_And_Main_Toolbars */

  1. navigator-toolbox{
 --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
 --uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
 --uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
 --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */

}

root[uidensity="compact"] #navigator-toolbox{
 --uc-navbar-height: -34px;

}

root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
root[chromehidden~="directories"] #navigator-toolbox{
 --uc-bm-height: 0px;

}

root[chromehidden~="toolbar"] #navigator-toolbox{
 --uc-navbar-height: 0px;

}

  1. navigator-toolbox,
  2. sidebar-box,
  3. sidebar-main,
  4. sidebar-splitter,
  5. tabbrowser-tabbox{
 z-index: auto !important;

}

root[sessionrestored] #nav-bar,
root[sessionrestored] #PersonalToolbar{
 background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage))  !important;
 background-position: top,var(--lwt-background-alignment);
 background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
 background-repeat: repeat,var(--lwt-background-tiling);
 transform: rotateX(90deg);
 transform-origin: top;
 transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
 z-index: 2;

}

  1. PlacesToolbarItems > .bookmark-item,
  2. OtherBookmarks,
  3. PersonalToolbar > #import-button{
 padding-block: var(--uc-bm-padding) !important;

}

root[sessionrestored] #PersonalToolbar{
 z-index: 1;
 background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));

}

root[lwtheme-image] #nav-bar,
root[lwtheme-image] #PersonalToolbar{
 background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;

}

  1. nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
  1. navigator-toolbox > #PersonalToolbar{
 transform-origin: 0px var(--uc-navbar-height);
 position: relative;

}

root[sessionrestored] #urlbar[popover]{
 opacity: 0;
 pointer-events: none;
 transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
 transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
 transform: rotateX(89.5deg);

}

  1. mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
  2. navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
  3. urlbar-container > #urlbar[popover]:is([focused],[open]){
 opacity: 1;
 pointer-events: auto;
 transition-delay: 100ms;
 transform: rotateX(0deg);

}

root[sessionrestored]:not([customizing]) #navigator-toolbox{
 margin-bottom:  calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height));

}

/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */

root[sizemode="fullscreen"] #PersonalToolbar,
  1. PersonalToolbar[collapsed="true"]{
 min-height: initial !important;
 max-height: initial !important;
 visibility: hidden !important

}

  1. PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
 visibility: hidden !important;

}

/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */

  1. PlacesToolbarItems:empty{
 height: var(--uc-bm-height);

}

/* Selected tab needs higher z-index now to "hide" the broder below it */ .tabbrowser-tab[selected]{ z-index: 3 !important; }

/* Show when cursor is over main menu popup - this requires :has selector support */

  1. mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox > .browser-toolbar{
 transition-delay: 100ms !important;
 transform: rotateX(0);

}

/* SELECT TOOLBAR BEHAVIOR */ /* Comment out or delete one of these to disable that behavior */

/* Show when urlbar is focused */

  1. nav-bar:focus-within + #PersonalToolbar,
  2. navigator-toolbox > #nav-bar:focus-within{
 transition-delay: 100ms !important;
 transform: rotateX(0);

}

/* Show when cursor is over the toolbar area */

  1. navigator-toolbox:hover > .browser-toolbar{
 transition-delay: 100ms !important;
 transform: rotateX(0);

}

/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */

  1. navigator-toolbox > div{ display: contents }
where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
 order: -1;

}

root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
 margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
 z-index: auto !important;

} @media (-moz-bool-pref: "browser.fullscreen.autohide"){

 :root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
   margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
 }

}

/* Set the following pref to enable compatibility with multi-row_bookmarks.css */ @media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){

 #navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
 #PersonalToolbar:not([customizing]){
   min-height: 0 !important;
   margin-bottom: 0;
   height: 0;
   overflow-y: visible !important;
   z-index: 2;
   padding-inline: 0 !important;
 }
 #personal-bookmarks{
   background: inherit;
   height: min-content;
 }
 #PlacesToolbarDropIndicatorHolder{
   pointer-events: none !important;
 }

}




/* Hide Tab Bar With Only One Tab */

/* #TabsToolbar { visibility: collapse !important; } */

Hi All, Been trying to find a solution for over 2 days now! Please help me! Firefox 128.4.0esr I want to hide the following, because I need the screen space: 1/ Tabstoolbar = NOK 2/ Autohide main toolbars = OK 3/ Bring back the old status bar = OK The last 2 are OK, but the first one doesn't seem to work? I think that there's something in the first script that prevents this from working, coz I have tried everything. Please help it's driving me nuts, never use tabs only windows, because on macOS that's better. Here's what I have so far, all this is working just fine. The very last line is disabled because this does what I want but it breaks the "auto hide" main toolbars. MANY THANKS FOR YOU TIME AND HELP!!!! /* Fake_Statusbar_W_Bookmarksbar_-_Creates A Statusbar At The Bottom Of The Window By Using Bookmarks Toolbar */ :root:not([inFullscreen]) > body{ --uc-statusbar-button-padding: 4px; --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 7px + 2px); --uc-statusbar-text-vertical-position: 5px; } #PersonalToolbar .toolbarbutton-1{ --toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important; } :root[uidensity="compact"]:not([inFullscreen]) > body{ --uc-statusbar-text-vertical-position: 3px; } :root:not([inFullscreen]) > body::after{ content: ""; display: flex; margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important; order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */ } #PersonalToolbar{ position: fixed; display: flex; bottom: 0; width: 100vw; border-top: 1px solid var(--chrome-content-separator-color); } #personal-toolbar-empty + toolbarspring, #PersonalToolbar > :first-child + toolbarspring{ background-position: left var(--uc-statusbar-text-vertical-position); background-repeat: no-repeat; background-image: -moz-element(#statuspanel); max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */ min-width: 60ch; flex-grow: 10 !important; } #personal-toolbar-empty{ visibility: hidden; } #PersonalToolbar .toolbarbutton-1{ align-items: center !important; } #PersonalToolbar > toolbarspring{ flex-grow: 1; max-width: none !important; min-height: var(--uc-browser-base-padding) !important; } /* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */ #PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none } #statuspanel{ padding-top: 0 !important; text-shadow: none !important; } #statuspanel-label{ height:3em; min-width: 1000px; background-color: transparent !important; border: none !important; font-size: inherit; color: inherit !important; margin-inline: 0px !important; padding-inline: 0 !important; } /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */ #statuspanel-inner{ background-color: var(--toolbar-accent-color) } /*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/ #statuspanel{ color: lightpink; /* color used to indicate insecure http:// links */ z-index: -1; visibility: visible !important; opacity: 1 !important; } #statuspanel[inactive] #statuspanel-label{ visibility: hidden } .browserStack > #statuspanel[inactive]::before, #statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; display: flex; margin-top: 2px; color: var(--toolbar-field-color, black) !important; } #statuspanel[type="status"] { color: skyblue } #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; } /* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */ .browserContainer, .browserSidebarContainer{ background-color: inherit; } /* Autohide_Bookmarks_And_Main_Toolbars */ #navigator-toolbox{ --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ --uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */ --uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */ --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ } :root[uidensity="compact"] #navigator-toolbox{ --uc-navbar-height: -34px; } :root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px } :root[chromehidden~="directories"] #navigator-toolbox{ --uc-bm-height: 0px; } :root[chromehidden~="toolbar"] #navigator-toolbox{ --uc-navbar-height: 0px; } #navigator-toolbox, #sidebar-box, #sidebar-main, #sidebar-splitter, #tabbrowser-tabbox{ z-index: auto !important; } :root[sessionrestored] #nav-bar, :root[sessionrestored] #PersonalToolbar{ background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; background-position: top,var(--lwt-background-alignment); background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px)); background-repeat: repeat,var(--lwt-background-tiling); transform: rotateX(90deg); transform-origin: top; transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 2; } #PlacesToolbarItems > .bookmark-item, #OtherBookmarks, #PersonalToolbar > #import-button{ padding-block: var(--uc-bm-padding) !important; } :root[sessionrestored] #PersonalToolbar{ z-index: 1; background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height)); } :root[lwtheme-image] #nav-bar, :root[lwtheme-image] #PersonalToolbar{ background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; } #nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important } #navigator-toolbox > #PersonalToolbar{ transform-origin: 0px var(--uc-navbar-height); position: relative; } :root[sessionrestored] #urlbar[popover]{ opacity: 0; pointer-events: none; transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms); transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2); transform: rotateX(89.5deg); } #mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover], #navigator-toolbox:is(:hover,:focus-within) #urlbar[popover], #urlbar-container > #urlbar[popover]:is([focused],[open]){ opacity: 1; pointer-events: auto; transition-delay: 100ms; transform: rotateX(0deg); } :root[sessionrestored]:not([customizing]) #navigator-toolbox{ margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)); } /* Make sure the bookmarks toolbar is never collapsed even if it is disabled */ :root[sizemode="fullscreen"] #PersonalToolbar, #PersonalToolbar[collapsed="true"]{ min-height: initial !important; max-height: initial !important; visibility: hidden !important } #PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *, :root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{ visibility: hidden !important; } /* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */ #PlacesToolbarItems:empty{ height: var(--uc-bm-height); } /* Selected tab needs higher z-index now to "hide" the broder below it */ .tabbrowser-tab[selected]{ z-index: 3 !important; } /* Show when cursor is over main menu popup - this requires :has selector support */ #mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox > .browser-toolbar{ transition-delay: 100ms !important; transform: rotateX(0); } /* SELECT TOOLBAR BEHAVIOR */ /* Comment out or delete one of these to disable that behavior */ /* Show when urlbar is focused */ #nav-bar:focus-within + #PersonalToolbar, #navigator-toolbox > #nav-bar:focus-within{ transition-delay: 100ms !important; transform: rotateX(0); } /* Show when cursor is over the toolbar area */ #navigator-toolbox:hover > .browser-toolbar{ transition-delay: 100ms !important; transform: rotateX(0); } /* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */ #navigator-toolbox > div{ display: contents } :where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){ order: -1; } :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{ margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important; z-index: auto !important; } @media (-moz-bool-pref: "browser.fullscreen.autohide"){ :root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{ margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important; } } /* Set the following pref to enable compatibility with multi-row_bookmarks.css */ @media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){ #navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; } #PersonalToolbar:not([customizing]){ min-height: 0 !important; margin-bottom: 0; height: 0; overflow-y: visible !important; z-index: 2; padding-inline: 0 !important; } #personal-bookmarks{ background: inherit; height: min-content; } #PlacesToolbarDropIndicatorHolder{ pointer-events: none !important; } } /* Hide Tab Bar With Only One Tab */ /* #TabsToolbar { visibility: collapse !important; } */
Keppele skermôfbyldingen

Alle antwurden (2)

more options

Where do you usually get your style rules? Major repositories like the following usually update them whenever Firefox changes significantly:

Behelpsum?

more options

Hi there jscher2000!

First many thanks for all your help and time.

I'll get my style rules and css rules from here: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome

And yesterday evening, very late, I finally found one which does hide everything. So problem solved, I'm so happy for this, after more than 2 days of searching the internet,...

THANK YOU! Marc.

Behelpsum?

In fraach stelle

Jo moatte jo oanmelde by jo account om op berjochten te antwurdzjen. Stel in nije fraach as jo noch gjin account hawwe.