The Hickensian

10.10.04 Safari style tabs for Firefox OS X

As a CSS designer, I’m really enjoying the ‘customisablity’ of Firefox with a language that I understand. I can’t program, but I can do CSS, which it uses to define the look of its interface.

Screenshot of the safari-esque tabs

Here’s another little mod for OS X* Firefox users. It emulates an aqua version of Safari’s upside down tabs. I personally love this style, and prefer the more compact size of them compared to Firefox’s default tabs (which are designed to emulate the window title bar).

All you need to is quit Firefox, download these files, and pop them into your Firefox profile’s chrome folder. (*Please note, this is designed to use the default pinstripe theme as its basis – it won’t work on windows – sorry!). If you’ve already made changes to your userChrome.css file, you’ll need to add the enclosed css rules in your file. Please let me know if you have any problems using this mod (there have been some issues for people using the Sage mods posted earlier).

Thanks to Kevin Gerich, who helped me solve the last hurdle in creating these – changing the text size. I’d never used the CSS property font: icon, before.

Comments | RSS

No.1

∞ John Oxton said 1948 days ago:

Punished once again for my PC usage :(
No.2

∞ Karim said 1948 days ago:

How can I make my firefox look like yours? I’ve downloaded your files, but it still doesn’t look like yours. Could you tell me all the files I need to download and where they have to be installed?

Thanks!
Karim
No.3

∞ Jon Hicks said 1948 days ago:

John – someone might have done a port of the pinstripe theme for windows – you never know ;o)

Karim – These files only change the tabs. See my earlier posts for changing Sage and the toolbar.
No.4

∞ Anonymous said 1948 days ago:

The tabs appear to be resized but I am not seeing the downward tabs. The userChrome.css doesn’t seem include any rules for the activetab PNGs.
No.5

∞ Jon Hicks said 1948 days ago:

Apologies, there was a missing set of rules in the userChrome.css file. Please download again – should be fine now.

Or just add this to the css file:

tab[selected=”true”] > .tab-image-right {
background: url(“activetab-right.png”) no-repeat !important;
}

tab[selected=”true”] > .tab-image-left {
background: url(“activetab-left.png”) no-repeat !important;
}

tab[selected=”true”] > .tab-image-middle {
background: url(“activetab-middle.png”) repeat-x !important;
}
No.6

∞ Tomas Jogin said 1948 days ago:

Thanks for prettying up my Firefox, Jon! I’m using your tabs and your toolbar modification. Looks great.
No.7

∞ Rune said 1948 days ago:

After all of my reading on your great site, i really think that my PC is a problem. I mean, all of your great tips etc. can mostly only fun on OS X. It is great, though – and i am looking forward to buy a mac in the future, but until then, i can (sadly) only read about the issues there should be about the great machine.

There really is something about it, when people are talking about the great advantages about the mac!
No.8

∞ Josh said 1947 days ago:

Jon,

Just wanted to say great job on this new Firefox mod. You have recently inspired me a lot to try new little tweaks and mods to my browsers on OS X. Keep up the great work!
No.9

∞ Philippe said 1947 days ago:

Jon, you have way too much time …:-)
That said, a minor improvement for those who have the Webdeveloper extension:

toolbar#webdeveloper-toolbar {
border-bottom-width: 0px !important;
background-image: url(pinstripe.png) !important;
background-repeat: repeat !important;
}

(and I changed the font-weight to normal, ‘cause the bold looks ugly with Japanese or other East-Asian page titles).
No.10

∞ Philippe said 1947 days ago:

PS – I can as well share this small improvement I made to the Personal Toolbar: replacing the default images for :hover and :active.

http://emps.l-c-n.com/misc/personalToolbar.tar.gz
No.11

∞ Jon Hicks said 1947 days ago:

“Jon, you have way too much time …:-)”

Actually, this didn’t take too long! Although I’ve been working on it on and off since April!

Thanks for the Webdeveloper changes – I’d forgotten about that. I tend to use the context menu, rather than the toolbar.
No.12

∞ patrick bennett said 1947 days ago:

As much as the resized tabs are cool, I feel as though the tabs pointing up (upside-down as you said) are just wrong looking. Shouldn’t a tab connect to the content which it’s showing? I never understood why Apple decided to make their tabs upside-down and have always liked the way that Firefox maintained a more intuitive interface. I have a hard enough time as it is trying to get non-powerusers to understand the concept of tabs in browsers holding web sites without them being upside-down.

Does this not bother any of you?
No.13

