How to use the DOM Inspector to hack your Firefox UI
NOTE: this post is very likely out-of-date. Please keep this in mind when considering this article.
Here’s a tutorial on how to use Firefox’s DOM Inspector add-on to tweak whatever you want.
Suppose we want to remove that bookmark star on the right side of the URL bar. I’ll show you a simple way to do this and then generalize the technique for use with anything.
If you didn’t get the DOM Inspector when you downloaded Firefox, you’ll obviously want to do that first. Open it up by hitting Tools > DOM Inspector or key in Ctrl+Shift+I (default). You’ll want to start out by going to File > Inspect a Chrome Document and choosing the first option which is your Firefox window.
Find your target
The easiest way to check it out is to inspect it by clicking the button and clicking on the star. The DOM Inspector is helpful here because it will highlight the block containing the star with a big red border and show you the markup in the browser document with the XML element highlighted.
We also could have clicked the button and searched for “bookmark” to see if we could find it that way, but that would not really be the easiest way in this case.
From there you can easily right click and “Insert” a new node. Type “style” in the Node Name field and then the CSS you want to apply in the Node Value. In this case you’ll type “display: none;” which removes the star immediately once you click OK. We won’t worry about the Namespace URI in this tutorial.
Now take note of the node name, class, or id so you can use CSS rules in your userChrome.css file. We can see that the ID of the element is “star-button”. Great, in this case that’s all we need. You’ll need to know a bit of CSS to do any good tweaks so if you want you should check out sitepoint’s CSS reference.
Since you know the element ID, class, etc. you should add a snippet to you userChrome.css file like this:
So easy! Once you get the hang of it you’ll think of all kinds of things you’d like to change about Firefox’s interface. Now to save you time on some bits I’ll close up with a…
Big ol’ list of userChrome.css tweaks
There you have it! I welcome any questions or additional tweaks.