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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Make tab divider more prominent

  • 2 uphendule
  • 2 zinale nkinga
  • 1 view
  • Igcine ukuphendulwa ngu 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)

Okulungisiwe ngu cor-el