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

Make tab divider more prominent

  • 2 replies
  • 2 have this problem
  • 2 views
  • Last reply by cor-el

more options

I am trying to make the verticle divider in between tabs more apparent. What would I add to my userchrome.css to achieve this? Im not sure if the vertical line is an actual element or the space between 2 tabs. Thanks

I am trying to make the verticle divider in between tabs more apparent. What would I add to my userchrome.css to achieve this? Im not sure if the vertical line is an actual element or the space between 2 tabs. Thanks

All Replies (2)

more options

My guess is that line is an image...

I have to admit I haven't researched it recently, but i wanted to mention a site to search for possible existing style rules. I posted one to restore a tab appearance for background tabs:

https://userstyles.org/styles/100627/outline-background-tabs-firefox-29-australis

(I use Stylish, but userChrome.css is the same principle, just click Show CSS to find the code.)

If you don't find a suitable style rule on that site, a volunteer might be able to create a custom one for you.

more options

A lot of styling tabs on the Tab is done via ::before and ::after rules as you can check in the browser.css file (line 2405).

  • chrome://browser/skin/browser.css

See also line 2702 :

/* Background tab separators (3px wide).
   Also show separators beside the selected tab when dragging it. */
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  -moz-margin-start: -1.5px;
  -moz-margin-end: -1.5px;
  background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
  background-position: left bottom 1px;
  background-repeat: no-repeat;
  background-size: 3px 100%;
  content: "";
  display: -moz-box;
  width: 3px;
}

You can also look at the code used by the Classic Theme Restorer extension (XPI is ZIP).


(http://forums.mozillazine.org/viewtopic.php?f=38&t=2929319)

Modified by cor-el