The Firefox web browser is without doubt the most customizable web browser when you compare those with a sizable market share. There is a lot that you can do in terms of customizations: from moving interface elements around, adding new items to the interface and even using custom styling to change the look, feel and visibility of Firefox interface elements.
If you are a Firefox user, you have probably come upon guides that make use of custom styling techniques. Heck, we have posted quite a few in past years, for instance to hide the scrollbar completely, to separate the stop and reload button, or to display back and forward buttons at all times.
To make those changes, you need to know the IDs used to style Firefox interface elements. This guide explains how you can look those up, so that you can do your own custom styling or ask someone who knows CSS to do it for you.
Good news is, you can look up the IDs directly in Firefox, so no source code crawling or other tedious tasks. You do need an add-on for that though.
DOM Inspector is a handy extension for Firefox that integrates directly in the browser's Web Developer tool set that it ships with. Just install the extension and restart Firefox once to gain access to it.
You can launch the new tool by tapping on the Alt-key, selecting Tools > Web Developer > DOM Inspector.
You have two main options to use it. The first thing that you may want to do is select File > Inspect Chrome Element and then one of the open websites of the browser.
Once that is out of the way, you can use the select button on the very left of the address bar in DOM Inspector. Click on the icon and then on an element in the Firefox interface. It should get highlighted in red shortly which acts as a confirmation.
Instead of using the selector icon, you can also click on the search button and use it to find the element, but that works only if you know its official name. Note that you can search by ID, tag or attribute. The search works well if the interface element you are interested in is not displayed on the page currently.
Now that you have the ID of the element, you can start to add custom styling to it. Popular examples are:
You need to apply those changes to the userChrome.css file that you find in the Firefox profile folder.
You can look up the IDs of Firefox interface elements using the DOM Inspector add-on. It is especially useful for Firefox users who know CSS and have no troubles applying custom styles to some elements of Firefox's chrome.Advertisement
Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.
We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.
If you like our content, and would like to help, please consider making a contribution:
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.