This is a tutorial I wrote allowing the user to use Safarifox themes, without also having to use the extensions Compact Menu and Tab Browser Extension. This tutorial will have a perminant home on my website, but I'll also post the entire thing here.
----------------------------------------------------------------------
No More Extensions - A Firefox userChrome Tutorial
The purpose of this tutorial is to enable the user to use Firefox themes to emulate the look of the Apple Macintosh browser Safari (so called Safarifox), without having to resort to also using troublesome and sometimes buggy extensions, that are largely unsupported as Firefox continues to get upgrades. This will be done by simply modifying the userChrome.css file.
This tutorial is written for the average user. If you are familiar with one or more of the beginning steps, feel free to skip them. I only take partial credit for this tutorial. The individual mods are available from Firefox Tips, I just made the mental connection that these can be used to supplement the effects of the extensions Compact Menu and Tab Browser Extension.
Additional credit goes to my testers Sketching (who made additional suggestions), and Ppoppe. Thanks a bunch guys!
It is worth noting that the userChrome.css file is non-essential to the operation of Firefox. In fact it doesn't even exist before you start this tutorial. If you don't like any of the changes you can simply delete it and return to your original appereance.
1. In order to see the folder you need to access, you need to make it visible. By default Windows Explorer makes certain critical application files and folders invisible. To make them visible, in Windows Explorer go to: Tools > Folder Options > View tab > scroll down to "Show hidden files and folders" and select that. Hit OK.
2. Navigate to "C:Documents and Settings(your user name)Application DataMozillaFirefoxProfiles(random profile number).defaultchrome". There you will see a number of files including "userChrome-example.css". Make a copy of this file and rename it to "userChrome.css". Making a copy isn't really necessary, but it might come in handy in case you want to delete your working file, or you mess up later on.
3. Open up the file in a text editor, like Windows Notepad.
I've noticed that two of the biggest problems with Safarifox themes are A) The Tabs text often appears as either white or light gray, making them hard to see, and
Having the menu (File, Edit, View, etc...) visible often detracts from the whole Safari emulation. The following code snips will take care of those two problems.
4. Add these two snips of code into your userChrome file below the @namespace line:
/* Remove the menus*/
menu[label="File"], menu[label="Edit"], menu[label="View"], menu[label="Bookmarks"], menu[label="Tools"], menu[label="Go"], menu[label="Help"] {
display: none !important;
}
/* Change color of the tabs*/
.tab-text {
color: rgb(0,0,0) !important;
}
You can make the text color anything you want, but black ( rgb(0,0,0) ) is most likely what is needed.
5. Save this file and the restart Firefox. Your changes should have taken place.
Helpful Tips: Because the modification to the Firefox menu takes away your access to it, you should only probably use this if you don't use the menu often.
If you do use this menu "hack", and need to regain access to the menu for one reason or another, here is a suggestion:
Make 2 copies of your modified userChrome file. One with the menu code (userChrome.css), and one without (userChrome_Menu.css). You can rename the first one "userChrome_noMenus.css" then rename the second one to "userChrome.css". Once the chore is done, you can rename the files again and go back to not having menus.
Aqua-Soft Forums