How to use the DOM Inspector to hack your Firefox UI
Before Firefox 3 was released I wrote about exclusive Firefox userChrome.css hacks got a TON of responses and requests. So in the spirit of "teaching a man to fish", I’m providing 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.
Setup
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 (instructions) file like this:
#star-button { display: none; }
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
/* Autohide Back/Forward Buttons and Dropdown Marker when there is nothing to go Back/Forward to */
#back-button[disabled="true"] { display: none; }
#forward-button[disabled="true"] { display: none; }
#back-forward-dropmarker[disabled="true"] { display: none; }
/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }
/* remove Sidebar maximum width restriction */
#sidebar { min-width: none !important; min-width: 0px !important; }
/* hide live feed icon in Address url toolbar */
#feed-button { display: none !important; }
/* Add a keyword when adding a bookmark */
#editBMPanel_keywordRow { visibility: visible; }
/* Combine Stop and Reload Buttons, Hide Both as Necessary */
#reload-button[disabled="true"] { display: none; }
#stop-button[disabled="true"] { display: none; }
#stop-button:not([disabled]) + #reload-button { display: none;}
/* Remove search magnifying glass */
.search-go-button { display: none !important; }
/* Hide the green "Go" arrow */
#go-button { display: none !important; }
/* Move "List All Tabs" Button to the left side of the tab bar */
.tabs-alltabs-stack {-moz-box-ordinal-group: 1 !important}
.tabbrowser-arrowscrollbox {-moz-box-ordinal-group: 2 !important}
.tabs-closebutton-box {-moz-box-ordinal-group: 3 !important}
/* Style the new auto-complete list */
.autocomplete-richlistitem { background: #222222 !important; color: #FFFFFF !important; padding: 0px !important; margin: 0px !important; }
.autocomplete-richlistitem:hover, .autocomplete-richlistitem[selected="true"] { background: #444444 !important; }
/* Remove unimportant Location Bar Icon Text */
#identity-icon-label { display: none !important; }
/* Remove separator under Bookmarks Toolbar */
#bookmarksToolbarFolderMenu + menuseparator { display: none; }
/* Remove Favicon placeholder in Tab Bar */
.tab-icon {display: none !important; }
/* Search bar color */
#search-container .searchbar-textbox { -moz-appearance: none !important; border: 1px !important; font-weight: bold !important; color: darkslateblue important }
/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }
/* Hide the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker { display: none !important; }
/* Hide live feed icon in Address url toolbar */
#feed-button { display: none !important; }
/* Chage tab background */
tab { -moz-appearance: none !important; }
.tabbrowser-tabs > tab[selected="true"] .tab-text { background-color: #FF9 !important; color: #0F0 !important; font-style: bold !important;}
/* Change color of inactive tabs */
.tabbrowser-tabs > tab:not([selected="true"]) .tab-text { background-color: #8D6 !important; color: #000 !important;}
/* Hide "List All Tabs" button */
.tabbrowser-arrowscrollbox + stack { display:none !important; }
/* Dim the RSS icon until hover */
#feed-button {-moz-opacity: 0.2 !important;}
#feed-button:hover {-moz-opacity: 1.5 !important;}
/* Dim the URL Bar star icon until hover */
.ac-result-type-bookmark{-moz-opacity: 0.2 !important;}
.ac-result-type-bookmark:hover {-moz-opacity: 1.5 !important;}
/* Dim the Bookmark star icon until hover */
#star-button {-moz-opacity: 0.2 !important;}
#star-button:hover {-moz-opacity: 1.5 !important;}
/* Display only Location Bar textbox */
#menubar-items, #unified-back-forward-button, #stop-button, #reload-button, #search-container, #identity-box, #urlbar-container dropmarker { display: none; }
/* Change Location Bar font */
#urlbar { font-family: “Courier New”, monospace; }
/* Turn Location Bar Yellow for HTTPS */
#urlbar[level] .autocomplete-textbox-container { background-color: #FFFFB7 !important; }
/* Remove Search Engine dropdown button */
.searchbar-engine-button { display: none; }
/* Change border of unselected tabs */
#content tab:not([selected="true"]) { border-style: dotted !important; }
/* Remove History Sidebar Search */
#bmHi-toolbar { display: none; }
There you have it! I welcome any questions or additional tweaks.
[...] How to use the DOM Inspector to hack your Firefox UI 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. (tags: firefox userchrome hack css) [...]
The Dom Inspector you linked to isn’t compatible with the latest version of Firefox. I think this one is what you should get: https://addons.mozilla.org/en-US/firefox/addon/6622
@Blake:
Oops, old bookmark there. You’re right and I’ve changed the link. Thanks!
[...] I??m providing a tutorial on how to use Firefox??s DOM Inspector add-on to tweak whatever you want.http://eriwen.com/firefox/use-the-dom-inspector/Gentoo Linux Security Advisory - Mozilla products: Multiple … - Help Net SecurityLoadScript [...]
Do you know by any chance how to move the back-forward-reload-stop buttons, location bar, search bar all together to be in the same row as the menu bar? I’ve seen examples like this using Stylish but I’d rather edit userChrome.css
Thanks for this great and informative post!
Oh, and by the way
.tab-icon {display: none !important; }
doesn’t remove the icon placeholder (on linux) on the tabs. How would I do that? I would also be happy to remove the favicons from the location bar, any ideas on that?
Cheers,
Trent
@Trent:
To move buttons and text boxes to the menu bar, I just right click on the menu bar and click “Customize…” and then drag everything where I want it :)
As for removing the favicons, I think this will work for linux:
.tab-icon-image {display:none !important;}
Thank a lot, forgot about the simple drag-n-drop method :)
And yes, .tab-icon-image worked too!
Hi, I’ve been searching for this for hours but nothing works: I’d like to remove the File menu too (still on linux) and strangely, none of the above works:
#file-menu { display: none !important; }
#file-Menu { display: none !important; }
#File-menu { display: none !important; }
#File-Menu { display: none !important; }
#filemenu { display: none !important; }
#fileMenu { display: none !important; }
#Filemenu { display: none !important; }
#FileMenu { display: none !important; }
Do you know by any chance how to get this done?
I would like to remove the “Tags” item when I press CTRL+D. Any idea how to do this? Thanks.
And thanks, Eric, for the compilation of all the great tweaks.
great information. thanks. do you know, by chance, of any chrome modification to split the back/forward buttons?
[...] a Stylized Vector Police Badge with Metal and Leather Saved by franckstone on Fri 19-12-2008 How to use the DOM Inspector to hack your Firefox UI Saved by Jamespm666 on Mon 08-12-2008 Create Animated Alert Box using MooTools Saved by linnet on [...]