We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

ابحث في الدعم

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

How to change tab shapes in Firefox 29.0.1?

more options

I'm using the "Vertical Tabs" addon (https://addons.mozilla.org/en-US/firefox/addon/vertical-tabs/) and the new update has made the tabs look ridiculous. I don't need the underlying backdrops. See here for a comparison between the new (left side) and the old version I want (center, popup): https://i.imgur.com/hh7jcTD.png

You can sort of see a rectangle behind the selected one, which shows the addon is still trying to work. How do I get rid of the extra graphic? Thanks.

I'm using the "Vertical Tabs" addon (https://addons.mozilla.org/en-US/firefox/addon/vertical-tabs/) and the new update has made the tabs look ridiculous. I don't need the underlying backdrops. See here for a comparison between the new (left side) and the old version I want (center, popup): https://i.imgur.com/hh7jcTD.png You can sort of see a rectangle behind the selected one, which shows the addon is still trying to work. How do I get rid of the extra graphic? Thanks.

Modified by QuickTactical

All Replies (2)

more options

You can use a custom style rule to strip away the bits and pieces of the rounded tab background and allow whatever is behind there to show through. I haven't actually installed the Vertical Tabs extension, so I haven't tested whether this covers it completely, but it should get you started.

I generally use the Stylish extension to apply custom style rules to the UI. Its Preview button is very handy for tweaking and adjusting. From the menu, use "Write new style > Blank style" and then paste the following into the main composing area and click Preview to check it:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* Suppress background color and images on active tab */
.tab-background-start[selected=true]:not(:-moz-lwtheme)::before,
.tab-background-start[selected=true]:not(:-moz-lwtheme)::after,
.tab-background-middle[selected=true]:not(:-moz-lwtheme),
.tab-background-end[selected=true]:not(:-moz-lwtheme)::before,
.tab-background-end[selected=true]:not(:-moz-lwtheme)::after {
    background-image: none !important;
    background-color: transparent !important;
}

If you can't install any more extensions, the rule also can be added to a userChrome.css file. However, in the interest of time (got to go...), I am not detailing that approach.

more options

Screen shot of the effect on the regular tab bar.