This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

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.

Learn More

This thread was archived. Please ask a new question if you need help.

how to change the way tabs are slightly hidden on either side in the top bar

  • 1 reply
  • 1 has this problem
  • 2 views
  • Last reply by rosalynn

rosalynn
rosalynn
more options

Hello,

I've shown a picture because its difficult to describe. I would like to change the way the tabs are slightly hidden. If you reveal it on one side, it does it on the other side no matter how many tabs I have open.

This is my current userChrome.css file if it helps. 

/* Should be put at 
 *  `$FIREFOX_PROFILE/chrome/userChrome.css`
 * e.g.:
 *  `/Users/tordjohanespe/Library/Application%20Support/Firefox/Profiles/l2hbvytn.dev-edition-default-1510516302187/chrome/userChrome.css`
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
@-moz-document url(chrome://browser/content/browser.xul) {
#TabsToolbar { 
  margin-top: -3px !important;
  margin-bottom: -2px !important 
}
#nav-bar {
  height: 36px !important;
  box-shadow: 0 0 2px #bbb !important;
}
.titlebar-placeholder { width: 10px !important; border: 0 !important; }
.tabs-newtab-button { margin-left: 10px !important; }
tab { 
  margin-right: -15px !important;
}
tab:after { display: none !important; }
tab:before { border: none!important; }
#titlebar-buttonbox { margin-top: -5px; }
tab>.tab-stack>.tab-background { 
  background: #eee !important;
  border-width: 1px 1px 0 1px !important;
  border-style: solid !important;
  border-color: #aaa !important;
  border-radius: 4px;
  margin: 0 10px 0 !important;
  -moz-transform: perspective(100px) rotateX(30deg);
  box-shadow: 0 -2px 3px #bbb;
}
tab:hover>.tab-stack>.tab-background {
  background: #e3e3e3 !important;
}
.tab-content { padding: 0 19px !important; }
.tab-label-container { font-size: 12px !important; }
tab[selected="true"]>.tab-stack>.tab-background { background: #f5f6f7 !important; }
/* This will make the blue bar on the top of the active tab go away, but it also makes the tab higher. Uncomment if desired. */
/* tab[selected="true"] { margin-top: -4px !important; } */

.tab-line[selected="true"] {
  opacity: 0 !important;
}
Hello, I've shown a picture because its difficult to describe. I would like to change the way the tabs are slightly hidden. If you reveal it on one side, it does it on the other side no matter how many tabs I have open. This is my current userChrome.css file if it helps. <pre><nowiki>/* Should be put at * `$FIREFOX_PROFILE/chrome/userChrome.css` * e.g.: * `/Users/tordjohanespe/Library/Application%20Support/Firefox/Profiles/l2hbvytn.dev-edition-default-1510516302187/chrome/userChrome.css` */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ @-moz-document url(chrome://browser/content/browser.xul) { #TabsToolbar { margin-top: -3px !important; margin-bottom: -2px !important } #nav-bar { height: 36px !important; box-shadow: 0 0 2px #bbb !important; } .titlebar-placeholder { width: 10px !important; border: 0 !important; } .tabs-newtab-button { margin-left: 10px !important; } tab { margin-right: -15px !important; } tab:after { display: none !important; } tab:before { border: none!important; } #titlebar-buttonbox { margin-top: -5px; } tab>.tab-stack>.tab-background { background: #eee !important; border-width: 1px 1px 0 1px !important; border-style: solid !important; border-color: #aaa !important; border-radius: 4px; margin: 0 10px 0 !important; -moz-transform: perspective(100px) rotateX(30deg); box-shadow: 0 -2px 3px #bbb; } tab:hover>.tab-stack>.tab-background { background: #e3e3e3 !important; } .tab-content { padding: 0 19px !important; } .tab-label-container { font-size: 12px !important; } tab[selected="true"]>.tab-stack>.tab-background { background: #f5f6f7 !important; } /* This will make the blue bar on the top of the active tab go away, but it also makes the tab higher. Uncomment if desired. */ /* tab[selected="true"] { margin-top: -4px !important; } */ .tab-line[selected="true"] { opacity: 0 !important; }</nowiki></pre>

Modified by cor-el

All Replies (1)

rosalynn
rosalynn Question owner
more options

The picture didnt post, here it is.