∞ Jon Hicks said 1947 days ago:

Patrick – Why not? I think the idea is that the tab is ‘connected’ to the location bar and browser controls, which makes equal sense to me. Its not everyone’s idea of tabs, but it certainly is mine. If it bothers you, don’t use this mod – simple as that.
No.14

∞ Brandon Williams said 1947 days ago:

Hey Jon,

This looks like a very nice mod to Firefox. Thanks! It’s always nice to see new browser tweaks and info on your website. :)

Does anyone know ANYTHING about the Aquafication release for OS X? I’m dying waiting for it, and I can’t dig up any info about its progress on mozilla.org or the mozillazine forums…. :-)
No.15

∞ Jon Hicks said 1947 days ago:

Brandon – I wish I knew. I don’t even know what they’re intending to do, apart from hooking up the icons for files in the download manager.
No.16

∞ ~bc said 1947 days ago:

Now, if only we could get close widgets on each tab. I found an extention once that did just that, but it had all sorts of bugs. If you found a stable one, I’d link it in. That’s my biggest gripe about FF tabs…
No.17

∞ Patrick Bennett said 1947 days ago:

Jon – I wasn’t trying to poopoo your mod. I love the fact that people are using Firefox and tweaking it fit their needs. I was more discussing the idea of tabs and what makes most sense.

Being that the majority of people checking out your site are probably some kind of web designer and probably a proponent of web standards, I thought you’d have something to say on the idea of upside-down tabs… more than just don’t use it.

Here’s a comment from before Safari even came out from iwalt.com

And another at the mozillazine weblog

This isn’t so much a matter of personal taste as it is of good UI implementation (something I’m sure you and your visitors deal with everyday designing sites). Hell, I use Safari all the time. Probably equal in time to Firefox. (Sorry, just don’t like Omniweb anymore.) I just keep feeling like the tabs point the wrong way from a standard UI point of view.
No.18

∞ Patrick Bennett said 1947 days ago:

oops, the links didn’t stick. Hmm. Here they are again:

http://www.iwalt.com/howto/fixsafaristabs/

http://weblogs.mozillazine.org/asa/archives/003118.html
No.19

∞ neolyn said 1947 days ago:

Verrrry nice. ;)
No.20

∞ Aronnax said 1947 days ago:

I have a new version of my
Firefox (Classic) theme.

http://aronnax.ar.funpic.de/

include: – the Pinstripe 0.8 icons – a new Tab design – a new Searchbar design – webdeveloper extension design hacks – the new Live Bookmarks icon

Thanks to Kevin Gerich, Stephen Horlander and Jon Hicks
No.21

∞ Jon Hicks said 1947 days ago:

Patrick – I know that there is a whole raft of people who find this UI unintuitive, and all for very good reasons. I’ve seen these comments/arguments before.

The fact is, those reasons don’t affect me personally, and I enjoy something that looks a little different to the rest of the crowd. Thank goodness for the Safari’s and Omniweb’s of the world that don’t just do something because ‘thats the way its always been done’.

I don’t find myself being confused as to which tab I need to click, or which one is the active tab – so why not? I think it is a matter of personal taste. Others find it unintuitive, I find it intuitive. Thats it really!
No.22

∞ Josh Renaud said 1947 days ago:

When I saw the headline of your entry, I thought you had figured out a way to put the close circle within each individual tab, as it is in Safari. As one user already said, this is a modification I would love to use if it exists.

That being said, I don’t personally care if the tabs point up or down, but I like the way you’ve reduced their width. Nice work!
No.23

∞ Jon Hicks said 1947 days ago:

BC/Josh – Yeah, Tabbrowser Extensions (TBE) will add the close button, but this currently breaking the Preview Release. There is another one called something like Tab X, but this doesn’t work on OS X full stop. Once v1.0 is out there should be a stable version of TBE available, and that will solve the problem!
No.24

∞ jheyer said 1947 days ago:

Great “Mod” Jon. It looks great in the image above but I’m probably the only one who’s having a problem with it. The changes aren’t showing up. I’m not sure why. I’ve copied the files to my Firefox Profile’s chrome folder. Tried opening Firefox and no change.

I did mess around with Sage a bit but I’m not even seeing that stuff right now. I did search for all “chrome” folders and I think I’m using the correct one. Can you offer a suggestion or two?
No.25

∞ Neil said 1946 days ago:

So beautiful and tasty.

