FF quantum tabs on bottom


Recommended Posts

1 hour ago, Bruinator said:

Is there an add-on that will put tabs on the bottom so it the lowest of all toolbars? In my case, below bookmarks toolbar? If there are none, how do I do this plz?

thx

Create a new folder in your Firefox profile called chrome, if there isn't one already. (Note, this has nothing to do with Google Chrome. )

(Your Firefox profile folder should be in \Users\YOUR-NAME\AppData\Roaming\Mozilla\Firefox\Profiles)

Open up Notepad, and create a file called userChrome.css

Copy and paste the following:

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

/* Tab bar below Navigation & Bookmarks Toolbars

  For best results, show Title Bar or Menu Bar */
  #nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
   }
    #PersonalToolbar { /* bookmarks toolbar */
   -moz-box-ordinal-group: 2 !important;
   }
   #TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }


#reload-button, #stop-button {
  display: -moz-box !important;
}

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

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Save the file in the chrome folder.

Restart Firefox.

 

 

Link to comment
Share on other sites

1 hour ago, DJGM said:

Create a new folder in your Firefox profile called chrome, if there isn't one already. (Note, this has nothing to do with Google Chrome. )

(Your Firefox profile folder should be in \Users\YOUR-NAME\AppData\Roaming\Mozilla\Firefox\Profiles)

Open up Notepad, and create a file called userChrome.css

Copy and paste the following:


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

/* Tab bar below Navigation & Bookmarks Toolbars

  For best results, show Title Bar or Menu Bar */
  #nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
   }
    #PersonalToolbar { /* bookmarks toolbar */
   -moz-box-ordinal-group: 2 !important;
   }
   #TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }


#reload-button, #stop-button {
  display: -moz-box !important;
}

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

#TabsToolbar {
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

Save the file in the chrome folder.

Restart Firefox.

 

 

Thx but they are still on top.

Link to comment
Share on other sites

Firefox no longer loads userChrome.css or userContent.css by default improving start-up performance. Users who wish to customize Firefox by using these files can set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true to restore this ability.

 

Do that first in about:config

Link to comment
Share on other sites

22 minutes ago, Burris said:

I'm sure I did something wrong.

Perhaps you can tell me exactly how you made it work for you.

thanks

Follow this path C:\users\"your user name" without the quotes\appdata\roaming\mozilla\firefox\profiles in which you need to create a folder called chrome. When that is done create a text file and call it userChrome.css (you must change the extension from .TXT to .CSS and put the following code in it:

 

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

    /* TABS on bottom - Firefox 65 and later */

    #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
      -moz-box-ordinal-group: 10 !important;
    }

    #TabsToolbar {
      -moz-box-ordinal-group: 1000 !important;
      display: block !important;
      position: absolute !important;
      bottom: 0 !important;
    /* width: 100vw !important; */
    }

    :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
     #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
      bottom: var(--tab-min-height) !important;
      padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
    }

    #tabbrowser-tabs {
      width: 100vw !important;
    }

    :root:not([chromehidden*="toolbar"]) #navigator-toolbox {
      padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
    }

    /* TABS: height */
    :root {
      --tab-toolbar-navbar-overlap: 0px !important;
      --tab-min-height: 25px !important; /* adjust */
    }

    :root #tabbrowser-tabs {
    /* --tab-min-height: 25px !important; */
      --tab-min-width: 80px !important; /* adjust */
    }

    #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
      min-height: var(--tab-min-height) !important;
      max-height: var(--tab-min-height) !important;
    }

    #TabsToolbar {
      height: var(--tab-min-height) !important;
      margin-bottom: 1px !important;
      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;
    }

    /* Override vertical shifts when moving a tab */
    #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 - hide */
    .Xprivate-browsing-indicator {display: none !important;}
    .accessibility-indicator    {display: none !important;}

    /* caption buttons - hide */
    :root[tabsintitlebar]:not([inFullscreen="true"])
     #toolbar-menubar[autohide="true"] ~ #TabsToolbar
     .titlebar-buttonbox-container {display: none !important;}

    #TabsToolbar #window-controls {display: none !important;}

 

Save it, restart firefox and it should work.

Link to comment
Share on other sites

1 hour ago, Bruinator said:

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

    /* TABS on bottom - Firefox 65 and later */

    #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
      -moz-box-ordinal-group: 10 !important;
    }

    #TabsToolbar {
      -moz-box-ordinal-group: 1000 !important;
      display: block !important;
      position: absolute !important;
      bottom: 0 !important;
    /* width: 100vw !important; */
    }

    :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
     #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
      bottom: var(--tab-min-height) !important;
      padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
    }

    #tabbrowser-tabs {
      width: 100vw !important;
    }

    :root:not([chromehidden*="toolbar"]) #navigator-toolbox {
      padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
    }

    /* TABS: height */
    :root {
      --tab-toolbar-navbar-overlap: 0px !important;
      --tab-min-height: 25px !important; /* adjust */
    }

    :root #tabbrowser-tabs {
    /* --tab-min-height: 25px !important; */
      --tab-min-width: 80px !important; /* adjust */
    }

    #tabbrowser-tabs,
    #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
    .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
      min-height: var(--tab-min-height) !important;
      max-height: var(--tab-min-height) !important;
    }

    #TabsToolbar {
      height: var(--tab-min-height) !important;
      margin-bottom: 1px !important;
      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;
    }

    /* Override vertical shifts when moving a tab */
    #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 - hide */
    .Xprivate-browsing-indicator {display: none !important;}
    .accessibility-indicator    {display: none !important;}

    /* caption buttons - hide */
    :root[tabsintitlebar]:not([inFullscreen="true"])
     #toolbar-menubar[autohide="true"] ~ #TabsToolbar
     .titlebar-buttonbox-container {display: none !important;}

    #TabsToolbar #window-controls {display: none !important;}

 

Bruinator

 

I don't know how to thank you enough.

I copied every step and success

 

I can say to you...."Don't get old too fast."

Link to comment
Share on other sites

10 hours ago, Burris said:

 

Bruinator

 

I don't know how to thank you enough.

I copied every step and success

 

I can say to you...."Don't get old too fast."

You are very welcome :)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.