Close Tab button on the left side of tab

[lousie]

Hello

Is there any chance to place 'close tab button' on the left side (Mac style) without installing any extensions?

I tried to edit userchrome.css but I haven't succeded.

Any idea?

[Guest]

Yeah, I'd like that, too!

Or failing that, we can wait for what I assume will be forthcoming-- updates to the extensions that do that!

[Guest]

userChrome.css:

Code: Select all

.tab-image-middle, .tab-image-right {
  -moz-box-ordinal-group: 2 !important;
}

.tab-image-middle {
  padding-left: .5em !important;
}

Make sure the file is named "userChrome.css"- mind the capital 'C'- and that it is in the correct location:
http://kb.mozillazine.org/UserChrome.css

If you're using a theme other than the default and the above CSS isn't working, post the theme title.

[lousie]

Thx for your reply.

I'm using the latest nightly build. It comes with a native Mac OS X theme.

Your code works, but only for the tab which is highlighted after FF restart. When I click on another tab, then button is back on the right side.

[Dartman]

I'll move you to the forum where test builds are discussed.

[Orphu of Io]

I'm not on a Mac but maybe it will work the same:

Code: Select all

.tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
}

.tab-text {
  -moz-box-ordinal-group: 3 !important;
}

.tab-close-button {
  margin-left: .5em !important;
}

The previous CSS I posted was for Firefox 2.

[BostonPeng]

Stylish has the ability to do this if I remember right. I know I used a Stylish script to move the close tab buttons back to the right after a theme moved it to the left.

[lousie]

I'm not on a Mac but maybe it will work the same:

Code: Select all

.tab-icon-image {
  -moz-box-ordinal-group: 2 !important;
}

.tab-text {
  -moz-box-ordinal-group: 3 !important;
}

.tab-close-button {
  margin-left: .5em !important;
}

The previous CSS I posted was for Firefox 2.

Now it looks like this:

[Orphu of Io]

That's weird. I guess the original CSS I posted was closer for Mac on the latest nightly. With the original CSS, I get the same result as you when I only have the close button on active tabs. This might work, if not, we'll have to wait for a mac user to help.

Code: Select all

.tab-image-middle, .tab-image-right {
  -moz-box-ordinal-group: 2 !important;
}

.tab-image-middle {
  padding-left: .5em !important;
}

.tab-close-button {
  display: -moz-box !important;
  visibility: collapse !important;
}

tab[selected="true"] .tab-close-button {
    visibility: visible !important;
}

[lousie]

That's weird. I guess the original CSS I posted was closer for Mac on the latest nightly. With the original CSS, I get the same result as you when I only have the close button on active tabs. This might work, if not, we'll have to wait for a mac user to help.

Code: Select all

.tab-image-middle, .tab-image-right {
  -moz-box-ordinal-group: 2 !important;
}

.tab-image-middle {
  padding-left: .5em !important;
}

.tab-close-button {
  display: -moz-box !important;
  visibility: collapse !important;
}

tab[selected="true"] .tab-close-button {
    visibility: visible !important;
}

Works perfect now

Thanks a lot!

[Orphu of Io]

Great! I'm surprised though, lol.

Edit: I should mention that if you decide to display a close button on all tabs via browser.tabs.closeButtons, you'll need to remove the last two rules:

Code: Select all

.tab-close-button {
  display: -moz-box !important;
  visibility: collapse !important;
}

tab[selected="true"] .tab-close-button {
    visibility: visible !important;
}

[Louise6380]

That's weird. I guess the original CSS I posted was closer for Mac on the latest nightly. With the original CSS, I get the same result as you when I only have the close button on active tabs. This might work, if not, we'll have to wait for a mac user to help.

Code: Select all

.tab-image-middle, .tab-image-right {
  -moz-box-ordinal-group: 2 !important;
}

.tab-image-middle {
  padding-left: .5em !important;
}

.tab-close-button {
  display: -moz-box !important;
  visibility: collapse !important;
}

tab[selected="true"] .tab-close-button {
    visibility: visible !important;
}

This is great!
how can I make the tab bar more Safari like?
I would like the tab bar to have no favicons and throbber on the right, could that also be done with userChrome.css?

[Egidio]

Is there any chance to place 'close tab button' on the left side (Mac style) without installing any extensions?

Though I really like the default theme in FF 3RC1, I really dislike the close button on the right side of the tab. It makes no sense to me why they did that. Having the button on the left-hand side makes it easier to close tabs no matter how large the tabs are. The close button will always be there on the left. So, once you close one tab, the others can be closed by just clicking your mouse -- no need to move it to find the close button.

Anyway, to have your close button on the left, just install the theme GrApple. There are 5 variations -- and all with the close button on the left. They are compatible with FF 3RC1.


.

[alterna]

I would like the tab bar to have no favicons

/* hide all tab favicons 3.0 */
.tabbrowser-tab > .tab-icon-image { display: none !important; }

userChrome.css

[Louise6380]

I would like the tab bar to have no favicons

/* hide all tab favicons 3.0 */
.tabbrowser-tab > .tab-icon-image { display: none !important; }

userChrome.css

thanks