One question, though – is there any way to force the width of the tabs to be smaller? I’ve always found the default width of Firefox’s tabs to be way too large… and editing the max-width attributes in the chrome CSS doesn’t seem to do anything.

Thanks, Jon!
No.26

∞ Jon Hicks said 1946 days ago:

Neil – I haven’t been able to find a way with CSS. Tabbrowser extensions let you set the width, but that breaks Firefox on OS X at the moment!

Safari’s are 177 pixels wide by default, while Firefox’s are about 250px. Let me know if you find a way.
No.27

∞ Tim McElwee said 1946 days ago:

I really like this mod. I made a few tweeks to allow the bottom border on the Personal and Webdeveloper toolbars when the tab bar is hidden, but maintain the unbroken look for two or more tabs.

Add the below to tab

tab {
position:relative;
height: 21px !important;
margin-top: -1px !important;
...
}

Change to the below or remove border-bottom-width from both rules.
#PersonalToolbar {
border-bottom-width: 1px !important;
...
}
toolbar#webdeveloper-toolbar {
border-bottom-width: 1px !important;
...
}
No.28

∞ jheyer said 1946 days ago:

Thanks Jon for helping me fix my problems with it. Looks beautiful! I’m so glad to be rid of those default tabs. I can’t wait until the tabBrowser extension gets fixed. Then it will feel more like Safari which I like. But Safari doesn’t have all the sweet extension that firefox has. And when the “aquafication” happens I’ll probably be using Firefox full time.

Thanks again!
No.29

∞ russ said 1945 days ago:

Jon,

Can we get the cool button set too?

:)
No.30

∞ Musti said 1945 days ago:

Beautiful. When combined with ‘Close Tab on Double-click’ extension, even more beautiful. Thanks a bunch!
No.31

∞ nick said 1945 days ago:

I love the idea of it, and am trying to use it, but it doesn’t seem to be working. I’m using 1.0PR with the standard theme, could that be the problem?
No.32

∞ Jon Hicks said 1945 days ago:

Nick – please give me more to go on. You’re on OS X I take it? Have you restarted Firefox? Its designed to work with the default theme on 1.0PR, so thats not the problem. Describe what you did to install it.
No.33

∞ Andy Young said 1945 days ago:

It looks absolutely stunning. Kudos.
No.34

∞ russ said 1945 days ago:

Jon,

Is it just the tabs or is the button set in there too…if so its not working for me either.

Russ
No.35

∞ Jon Hicks said 1945 days ago:

Russ -this is just the tabs. For the toolbar icons “see comment #4 here”. Everyone who has experienced problems here have all been sorted now.
No.36

∞ russ said 1945 days ago:

Jon,

This is comment #4
“The tabs appear to be resized but I am not seeing the downward tabs. The userChrome.css doesn’t seem include any rules for the activetab PNGs.”

I dont see anything about the icons in that :(

Thanks
No.37

∞ Jon Hicks said 1944 days ago:

Whoops! Sorry Russ, that should’ve been a link, but it didn’t work! Try this:

http://www.hicksdesign.co.uk/journal/588/sage-on-os-x

and look for comment 4
No.38

∞ Jenna said 1944 days ago:

Fabulous, Jon! Thanks for the great mod. :)
No.39

∞ Rafael Apocalypse said 1943 days ago:

what a F***, until I get my Mac, I’ll to live withou those beauties… An OS X Jaguar, the Aqua Style, and the most stable plataform….
But I hope to buy a Mac soon…
No.40

∞ Robert Bousquet said 1943 days ago:

Thanks a lot!
No.41

∞ Rex said 1938 days ago:

Hi Jon,

First… Fantastic work on the alterations to Firefox. You turned me on to Sage w/Firefox combo on my PC and Mac.

The Sage alteration really helped spice things up. :)

Is there some instruction and buttons you can package so we can have the great looking buttons for Check Feeds and Discover Feeds that you have? My icons in Sage (top of the side-bar) are very unattractive compared to the refresh and plus buttons you have.

Sorry for posting this here, but the Sage thread was closed.
No.42

∞ TwisterMc said 1937 days ago:

Wow. Thanks for this. I’m loving all the firefox tweaks I can do!
No.43

∞ Lenny Cooper said 1933 days ago:

Ummm… This looks like a very beautiful mod to firefox… Thanks. :-)
No.44

∞ Nathan Olsen said 1933 days ago:

Neat trick. I like it. However, I don’t like the fact that there isn’t a rule line between the bookmark toolbar and the main window unless a tab is active. The rule line should always be there.
No.45

