Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Avatar for Username

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

Tabs on bottom is Tabs below URL and Bookmarks multi line?

  • 1 antwoord
  • 0 hebben dit probleem
  • 1 weergave
  • Laatste antwoord van cor-el

Simson FireFox
Simson FireFox
more options

Besides old content from 2017 where is the most current listing of Tabs below the URL and below the Multi Bookmarks lines. I have the code inserted in the CSS code after the code for the Multi bookmarks section. So, why is the Tabs showing up at the bottom of the screen. Can someone point me to the right version of tabs? I'm on 105.0.2 10-8-22 

/* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */
/*  https://support.mozilla.org/en-US/questions/1274416  Github  10/8/22  */
@import url("tabs-on-bottom.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

tabs-on-bottom.css working code for Firefox 71 posted in this thread. 

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: below navbar - Firefox 65-89+,95+,106+,108+ */

/* #SXRR#/source/browser/themes/shared/tabs.inc.css */
/* #GHC#/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */

/* ROOT: VARS */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 26px !important;
  --tab-min-width:  60px !important; /*minimum:50px*/
/*  --tab-overflow-pinned-tabs-width: 175px */

  --tabbar-adjust:  0px;
  --tabbar-caption: 0px;

  --tabbar-caption-padding:  90px;
  --tabbar-controls-padding: 90px;
}

/* TABS: below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group: 10 !important;}
#TabsToolbar {-moz-box-ordinal-group: 1000 !important;}

/* TABS: POSITION */
#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/* Firefox 107 and older *//* #tabbrowser-tabs { width: 100vw !important; } */

/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TABS: menubar,titlebar hidden - 65-73 *//*
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tabbar-adjust) !important; /*ADJUST*/
}
*/

/* TABS: HEIGHT */
#tabbrowser-tabs,
#xtabbrowser-arrowscrollbox,
#xtabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

/* TABS: APPEARANCE */
#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* DRAG SPACE */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* TABS: movingtab - vertical shifts */
#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;
}

/* INDICATORS - POSITION */
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  display: block !important;
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}

/* INDICATORS - HIDE */
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}

/* If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar. */ 

/* caption buttons - PersonalToolbar hidden/visible */
*|*:root {
 --personal-toolbar-height: 0px !important;   /*PersonalToolbar hidden*/
 --personal-toolbar-height: 24px !important;  /*PersonalToolbar visible*/
 --caption-buttons-adjust: -12px !important;  /*caption buttons - vertical adjustment*/
}

*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="false"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust));
  visibility: visible !important;
  height: var(--tab-min-height) !important;
}

/* caption buttons - HEIGHT and WIDTH */
.titlebar-buttonbox-container toolbarbutton {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0 !important;
}

/* caption buttons - PADDING - reserve space on Tab bar */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 100px !important; /*adjust*/
}
Besides old content from 2017 where is the most current listing of Tabs below the URL and below the Multi Bookmarks lines. I have the code inserted in the CSS code after the code for the Multi bookmarks section. So, why is the Tabs showing up at the bottom of the screen. Can someone point me to the right version of tabs? I'm on 105.0.2 10-8-22 <pre><nowiki> /* TABS: bottom - Firefox 65 and newer; should for now work with XUL @namespace */ /* https://support.mozilla.org/en-US/questions/1274416 Github 10/8/22 */ @import url("tabs-on-bottom.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */</nowiki></pre><br> tabs-on-bottom.css working code for Firefox 71 posted in this thread. <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* TABS: below navbar - Firefox 65-89+,95+,106+,108+ */ /* #SXRR#/source/browser/themes/shared/tabs.inc.css */ /* #GHC#/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_navigation_toolbar_fx89.css */ /* ROOT: VARS */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 26px !important; --tab-min-width: 60px !important; /*minimum:50px*/ /* --tab-overflow-pinned-tabs-width: 175px */ --tabbar-adjust: 0px; --tabbar-caption: 0px; --tabbar-caption-padding: 90px; --tabbar-controls-padding: 90px; } /* TABS: below nav-bar */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group: 10 !important;} #TabsToolbar {-moz-box-ordinal-group: 1000 !important;} /* TABS: POSITION */ #TabsToolbar { display: block !important; position: absolute !important; bottom: 0; width: 100vw !important; } /* Firefox 107 and older *//* #tabbrowser-tabs { width: 100vw !important; } */ /* navigator-toolbox: PADDING */ *|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox { position: relative !important; /*89*/ padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/ background-color: var(--toolbar-bgcolor) !important; } /* TABS: menubar,titlebar hidden - 65-73 *//* *|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tabbar-adjust) !important; /*ADJUST*/ } */ /* TABS: HEIGHT */ #tabbrowser-tabs, #xtabbrowser-arrowscrollbox, #xtabbrowser-tabs .tabbrowser-tab { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #tabbrowser-tabs, .tab-stack, .tab-content { height: var(--tab-min-height) !important; } /* TABS: APPEARANCE */ #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* DRAG SPACE */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* TABS: movingtab - vertical shifts */ #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; } /* INDICATORS - POSITION */ *|*:root[privatebrowsingmode=temporary] .private-browsing-indicator { display: block !important; position: absolute !important; bottom: 0px !important; right: 0px !important; width: 14px !important; pointer-events: none !important; } /* INDICATORS - HIDE */ *|*:root:not([accessibilitymode]) .accessibility-indicator {display: none !important} *|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important} </nowiki></pre><br> /* If you want to have the caption buttons visible on the Tab bar with the Menu bar and Title bar hidden then use this code as a start to replace the above posted "caption buttons - hide" rule. The caption button are positioned absolutely via a top property, so this is affected by the Bookmarks Toolbar (PersonalToolbar) being visible or hidden. Use either of the two "--personal-toolbar-height" settings that apply to the state (collapsed/hidden) of the Bookmarks Toolbar. */ <pre><nowiki>/* caption buttons - PersonalToolbar hidden/visible */ *|*:root { --personal-toolbar-height: 0px !important; /*PersonalToolbar hidden*/ --personal-toolbar-height: 24px !important; /*PersonalToolbar visible*/ --caption-buttons-adjust: -12px !important; /*caption buttons - vertical adjustment*/ } *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; display: block !important; right: 0 !important; top: calc(var(--tab-min-height) + var(--personal-toolbar-height) + var(--caption-buttons-adjust)); visibility: visible !important; height: var(--tab-min-height) !important; } /* caption buttons - HEIGHT and WIDTH */ .titlebar-buttonbox-container toolbarbutton { height: var(--tab-min-height) !important; margin: 0px -5px 0px -5px !important; padding: 0 !important; } /* caption buttons - PADDING - reserve space on Tab bar */ *|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar { padding-right: 100px !important; /*adjust*/ } </nowiki></pre>

Bewerkt door cor-el op

Alle antwoorden (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You need to add a position: relative rule under this section: 

/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

In 108 and newer you need to comment out this rule: 

/* no longer needed in Firefox 108 and newer *//*
#tabbrowser-tabs {
 width: 100vw !important;
}*/

Bewerkt door cor-el op