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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

Make tab divider more prominent

  • 2 antwoorde
  • 2 hierdie probleem
  • 1 view
  • Laaste antwoord deur 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)

Gewysig op deur cor-el