Move the tab bar - Firefox: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
((Move it to the Left/Right Sides) Broken on Firefox 1.0.4)
(Firefox 4.0 offers choice of tabs on top or on bottom of toolbars)
 
(10 intermediate revisions by 8 users not shown)
Line 1: Line 1:
Edit your [[userChrome.css]] file to add the code you need, as follows.
Edit your [[userChrome.css]] file to add the code you need, as follows.


===Move it to the Bottom===
/* Display the tabbar at the bottom */
  /* Display the tabbar at the bottom */<br>
#content > tabbox { -moz-box-direction: reverse; }
  &#35;content > tabbox {-moz-box-direction: reverse;}


===Move it to the Left/Right Sides===
===Move it to the Left/Right Sides===
/* Display the tabbar on the left */
#content > tabbox {
  -moz-box-orient: horizontal;
}
.tabbrowser-strip {
  -moz-box-orient: vertical;
  /* note: you can set this to -moz-scrollbars-vertical instead,
      but then the scrollbar will *always* be visible.  this way
      there is never a scrollbar, so it behaves like the tab bar
      normally does */
  overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
  -moz-box-orient: horizontal;
  min-width: 10ex;  /* you may want to increase this value */
  -moz-box-align: start;
}
.tabbrowser-tabs > hbox {
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
}
.tabbrowser-tabs > hbox > tab {
  -moz-box-align: start;
  -moz-box-orient: horizontal;
}
/* remove the close-tab button */
.tabbrowser-tabs > stack {
  display: none;
}


(NoteThis doesn't seem to work in Firefox 1.0.4, at least not so far as making the tabs lay out in a vertical column. It also looks like tabbrowser.xml has changed in structure.  Help?)
If you want to move it to the right, add the following lines to the above:
  /* Instead, display the tabbar on the right */
  #content > tabbox { -moz-box-direction: reverse; }


  /* Display the tabbar on the left */<br>
Unabashedly stolen from [http://forums.mozillazine.org/viewtopic.php?p=238798#238798 clav].
  &#35;content > tabbox {
    -moz-box-orient: horizontal;
  }


  .tabbrowser-strip {
    -moz-box-orient: vertical;
    /* note: you can set this to -moz-scrollbars-vertical instead,
      but then the scrollbar will *always* be visible.  this way
      there is never a scrollbar, so it behaves like the tab bar
      normally does */
    overflow: -moz-scrollbars-none;
  }


  .tabbrowser-tabs {
Note that this does not work for Firefox 2.0b2 and newer.
    -moz-box-orient: horizontal;
    min-width: 10ex;  /* you may want to increase this value */
    -mox-box-pack: start;
    -moz-box-align: start;
  }


  .tabbrowser-tabs > hbox {
==Firefox 4.0 and above==
    -moz-box-orient: vertical;
The Tab bar will be at the top of the toolbars by default.  To move the Tab bar back down below the Location bar use as in previous versions -- View (Alt+V) menu -> uncheck "Tabs on Top"
    -moz-box-align: stretch;
    -moz-box-pack: start;
  }


  .tabbrowser-tabs > hbox > tab {
[[Category:Visual customizations (Firefox)]]
    -moz-box-align: start;
[[Category:Tabbed browsing]]
    -moz-box-orient: horizontal;
  }
 
  /* remove the close-tab button */
  .tabbrowser-tabs > stack {
    display: none;
  }
 
If you want to move it to the right, add the following lines to the above:<br>
  /* Instead, display the tabbar on the right */<br>
  &#35;content > tabbox {-moz-box-direction: reverse;}
 
Unabashedly stolen from [http://forums.mozillazine.org/viewtopic.php?p=238798#238798 clav].

Latest revision as of 11:34, 2 September 2010

Edit your userChrome.css file to add the code you need, as follows.

/* Display the tabbar at the bottom */

  1. content > tabbox { -moz-box-direction: reverse; }

Move it to the Left/Right Sides

/* Display the tabbar on the left */
#content > tabbox {
  -moz-box-orient: horizontal;
}

.tabbrowser-strip {
  -moz-box-orient: vertical;
  /* note: you can set this to -moz-scrollbars-vertical instead,
     but then the scrollbar will *always* be visible.  this way
     there is never a scrollbar, so it behaves like the tab bar
     normally does */
  overflow: -moz-scrollbars-none;
}

.tabbrowser-tabs {
  -moz-box-orient: horizontal;
  min-width: 10ex;   /* you may want to increase this value */
  -moz-box-align: start;
}

.tabbrowser-tabs > hbox {
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
}

.tabbrowser-tabs > hbox > tab {
  -moz-box-align: start;
  -moz-box-orient: horizontal;
}

/* remove the close-tab button */
.tabbrowser-tabs > stack {
  display: none;
}

If you want to move it to the right, add the following lines to the above:

/* Instead, display the tabbar on the right */
#content > tabbox { -moz-box-direction: reverse; }

Unabashedly stolen from clav.


Note that this does not work for Firefox 2.0b2 and newer.

Firefox 4.0 and above

The Tab bar will be at the top of the toolbars by default. To move the Tab bar back down below the Location bar use as in previous versions -- View (Alt+V) menu -> uncheck "Tabs on Top"