Posts Tagged ‘Step by Step’

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 »

This is the Step by step tutorial on installing Linux, just as Mova promised. Refer to the earlier posts on Linux Demystified here and here to know the background of this tutorial.


  • About 5GB free hard disk space.
  • Working windows installation.
  • Ubuntu or Kubuntu or Edubuntu cd or a fast Internet connection.
  • Wubi (not required if you have Ubuntu, Kubuntu or Edubuntu 8.04 cd).


Step 1: Put the Ubuntu, Kubuntu or Edubuntu (referred to as Ubuntu from here on) into the cd drive. A screen like the following will appear automatically. If it doesn’t, it means you have autorun disabled, in that case go to My Computer > Double Click on Ubuntu Icon > Double Click on umenu.exe

I am using Kubuntu, if you use Ubuntu it would be all the same just the image and colors will be different.

Step 2: Click on "Install inside Windows". You will be greeted by the following screen.

This is where all the action is!!

Step 3: Refer to the image and the appropriate number to view its details:

  1. Choose the Windows partition where you want to install Ubuntu.
  2. Choose the space you want to allocate to the Ubuntu Installation.
  3. Choose Desktop Environment. More on this later. For starters I would recommend Gnome, but then if you know what you are doing, you can choose anyone here. Its no big deal.
  4. Choose the language
  5. Choose the username. This will be used to log into Ubuntu.
  6. Choose the password for the above username. Both these details are required when you boot into Ubuntu.

Now simply click on install, installation will begin as shown below (make sure you are connected to the Internet if you are not doing this from cd), go fetch a Coffee or two!!

The Installation Begins

Step 4: Have Coffee! You don’t have to do anything!! Wubi is working for you. After the progress on the above screen completes you will see this:

Wubi creating virtual disks

Step 5: Have another coffee! Wubi will soon complete its work and ask you for a restart.


Step 6: You are almost there. Choose reboot now and click on finish. You computer will reboot, but this time its different. You will see an entry named Ubuntu in the Choose Operating System Menu. Use arrow keys to choose Ubuntu ( I often see people trying to use mouse on this screen. It wont work!!) and press enter.

Choose Ubuntu here

Disclaimer: The above shot is of Vista Boot Manager that I found on Google Image Search ( I dont have a camera good enough to post my own shot). With XP the screen looks almost the same. Just wanted to give you an idea.

Step 7: Ubuntu will go through the process of setting up the operating system for the first time. This would take some time depending upon the specifications of your machine. Once its done. You can login into your Linux installation using the username and password you provided in Step 3 above.

This is it. You have Ubuntu running on you system and you didnt have to touch any partition of configure GRUB. Enjoy! Most of the things work out of the box. You might have a minor glitch or two depending on your hardware, this can usually be sorted by searching the Ubuntu Forums or check out the Ubuntu IRC at freenode.


Step By Step Tutorial Details:

  • Time for completion: 30 – 35 minutes depending on your hardware.
  • Difficulty level: Easy – Moderate
  • Karma, Satisfaction or Joy you gain: 10/10 🙂


Feel free to ask any question on any of the tutorials and let me know your experience. Also contribute on what other tutorials you would like to read. I will surely try to include them. Long Live the Ubuntu Spirit!

Read Full Post »

After my earlier post on Remote Desktop Access, I have been asked by friends to explain in detail how to set up Remote Desktop Access. Lets start with the easy one then, shall we?

Here is a step by step guide to use TeamViewer:

Step 1. Download TeamViewer(full version) here.
Step 2. Double click the file downloaded in step 1. You will see the following screen.

Welcome screen of the wizard

Step 3. Click next and proceed to the License agreement.

license agreement
The license agreement screen

Step 4. Read (although I never read 🙂 but still its a good idea if you want to sleep) and accept (or dont accept in which case the step by step guide for you ends here only) and click Next. You will see the following screen:

installation type
Choose whether to install or not

Step 5. Choose whether you want to install the application or not, TeamViewer 3 runs absolutely fine without installation also. Once you have made your choice click Next. Depending on what you chose you will either see the installation or the TeamViewer Window. I didnt install so here is what I got:

main screen
You are ready to go!!

Step 6. Now you can either choose to connect to a remote computer in which case that remote computer must also follow the same setup process and give you the ID and Password in the blue fields, you can then create a session using the ID they provided you,
You can have some one connect to you remotely in which case you will provide them with the ID and Password you get on your screen

Details for this step by step tutorial:

  • Estimated Time to complete: 2 mins (not considering download time)
  • Difficulty Level: Easy
  • Karma, Satisfaction or Joy you gain: 7/10*

*May vary from person to person 🙂

Read Full Post »