Finding the ID’s of Firefox Elements

Posted: December 1, 2009 in Code, Firefox, Internet, Software, Windows
Tags: ,

First, let me add a few more key phrases here so that I can get the most views here. This solution will be the easiest way to find the ID’s of Firefox elements.

Find the XUL element ID’s of Firefox elements.
Finding the element ID’s for Firefox.

1. If you’ve followed my instructions in my last post, open your Firefox profile that does NOT use WebScarab as a proxy.
2. Go to addons.mozilla.org and download Firebug. Firebug allows you to easily view the contents of webpages, and change them in real time. Once you’ve installed this addon, restart Firefox.
3. Now that that is done, open the following URL in a new tab: chrome://browser/content/browser.xul

You should see an exact replica of your Firefox interface now in the browsing window. Pretty cool, huh? Now that you have the Firefox Interface in a window where you can easily view it, you may go through it with Firebug. The easiest way to do this is to use the ‘Inspect’ button, which allows you to hover over an element, Firebug scrolling to that part in the ‘web page’. So suppposing that I wanted to know the ID for the search bar. I would click the ‘Inspect’ button, then I would hover over the scrollbar. Once I’d done this, Firebug would scroll to a line in the code which would tell me that the ID for the url container is ‘url_container’, and the actual URL bar is called the ‘urlbar’. Pretty simple.

Now sometimes just hovering over an item wont quite cut it. Sometimes you will be forced to go through the code manually. To make this easy, open Firebug in a separate window so that you have the most space possible.

Once you’ve located an element through Firebug, you have two options. One! You can change the CSS attributes in real time to see what would happen. If you do this, no changes you make will remain in place.
You’re second option! You could find the userChrome.css file, which controls the CSS for your version of Firefox. The best way to do this is to just search for it with Windows search or something similar.

Once you’ve found userChrome.css, I recommend opening it it HTML-Kit, my favorite Web Developing program. If you don’t have HTML-Kit, and don’t plan on getting it, you can just open it in a simple text editor.
Armed with your new knowledge of the ID’s that go into Firefox, you may now change different aspects of your browser! Here’s a small example using the urlbar.

So I’ve opened userChrome.css in HTML-Kit, and it’s a blank document. That’s fine. To change the background color of the urlbar, I’m going to type in the following:

#urlbar
{
background-color: orange !important;
}

Those of you familiar with CSS will know that the pound sign (#) denotes that ‘urlbar’ is an ID, that ‘background-color: orange’ changes the background color from it’s default to orange. Now the ‘!important’ may be something new to you though. To add any elements to userChrome.css and have them overwrite Firefox’s built in style sheet, you MUST add the ‘!important’ after the actual value.

So now you know how to find the ID’s of all of Firefox’s elements. You can now edit anything you would like: changing colors, fonts, positions-anything you can think of. If you are not familiar with CSS, check out w3cschools.org, or come back here. Soon I plan on having some basic CSS up here, along with the basics for Pythong programming.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s