X
Tap here to go to the mobile version of the site.

Support Forum

A close button on the left of each tab

Posted

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`

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
jscher2000
  • Top 10 Contributor
8569 solutions 70085 answers

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.

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 [http://forums.mozillazine.org/viewtopic.php?p=3277150 old mozillaZine post]. I updated it for the Firefox 53 layout on Windows 7, which hopefully does not diverge too much from yours. <pre>.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; }</pre> 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
cor-el
  • Top 10 Contributor
  • Moderator
17335 solutions 156738 answers

Helpful Reply

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)

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 <pre> .tabbrowser-tab .tab-close-button { display:-moz-box!important; -moz-box-ordinal-group:0!important; margin-right:3px!important; }</pre> (you may want to add a margin-left property)

Modified by cor-el

Question owner

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.

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 grahamperrin