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!