Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

সহায়তা খুঁজুন

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

আরও জানুন

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

  • 1 উত্তর
  • 0 এই সমস্যাটি আছে
  • 1 দেখুন
  • শেষ জবাব দ্বারা cor-el

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>

cor-el দ্বারা পরিমিত

All Replies (1)

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;
}*/

cor-el দ্বারা পরিমিত