∞ Jon Hicks said 1932 days ago:

Nathan – I think you would only use this if you have ‘always show tab bar’ option selected. There’s no way you can choose to have the line when there are tabs, and not when there isn’t.
No.46

∞ matt faulds said 1932 days ago:

Hi

This is a great mod – thanks. Looks smooth. I’d love to see close buttons on each tab too. I’ve just discovered Firefox – it’s got the speed edge on Safari.
No.47

∞ Stephan Segraves said 1932 days ago:

Jon,

I am using the default theme on Firefox 1.0PR on OS X but the theme isn’t Pinstripe, it’s the new one. Does that mean that I cannot use this “plugin”?
No.48

∞ Jon Hicks said 1932 days ago:

Stephen – its still called pinstripe, and yes it should work fine, as that’s what I’m on.
No.49

∞ matt faulds said 1931 days ago:

Minor point but just noticed that if I have 6 tabs open the far right tab has a vertical line on its right hand side, similar to the separator line between tabs. Is that tweekable? (Firefox 1.0PR, OS X)
No.50

∞ Nathan Olsen said 1931 days ago:

Hey Jon,

I’m not sure you understood what I meant. Using the default theme in v1.0PR, there is a dark grey rule line between the bookmark toolbar and the main window. There is a similar rule line between the navigation toolbar and the bookmark toolbar. When I installed your tabs, the rule line between the bookmark toolbar and the main window disappeared, showing only when tabs were active (i.e., several pages were opened at the same time). It looks funny to have the light-grey toolbar next to the white of the main window without any separation. Maybe it’s just me.
No.51

∞ Stephan Segraves said 1931 days ago:

Jon,

I still am not getting the results that I see on your screenshot. I get something like:

Again this is just on v1.0PR. I put all of the files in the chrome folder in the Firefox directory.
No.52

∞ Stephan Segraves said 1931 days ago:

Well, the image didn’t work so this is what it looks like: http://badice.com/images/osxtabs.jpg
No.53

∞ Jon Hicks said 1931 days ago:

Nathan – I didn’t misunderstand you at all. As I said, this mod only really works if you have the tabbar showing all the time. You can’t set the css to add the rule back when there are no tabs. The rule you see when there are tabs is part of the tab bar background image. If you can live with having a rule between the bookmarks toolbar and the tabs just remove this line from the CSS:

#PersonalToolbar {
.....
border-bottom-width: 0px !important;
}

Just delete the border style.

Stephen – have you had previous versions of Firefox installed? Make sure that you are adding the mods to the username>Library>Application Support>Firefox folder, not username>Library>Firefox, or even username>Library>Phoenix folder.

Matt – I think I know what you mean, and that was an issue for me before I modifed the tabs. I just live with it.
No.54

∞ Peter da Silva said 1930 days ago:

Oh yes, thank you thank you thank you, I’m so tired of the rolling Commodore-64 corners on the normal Firefox tabs. I don’t think I’m entirely happy with them unrolling from the top (that’s a feature of Safari I’d happily leave behind) but that’s a minor minor tweak… and I can probably photoshop them the way I want myself.

Works fine in 1.0RC1
No.55

∞ The Singing Detective said 1929 days ago:

The Mac Ach is in love.

Is there a quick and easy way I can remove the throbbers from Firefox’s tabs? I find them quite pointless – I’d rather see that much more of the title.
No.56

∞ Ben said 1928 days ago:

What is font: icon anyway? (Sorry if I missed it!)
No.57

∞ Jon Hicks said 1927 days ago:

Ben, check out the link for more information.

Recent Posts

26.01.10 The Handbag has been raised!

22.01.10 Guide to the Internet (2000)

20.01.10 Designer, not a construction worker

19.01.10 Why you can never work 'full time'

16.01.10 Dream Report: Look at the Hygiene!

Or Full Archives

The Hickensian is the journal of Hicksdesign, a creative partnership of Jon & Leigh Hicks. Read more about us.

Journal RSS Feed

POWERED by FUSION

playlist

Elsewhere

The Rissington Podcast - weekly shenanigans with Jon Oxton

Hicksmade - unique handmade goods by Leigh Hicks

Hickr | RSS

Contact

Hicksdesign

Island House

Lower High Street

Burford

Oxfordshire, UK

OX18 4RR

+44 (0)7917 391 536

Click to download my vCard Download vCard

I am currently working full-time with Opera, and not taking on any new projects

© Hicksdesign Ltd 2003-10