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

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

  • 1 cavab
  • 1 has this problem
  • 9 views
  • Last reply by 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)

more options

The picture didnt post, here it is.