31/03/05

Safari tabs for Firefox updated

When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.

Safari style tabs for Firefox - with close buttons

There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:

/* Tab X mods <strong>/
/</strong> ------------------------------------------------------- <strong>/
	

.tabs-closebutton-box { /</strong> hides the tab bar close button */ display: none !important; }

Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:

.tabs-closebutton {
padding-bottom: 0 !important;
 }
Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:
.tab-icon {
padding-top: 0px !important;
width: 16px;
height: 16px;
}

If you want a true Safari tab-look with no favicons, use this instead:

.tab-icon {
    display: none !important;
}

I’ve updated the original download package with these small changes, so let me know if you have any problems.

Technorati TagsTags: , , , ,

Comments | RSS

#1

Matthias said 1142 days ago:

Hi

Your Blog is so great! Congratulations. Fantastic layout and design!

Dancing With Tears In My Eyes

Matthias
#2

Ollie said 1142 days ago:

I’ve always noticed one thing wrong with the Firefox tabs (on OS X) that I’ve tried to fix, but couldn’t. Basically, if you see in your screenshot, the tab “The pref to always show…” has a weird seperator line, like its raised by 1px and it has a white 1px white glow. Any way to just have a straight line that extends from the top to the bottom?
#3

Rob McMichael said 1142 days ago:

Looks greate with GrApple (brushed) theme.
Isn’t this more of a pimp my safari post?
Thanks Jon.
#4

Scott Boms said 1142 days ago:

Great. You fixed the little bits that were bothering me about the extension. It would be great to get them included in the actual xpi package, but this works for now anyway.
#5

Jon Hicks said 1142 days ago:

“Isn’t this more of a pimp my safari post?” – Not really no.

Ollie – I see what you mean. Does that still happen when the safari tabs hack isn’t installed?
#6

Chris McElligott said 1142 days ago:

I’m prety much running the exact tab setup as you through Firefox, although Safari 2.0 is tiger is too pefect :)
#7

Rob McMichael said 1142 days ago:

Yep, silly me.
*must stop doing two things at once
#8

Jon Hicks said 1142 days ago:

Ha! No worries Rob.
#9

neil said 1142 days ago:

Sweet. The tab icon thing was driving me nuts, and I keep forgetting that Firefox’s chrome is tweakable. Thanks!

One question, though – how did you get your tab width down to 120px? Mine are stuck at 200pxs no matter what I have in my userChrome.css. Replacing with your style doesn’t work, either.

Are you using any other tab extensions to accomplish this?
#10

Jon Hicks said 1142 days ago:

No I haven’t solved that one either. It was just a small window in the screenshot.

Bugger, OK, so maybe not the last missing element…
#11

Rob McMichael said 1142 days ago:

To apologise for my insolence I though you may like this I found:
Firefox Protection
#12

Travholt said 1142 days ago:

Great tip, thanks! I just did this on Mozilla (well, not the Safari style tabs, but the Tab X Mac version. I’ve tried the TabBrowser Extensions, but they’re way too bloated. I would like a way to rearrange the tabs, though …

Also, I noticed another problem: I get the standard bookmark icon on top of the favicons. Do you know how to fix that?
#13

John Tumbleson said 1142 days ago:

I have never hacked anything before but thought I might try my unwashed hand at this one since I enjoy Firefox, but not the tab interface. I can’t seem to get it to work. I have put all the files into the “Chrome” folder, including the “tabxmac.xpi” file, but still no joy.

Would love some advice
#14

Jon Hicks said 1142 days ago:

Travolt – you need the ‘Mini T’ extension for reordering tabs. I’ve not had the bookmark icon appearing on top of the favicon though. Do you have any other themes/extensions installed?

John – First of all, are you on a mac? Its worth checking as this is mac only. Secondly, you need to install the tabxmac.xpi file, not put it in your chrome folder. Drag and drop it on a Firefox window, and it should come up with a dialog asking if you want to install it. Then just restart Firefox.
#15

John Tumbleson said 1142 days ago:

Thanks Jon,

Yes, I am on a Mac and it worked! Too simple to be believed.

Thanks again.
#16

RB said 1142 days ago:

Why???

This is one of the worst design flaws in Safari. It is illogical and serves no good purpose. In fact, it fails to implement what it is described as being.

Why not hack Safari to make it look like a real browser?
#17

Scott Johnson said 1142 days ago:

Jon,

Those tabs look great! I have been using Firefox for quite some time now, but I just switched my laptop to a Mac a couple of months ago. I never minded the default tabs in Firefox on XP, but for some reason, they really bug me on my iBook. This should be the fix I’m looking for. Thanks!
#18

Todd Plants said 1142 days ago:

1) What theme do you use? Would it look cool on my XP box at work? I think so..

