Safari style tabs for Firefox OS X

Part1

After reading two articles by Jon Hicks (1) “Safari style tabs for Firefox OS X” and (2) “Native (looking) Firefox OSX widgets”, I decided to take his ideas to the next level and create a theme for Firefox OSX to make it look like a native OSX application.

The problem was to change the form elements to make them look native OSX. After days of tring to add the form elements widjets to the theme—I gave up and used Kevin Gerich’s solution.

To install the theme, just click here (you may need to tell Firefox to allow themes to be installed from this website). Then, restart your browser and you’re done.

PC USERS – BEWARE! – THIS THEME WORK ONLY WITH MAC OS-X!

If you’d like to have a go at implementing the form elements widjets as well, you can download all the images and css here.

Instructions:

Close Firefox.
Right-click on your Firefox application, choose “Show Package Contents”, then open the Contents > MacOS > res folder.
Make a backup copy of your platform-forms.css file.
Copy the files included in the ZIP archive into the res folder.


Part2
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.
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.