Get (Prerequisites)
- Firefox Web Browser
- Text Editor
- Zeal for experimentation
- Photo editor
Set (Final Result)
- One fine, nasty, sexy looking Firefox window, with your own branding! Here is what I mean :
 |
|
Custom Branding
|
 |
|
Our Mission!
|
Go (Procedure)
Step 1: Navigate to your Firefox profile directory. Yes you have a Firefox profile too incase you didnt know. All Firefox users have it. Its stored in a special folder on your hard disk.You will have to enable show hidden files and folders. For complete steps here is how to find the profile folder if you don’t know how to. The following screenshot shows the location on windows xp. For other operating systems follow the link mentioned in previous line.
 |
|
The profile and chrome directory on Windows XP
|
Step 2: The profile on my machine reads as "l0gyrqu5.default", you will have a similar random string if you didnt create a profile yourself. We will refer to this profile string as xxxxxxxx.default from now on (to avoid confusion coz yours is going to be different, just substitute xxxxxxxx with the random string for your profile).
We need to find the chrome directory and a userChrome.css file within the chrome directory so that we can start with the real work. As it turns out that there is a dir named chrome within dir named xxxxxxxx.default which is within the dir Profiles(refer to screenshot above)
Step 3: Within the chrome directory there are generally some example files (if you have not tweaked with FF yet). We are interested in the file userChrome-example.css. If you don’t have the file here is the sample one. (Caution: Before downloading the sample file please double check you are looking in the right place.)
 |
|
We found it at last!
|
Step 4: Open up userChrome-example.css with your favorite text editor (no Microsoft Word or word processors please). Whatever you do don’t delete or change the following line (which is there initially):
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
All the changes that are to be made have to be added after the above mentioned line. Now just copy and paste the following piece of CSS:
menubar, toolbox {<br />
-moz-appearance: none !important;<br />
background-image: url( "myImage.png" ) !important;<br />
background-color: none !important;<br />
}
Step 5: Save the file as userChrome.css in the chrome directory. (Please note the filename "userChrome.css" , it should be exactly same). To explain the CSS we are actually doing nothing much but saying to Firefox that
- "Change the appearance of the menubar and the toolbox as I tell you to" ( menubar, toolbox { )
- "Don’t use the default appearance"(-moz-appearance: none !important;)
- "Use a background image I tell you to use and that is myImage.png in the chrome dir" (background-image: url( "myImage.png" ) !important;)
- "Don’t use any background color" ( background-color: none !important;)
- "I am done you can relax now!" ( } )
Step 6: Remember just above we told Firefox to use myImage.png as the background image? Well now its time to create one and place it in the chrome directory (that we hunted in Step 2). You can use your own image, logos etc and thus have custom branding. Here are few tips to keep in mind when you design your own images:
If you want to position your logo at a specific position rather than tiling it all over then find out what your screen resolution is, this will have an effect on the dimensions of the image we use. Lets take the most common 1024 x 768 as our reference. So now the dimensions of our image should be 1024 x 100. The idea is to visualize a rectangle over your Firefox window’s toolbar and see what dimensions will cover the area you want to cover. A good idea is to take screenshot of the window and then draw a rectangle over the toolbar using your image editing software. You will have the dimensions, no need to get too precise we just need a rough estimate. Download the sample image I created with I Love FireFox logo to be used as myImage.png .
Step 7: Name the image myImage.png and place it in the chrome directory. Restart Firefox and if you did all things as mentioned you will be greeted by your personalized Firefox edition.
Step By Step Tutorial Details:
- Time to complete: 15 – 20 mins
- Difficulty: Moderate
- Karma, Satisfaction or Joy you gain: 10/10
[...] on how to put your logo or your name on the firefox toolbar to give it the complete custom lookhttp://varunkashyap.wordpress.com/2008/05/29/step-by-step-tutorial-firefox-custom-branding-changing-…AOL ToolbarFree add-on for Internet Explorer and firefox that includes access to AOL or AIM mail, [...]
It won’t work with css above (in FF 3.0.6), I don’t know with others.
But it works perfectly with this:
menubar, toolbox {
-moz-appearance: none !important;
background-image: url( “myImage.png” ) !important;
background-color: none !important;
}