userstyles.org - Firefox Combine Tab Icon and Tab Close Button

For Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

This style adds the following features:

1) Moves the "x"(tab close button) to the left of the tab.
2) Keeps the tab favicon on the left side of the tab and only makes "x"(tab close button) appear when you hover over the tab with your mouse cursor(otherwise "x"(tab close button) would be hidden under the tab favicon).

***!Important!***(If you experience style incompatibility with [Ext] Tab Mix Plus just make sure TMP Options settings: Display > Tab > Show on Tab, "Close tab button" -> "on all" and "Place on left side" is selected)

Tested on Firefox 3.6+ and up to the latest Firefox Beta, Aurora, Nightly builds.

Modified code from Userstyles:

GrApple themes – combined tab icon & close button

Firefox 4, tab close button/favicon reversed (Mac)

To customize or fix Firefox Beta, Aurora, and Nightly builds, you can also have a look at my other styles: rob64rock

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

Firefox Combine Tab Icon and Tab Close Button
61655
43992
browser
Advertisement
Author rob64rock
License CC BY-SA
Created Feb 10, 2011
Updated Sep 13, 2011
Installs (this week) 5
Installs (total) 2,749
Show CSS

Notes

Updated 09-13-2011
Did some CSS code cleanup and fixed some issues with [Ext] Tab Mix Plus Lock, Protect, Auto Reload Icons on Tabs and the issue of the 'Close Tab button' not always appearing when tab is hovered.(Configuring [Ext] Tab Mix Plus settings may not be required for TMP to be compatible with this style anymore.)

Updated 02-12-2011
Updated to fixed some problems with APP Tabs(Pinned tabs) and Tab Mix Plus extension and the Tab throbber and Tab title text.

***!Important!***
This style isn't compatible with extensions:
"Progress Bar on Tab"
"Informational Tab"
"Tree Style Tab"

***!Important!***
Under Mac OS X, the tab text may move on hover, if so try changing the 3px into 0px on this part of code:

/* display close tab button on tab hover */
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
visibility: visible !important; margin-right:3px !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: -moz-box !important; margin-right:3px !important;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button.always-left {
display: -moz-box !important; margin-right:3px !important;
}

Feedback

Discussions

Ask a new question or add a review for this style.