Important Notice: We're experiencing email notification issues. If you've posted a question in the community forums recently, please check your profile manually for responses while we're working to fix this.

On Monday the 3rd of March, around 5pm UTC (9am PT) users may experience a brief period of downtime while one of our underlying services is under maintenance.

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
  • 2
  • 1 view
  • Nzaghachi ikpeazụ nke 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)

Edeziri site na cor-el