Firefox to Safari Revisited: A Thorough How-To
I was telling Judith about my earlier post about making Firefox look and function more like Safari, and she said I should write up a more thorough how to so that she could do it without reading all over the web for you, our dearest readers, so here it goes:
The above screenshot looks like Safari, but it is, in fact, Firefox. Read on for the step-by-step for how to get your Firefox to look the same and the tabs to behave the same as in Safari.
Step 1: Safarish Theme—Launch Firefox. Go to this page on Ran Aroussi's blog. Click on the large red lettered click here in the middle of the post. You will see a message like this (but without the odd distortion; dunno what happened with that screenshot):
Click "OK." The theme will install, but will not activate until you restart. If for some reason you don't see this dialogue, but instead a warning comes up asking if you should enable installations from this website, then click yes, allow, and then go back to the beginning of this step and try again.
Step 2: Quit Firefox and Relaunch Firefox.
Step 3: Install Tab X Extension—Go to the post at Hicksdesign that I linked to in my previous post and click on the link to install Tab X [or simply click here]. The following dialog will pop up:
Click the Open with radio button and browse to your Application folder and select Firefox. Click OK. The extension will install but won't become active until after you restart Firefox. Again, if a warning comes up asking if you should enable installations from this website, then click yes, allow, and then go back to the beginning of this step and try again.
Step 4: Quit Firefox and Relaunch Firefox.
Step 5: Edit / Create userChrome.css—Now you need to go back to Hicksdesign and take note of his instructions for editing your userChrome.css file. This file is located in ~/Library/Application Support/Firefox/Profiles/[YOURPROFILE]/chrome/
If there is no userChrome.css file there, then you will have to create one in a nice clean text editor, like SubEthaEdit, TextWrangler, or BBEdit. Open a new file, save it as userChrome.css and type the following:
/* Tab X mods */
/* ------------------------------------------------------- */
/* make sure you have Tab X installed first:
http://www.gnarfle.com/tabxmac.xpi */
.tabs-closebutton {
padding-bottom: 0 !important;
}
.tabs-closebutton-box { /* hides the tab bar close button */
display: none !important;
}
Save the file again and close your text editor. UPDATE: Or you can simply use this userChrome.css file that I whipped up based on Hicks' file.
Step 6: Restart Firefox.
Step 7: Looking Good—Everything should already look pretty much like Safari at this point. If it doesn't, then go into Tools-->Themes and make sure Safarish is loaded, and then go into Tools-->Extensions and make sure that Tab X Mac is loaded. If it still doesn't look quite right, make sure that you saved the userChrome.css file in the right spot and with the correct info.
Step 8: SessionSaver for Firefox—One of my favorite things in Safari is actually functionality added by Saft: the ability to remember what tabs were open before you accidentally quit the program or suffered a program crash. Enter SessionSaver. Go to Tools-->Extensions, and click on the Get More Extensions link which will take you here. Click on the Tabbed Browsing link in the sidebar. On the next page, scroll down to SessionSaver and click on install. Let install. It will be activated after you restart.
Step 9: Quit Firefox. Restart Firefox. Ta-da! You're done!
The above screenshot looks like Safari, but it is, in fact, Firefox. Read on for the step-by-step for how to get your Firefox to look the same and the tabs to behave the same as in Safari.
Step 1: Safarish Theme—Launch Firefox. Go to this page on Ran Aroussi's blog. Click on the large red lettered click here in the middle of the post. You will see a message like this (but without the odd distortion; dunno what happened with that screenshot):
Click "OK." The theme will install, but will not activate until you restart. If for some reason you don't see this dialogue, but instead a warning comes up asking if you should enable installations from this website, then click yes, allow, and then go back to the beginning of this step and try again.
Step 2: Quit Firefox and Relaunch Firefox.
Step 3: Install Tab X Extension—Go to the post at Hicksdesign that I linked to in my previous post and click on the link to install Tab X [or simply click here]. The following dialog will pop up:
Click the Open with radio button and browse to your Application folder and select Firefox. Click OK. The extension will install but won't become active until after you restart Firefox. Again, if a warning comes up asking if you should enable installations from this website, then click yes, allow, and then go back to the beginning of this step and try again.
Step 4: Quit Firefox and Relaunch Firefox.
Step 5: Edit / Create userChrome.css—Now you need to go back to Hicksdesign and take note of his instructions for editing your userChrome.css file. This file is located in ~/Library/Application Support/Firefox/Profiles/[YOURPROFILE]/chrome/
If there is no userChrome.css file there, then you will have to create one in a nice clean text editor, like SubEthaEdit, TextWrangler, or BBEdit. Open a new file, save it as userChrome.css and type the following:
/* Tab X mods */
/* ------------------------------------------------------- */
/* make sure you have Tab X installed first:
http://www.gnarfle.com/tabxmac.xpi */
.tabs-closebutton {
padding-bottom: 0 !important;
}
.tabs-closebutton-box { /* hides the tab bar close button */
display: none !important;
}
Save the file again and close your text editor. UPDATE: Or you can simply use this userChrome.css file that I whipped up based on Hicks' file.
Step 6: Restart Firefox.
Step 7: Looking Good—Everything should already look pretty much like Safari at this point. If it doesn't, then go into Tools-->Themes and make sure Safarish is loaded, and then go into Tools-->Extensions and make sure that Tab X Mac is loaded. If it still doesn't look quite right, make sure that you saved the userChrome.css file in the right spot and with the correct info.
Step 8: SessionSaver for Firefox—One of my favorite things in Safari is actually functionality added by Saft: the ability to remember what tabs were open before you accidentally quit the program or suffered a program crash. Enter SessionSaver. Go to Tools-->Extensions, and click on the Get More Extensions link which will take you here. Click on the Tabbed Browsing link in the sidebar. On the next page, scroll down to SessionSaver and click on install. Let install. It will be activated after you restart.
Step 9: Quit Firefox. Restart Firefox. Ta-da! You're done!
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 2)
Carl said 4:16PM on 6-16-2005
unfortunately, my least favorite thing about Firefox remains-- the obscure key combination to switch tabs! Does anyone know how to change it to shift-cmd-arrow, like in Safari? Having it different makes Hulk want to smash!
Reply
bryan said 4:16PM on 6-16-2005
why dont you just use safari in the first place :S
Reply
Eduardo Arcos said 4:16PM on 6-16-2005
Any ideas on how to make Firefox scrolling slower?
Reply
amb34 said 4:16PM on 6-16-2005
Here is the thing I don't understand (I only switched several weeks ago). Why use Safari instead of firefox? I use firefox at work on my PC, so use firefox on my mini just so thing look the same.
Why should I adapt to Safari-that's a question searching for help for a switcher-what makes it better (cause if it's better, I'm all over that, man.)
Reply
Pedro said 4:16PM on 6-16-2005
This totally destroyed my firefox at work (XP box)... I would not suggest picking it up. I am getting an error of: No XBL binding for browser. Whatever the hell that means.
Reply
Thomas Mango said 4:16PM on 6-16-2005
Instead of directly editing your userChrome, Jon Hicks was nice enough to provide a download package (http://www.hicksdesign.co.uk/file_download/10) with the modified userChrome file as well as various other files that will help in the Firefox makeover.
Reply
Laurie said 4:16PM on 6-16-2005
bryan - we'd LOVE to :) But if you've been following along, you may have read that this very blog is running a backend that does not yet function in Safari so in order to amuse and entertain you every day we have to use Firefox to post.
Reply
C.K. Sample, III said 4:16PM on 6-16-2005
Hey, Thomas, yes he did, but it looks a little wonky when used with Safarish (which imho looks much more like Safari).
Reply
C.K. Sample, III said 4:16PM on 6-16-2005
FYI, I updated step 5 with a link to the userChrome.css file that I hacked together for this. Here's the link: http://www.tuaw.com/files/2005/04/userChrome.css
Reply
bryan said 4:16PM on 6-16-2005
ah Laurie i see! But it could be worse, just imagine you had to use Internet Explorer :p
Reply
Phil Moore said 4:16PM on 6-16-2005
The biggest problem I have with using Firefox on a Mac is that form elements look so poor in it.
The aqua release of Firefox will be the major thing for me - in Safari you have nice buttons and highlighting whilst Firefox leaves you with things that look something like a Windows machine from the mid-90s!
Reply
Thomas Mango said 4:16PM on 6-16-2005
CK: That's true, in fact I may revert to the original tab orientation, and get rid of all that Jon Hicks stuff, and just use his method of fixing the tab x location (so it isn't too high). I'm not really too into the way it looks, I'm just happy that the close button is in the right spot.
Reply
Thomas Mango said 4:16PM on 6-16-2005
Laurie: Firefox is better than Safari!
Uh oh, I hope I didn't just start a war... :D
Reply
C.K. Sample, III said 4:16PM on 6-16-2005
Thomas, if by "better" you mean "slower and sans Services support and integrated system-wide spellchecking" then I agree with you fully.
Reply
Thomas Mango said 4:16PM on 6-16-2005
Ouch.
Reply
Andy Garcia said 4:16PM on 6-16-2005
Wow... CKS^3 with a heavy uppercut with that one. A hush falls over the crowd, and over Laurie....
Reply
C.K. Sample, III said 4:16PM on 6-16-2005
Oh, yeah, also: I left out the code for removing favicons from the tabs. Everything between code// and //code needs to go in the userChrome.css file.
code//
.tab-icon {
display: none !important;
}
//code
Reply
C.K. Sample, III said 4:16PM on 6-16-2005
Hey, Pedro,
Sorry I made the tutorial for OS X. If you want to do the same thing on a windoze box you'll need to use a different flavor of the themes.
Reply
Laurie said 4:16PM on 6-16-2005
Andy - if tree falls in the forest and no one is there to hear it, you can still hear me scream :)
I hate Firefox. No matter how many ways you can make it LOOK like Safari or behave in minor ways like Safari, it still won't be Safari. My Safari is a lean, mean, speedy browsing machine. Firefox is... not.
(so odd to see C.K. agree with me... I'm still kind of in shock about that one)
Reply
Thomas Mango said 4:16PM on 6-16-2005
CK: I am posting this comment from Safari. Having switched from windows towards the end of the last year, I didn't like Safari because, well, it just didn't feel like Firefox. I copied most of my bookmarks into Safari, and I decided, after the comments back and forth on this post, that I will give Safari a fair shot. Hell, I gave OS X a shot, why not Safari?
Reply