2) Can I replicate the OS X style close buttons on XP? The default buttons on TabX are ug-lee!
#19

Joshua Bereiter said 1141 days ago:

RB: For some of us it’s nice to be able to close a tab without having to activate it. You don’t have to bring an application window forward to hit its close button, why should a tabbed window be different?
#20

Jon Hicks said 1141 days ago:

RB – I have no idea what your problem is with Safari’s tabs. Could you explain further?
#21

Simon Pritchard said 1141 days ago:

Does anyone know of a version that works for us poor PC prisoners? I have a great MS Visual theme by KoL that recreates the OS X graphite look and feel coupled with Object Dock it makes the expierence “Almost Pleasant”... Decent tabs in Firfox would be a fantastic bonus!
#22

Arvid Warnecke said 1141 days ago:

Great stuff. I really like the look of the tabs and would like to have the pinstripe theme, too. Searching for it brought me to the creators website, where he just mentions the Mozilla browser and that it won’t work with the newest versions. Does it just not work for Firefox in general or is it my 1.0.2 build?
Now I installed the GrApple theme – great, too. But the Google Search Button is kinda bubble, which bothers me much. Is that with the pinstripe theme, too?
#23

Jeffrey J. Hoover said 1141 days ago:

Absolutely! But it still isn’t as easy to use for my workflow. See my recent 17-Mar blog post about why I haven’t switched.
#24

Jordan said 1141 days ago:

I really wish Windows Firefox had the pseudo-elements for right and left images on tabs. No idea why you Mac people get it and we don’t. Anyhow, this looks good. Let’s just hope it’s compatible with this nightly I’m using…
#25

Bodoggy said 1141 days ago:

Thanks to you and Kevin for helping make Firefox on the Mac a more pleasurable experience.
#26

Chris McElligott said 1141 days ago:

Wow my previous comment makes no sense at all.
#27

Matt Elmore said 1141 days ago:

Awesome Jon! Thanks so much. Looking great here.

Check it out
#28

Arvid Warnecke said 1141 days ago:

Jon, I saw, that you have a reaload- and a stop-button in the shot above. Here is an extension that combines them, like it is done in Safari: http://v2studio.com/k/moz/
Maybe you like that?
#29

Jay Harris said 1141 days ago:

Arvid, that’s a really useful link. The button works flawlessly in the “Brushed” theme and behaves identically to Safari’s own single button. This is a must have extension for those who crave the Safari interface on Firefox.
#30

Jon Hicks said 1141 days ago:

Yes thanks Arvid – works fine with the default theme too. What a find!
#31

Joshua Bereiter said 1141 days ago:

I’m trying to figure out how to get the (X) on the left side of the tab, like Safari. Anyone know how this might be done?
#32

Martin Alderson said 1140 days ago:

This is fantastic! Thanks for letting me know about this.

I’m still amazed at how easy it is to edit Firefox’s CSS files to create a whole new browser.
#33

Rad said 1140 days ago:

Awesome mod, Cheers Jon!
#34

Joshua Heyer said 1139 days ago:

