Posts Tagged ‘Step By Step Tutorials’

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 :
Profile directory
Custom Branding
Profile directory
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.

Profile directory
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.)

Profile directory
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( &quot;myImage.png&quot; ) !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

Read Full Post »

Quite often trying to add a search engine to Firefox I end up dissatisfied not able to find the particular search engine or service I am looking for. Compare this to Opera which allows you to create your own search in a snap by just right clicking on the search box that you want to add and clicking create search. There is a workaround for this with Firefox also, however its just a bit more daunting. So I decided to create a Step by Step tutorial on how to do one.


  • Firefox web browser
  • A little bit of XML knowledge (Don’t worry if you dont, this tutorial will help you out)


  • A Search plugin added to the search box on the upper right corner of Firefox


Step 1: Identify the search website or the search service for which you want to create the plugin. In this tutorial we will create a search plugin to search torrentz.com a site useful for searching Bittorrent files.

Step 2: Open torrentz.com and just search for a random term. Lets say we search for "abczyz". Type "abcxyz" in the search bar and press enter. Ofcourse this won’t return many results but what we want is the URL(Uniform or Universal Resource Locator or the thing in the address bar of the browser)

The URL we get is http://www.torrentz.com/search?q=abcxyz

Needless to mention that this can change with time and will be different for different sites.

Step 3: Open notepad or any editor you like but not a word processor like Microsoft Word. Copy and paste the following code into the file:

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/" xmlns:os="http://a9.com/-/spec/opensearch/1.1/">
<os:Image width="16" height="16">data:image/x-icon;base64,data</os:Image>
<os:Contact>email of whom to contact<os:Contact>
<os:Url type="text/html" method="GET" template="webAddress={searchTerms}">

Step 4: We will be changing the text that is in bold in the above code to suit our needs. Leave the first two lines as it is. They tell the type of the document and the name space description.

  • The text included between the <Shortname> and </Shortname> is the name you want to give to your search plugin. We will put "Torrentz" here.
  • The text between the <Description> and </Description> gives a little information about the plugin. We will put "Search torrents on Torrentz.com" in this area.
  • Replace encoding with the type of input encoding you will use, if you dont know what is this, then you will most probably be using UTF-8 so put in "UTF-8" there.
  • The image part is just a bit tricky so if you don’t get this you can skip this tag (you just won’t get an icon, thats it no big deal).What you have to do is go to the URI Kitchen, then choose and upload the image that you want to use as the icon for the plugin and click generate. Just copy everything that it gives and place it between <os: Image width="16" height="16"></os:Image>
  • <Contact> and <Contact> enclose the email address of the mantainer of the plugin. We put "sendinfofiles@gmail.com" here.
  • <Url> is to contain what we had discovered and taken note of in Step 2. Replace the word webAddress with the url we found in Step 2.
    So the <Url> line should read <Url type="application/rss+xml" template="http://www.torrentz.com/search?q={searchTerms}"/>
  • Click here to view the final file. Feel free to download and make changes.

Step 5: Thats it. Thats your very own Firefox search plugin. Did I miss something? If you were thinking "So how you use it or test it?" then pat yourself on the back, it seems you understood the tutorial! For the others please have another look at Step 4.
Coming to the point, to test it you have to place it in special directory where the Firefox plugins are placed. This differs for different operating systems. So have a look at the following table:

  • Windows 2000/XP –
    C:\Documents and Settings\user name\Application Data\Mozilla\Firefox\Profiles\string\searchplugins
  • Windows Vista
    C:\Users\user name\AppData\Roaming\Mozilla\Firefox\Profiles\string\searchplugins
  • Windows 98/ME –
    C:\Windows\Application Data\Mozilla\Firefox\Profiles\
  • Macintosh (OS X) –
    ~/Library/Application Support/Firefox/Profiles/
  • Linux/Unix –
    ~/Library/Application Support/Firefox/Profiles/

Please note that you will have to enable "Show Hidden Files", user name refers your Windows username, string is a random string generated for each firefox profile. Just open up these folders it will start making sense.

Step 6: You are now ready to go, Restart Firefox if it was already running and then choose your newly created plugin from the Search Box and test it. It works I know. You are a genuis!

Step By Step Tutorial Details:

  • Time for completion: 5 – 10 minutes.
  • Difficulty level: Moderate – Difficult
  • Karma, Satisfaction or Joy you gain: 8/10 )

Bonus: Did I mention this plugin can work with Internet Explorer 7 also? Yes it can. IE7 supports Open Search Plugins and thats what we just created incase you didn’t notice!

Read Full Post »