Move the tab bar - Firefox: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(Removed old question from "Move the tabbar (Firefox)")
m (formatting cleanup)
Line 1: Line 1:
Edit your [[userChrome.css]] file to add the code you need, as follows.
Edit your [[userChrome.css and userContent.css|userChrome.css]] file to add the code you need, as follows.


===Move it to the Bottom===
===Move it to the Bottom===
  /* Display the tabbar at the bottom */<br>
/* Display the tabbar at the bottom */
  &#35;content > tabbox {-moz-box-direction: reverse;}
#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 */<br>
/* Display the tabbar on the left */
  &#35;content > tabbox {
#content > tabbox {
    -moz-box-orient: horizontal;
  -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 */
  -mox-box-pack: start;
  -moz-box-align: start;
}
.tabbrowser-tabs > hbox {
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  -moz-box-pack: start;
}
.tabbrowser-tabs > hbox > tab {
  -moz-box-align: start;
  -moz-box-orient: horizontal;
}
/* remove the close-tab button */
.tabbrowser-tabs > stack {
  display: none;
}


  .tabbrowser-strip {
If you want to move it to the right, add the following lines to the above:
    -moz-box-orient: vertical;
/* Instead, display the tabbar on the right */
    /* note: you can set this to -moz-scrollbars-vertical instead,
#content > tabbox { -moz-box-direction: reverse; }
      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 */
    -mox-box-pack: start;
    -moz-box-align: start;
  }
 
  .tabbrowser-tabs > hbox {
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    -moz-box-pack: start;
  }
 
  .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:<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].
Unabashedly stolen from [http://forums.mozillazine.org/viewtopic.php?p=238798#238798 clav].

Revision as of 20:53, 14 September 2005

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

Move it to the Bottom

/* Display the tabbar at the bottom */
#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 */
  -mox-box-pack: start;
  -moz-box-align: start;
}

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

.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.