Make tab divider more prominent
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)
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.
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