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

A close button on the left of each tab

more options

I prefer the button on the left of each tab – as shown in the two tabs in the screenshot at https://files.gitter.im/gitterHQ/gitter/1qgz/learn.png

How can I achieve that, without an add-on?

I previously used Classic Theme Restorer, the relevant preference was probably `extensions.classicthemerestorer.closeonleft`

Chosen solution

I don't think there is any built-in setting for that.

Many aspects of the interface can be modified using a custom style rule. This is based on an old mozillaZine post. I updated it for the Firefox 53 layout on Windows 7, which hopefully does not diverge too much from yours.

.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-icon-image,
.tabbrowser-tab .tab-sharing-icon-overlay,
.tabbrowser-tab .tab-icon-overlay,
.tabbrowser-tab .tab-label-container,
.tabbrowser-tab .tab-icon-sound {
  -moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab .tab-close-button {
  margin-left: -2px !important;
  margin-right: 2px !important;
}

Illustrative screen shot attached.

I tested that using the Stylish extension (new blank style > paste), but if you are not interested in another extension, it also can be applied using a userChrome.css file.

Read this answer in context 👍 1

All Replies (3)

more options

Chosen Solution

I don't think there is any built-in setting for that.

Many aspects of the interface can be modified using a custom style rule. This is based on an old mozillaZine post. I updated it for the Firefox 53 layout on Windows 7, which hopefully does not diverge too much from yours.

.tabbrowser-tab .tab-throbber,
.tabbrowser-tab .tab-icon-image,
.tabbrowser-tab .tab-sharing-icon-overlay,
.tabbrowser-tab .tab-icon-overlay,
.tabbrowser-tab .tab-label-container,
.tabbrowser-tab .tab-icon-sound {
  -moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab .tab-close-button {
  margin-left: -2px !important;
  margin-right: 2px !important;
}

Illustrative screen shot attached.

I tested that using the Stylish extension (new blank style > paste), but if you are not interested in another extension, it also can be applied using a userChrome.css file.

more options

Note that current Firefox releases support -moz-box-ordinal-group:0 and that makes it easier to move one element to the fare left by giving it this property.

why put the x next to the new tab button, why? https://support.mozilla.org/en-US/questions/1149605

.tabbrowser-tab .tab-close-button {
display:-moz-box!important;
-moz-box-ordinal-group:0!important;
margin-right:3px!important;
}

(you may want to add a margin-left property)

Modified by cor-el

more options

Thank you both!

Much better now, as shown in the first of the two shots with this post (2017-04-23 07-23.png).

Also, I took the opportunity to set a greater minimum width for tabs. At first I guessed, no narrower than is shown in the second shot (2017-04-23 07-28.png), then – better than guessing – in about:config, from before I disabled Classic Theme Restorer, I found:

extensions.classicthemerestorer.ctabmwidth 125 extensions.classicthemerestorer.ctabwidth 300

Ultimately I chose a minimum width of 175.

Stylish was already installed (visible in the shot that's linked from my opening post). I took the userChrome.css approach to get things as required, at a first computer, before aiming to apply things elsewhere.

Modified by Graham Perrin