For some reason I’m not able to install the TabX extension. Firefox wants to download it instead of install it. So I download it. Then I try to run it from my desktop and it trys to open OS9. Anyone else have this problem? How do you fix it?
#35

Mundo Aloga said 1139 days ago:

I like it
#36

Jay Harris said 1137 days ago:

Joshua, all you have to do is download the extension as you’ve already done, then drop it onto a Firefox browser window and voila! it’s installed ;-)
#37

James said 1137 days ago:

On a pc,the ‘X’ in the tabs in Mozilla is way to big!!! I keep clicking on it by mistake when aiming for the page title…. :-(

Think I’m going to buy a Mac next time I get a computer!
#38

Brutal said 1137 days ago:

how come these don’t work in the windows-version of Firefox??
#39

Joshua Heyer said 1137 days ago:

Thanks Jay! That was the first time I’ve installed an extension that way. Now I know for next time. ;)
#40

Josh Hughes said 1136 days ago:

I’m trying to figure out how to get the (X) on the left side of the tab, like Safari. Anyone know how this might be done?

I hacked together something that seems to work well enough:

.tab-image-middle {
display: block !important;
position: relative !important;
overflow: hidden !important;
}

.tab-text {
display: block !important;
position: absolute !important;
top: 0px !important;
left: 20px !important;
text-align: left !important;
overflow: hidden !important;
}

.tabs-closebutton, .tabx-tab-close-button {
position: absolute !important;
top: 2px !important;
left: 0px !important;
}

.tab-icon { /* No favicons here */
display: none !important;
}

A Screenshot
#41

Joshua Bereiter said 1135 days ago:

Nice, Mr. Hughs, but it borks the sidebar close button for me. I changed it thusly:

@tabbrowser .tabs-closebutton, tabbrowser .tabx-tab-close-button {
position: absolute !important;
top: 2px !important;
left: 0px !important;
}@

Works beautifully now.
#42

James G. said 1135 days ago:

While Mr. Bereiter and Mr. Hughes’ solutions work great on the 1.0.2 release, I can’t seem to get them to work on the nightlies. For whatever reason, I can’t get the .tabs-closebutton selections to move to the left of the text, no matter how hard I shake my fist at them.
#43

Angela Wilson said 1133 days ago:

Oh YAY!!!! It looks really good.
#44

G. I. said 1132 days ago:

I think it looks stupid that that the tabs are upside down. The tab is naturally on the top of the document/page, so why to make them hanging from the top? Another useless Apple UI gimmick.
#45

Gab said 1131 days ago:

Thank a lot.
But now, dropping url text or a favicon onto a existing tab is not accepted, but makes a new tab.
#46

alf said 1130 days ago:

Joshua Bereiter’s version works for me in the 1.0.3RC, but is there any way to get the text centered in the tab rather than left-aligned?
#47

Jay said 1125 days ago:

A little help here. Where should I put the folder with all the files?
#48

Max Glenister said 1124 days ago:

hi jon, i thought you may want to know that your safari style tabs do work on the windows version of firefox, with a port of the osx firefox classic theme

http://www.moglenstar.net/saftabs/safari-stylefull.jpg
#49

droo said 1121 days ago:

thank you thank you thank you!

hey alf, i did this to get the tab text centered. seems to work…

.tab-text {
display: block !important;
position: absolute !important;
top: 0px !important;
left: 11px !important;
width: 90% !important;
text-align: center !important;
overflow: hidden !important;
}
#50

John said 1121 days ago:

This obviously isn’t it:

http://kmgerich.com/pinstripe/install.html

Where can I find the theme shown here?

http://hicksdesign.co.uk/images/txp/104.gif

Note: not the tabs part, I’ve got that. I mean the toolbar buttons and so on.

Commenting is closed for this article.

Elsewhere

The Rissington Podcast - weekly shenanigans with Jon Oxton

Hicksmade - unique handmade goods by Leigh Hicks width=

love

Brit Pack: A proud member I love Omniweb Coda Segment Publishing I buy my type from Veer The Forgiveness Project