A close button on the left of each tab
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.
- Stylish: https://addons.mozilla.org/firefox/addon/stylish/
- userChrome.css: http://kb.mozillazine.org/UserChrome.css
All Replies (3)
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.
- Stylish: https://addons.mozilla.org/firefox/addon/stylish/
- userChrome.css: http://kb.mozillazine.org/UserChrome.css
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
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