Comments on: How to use the DOM Inspector to hack your Firefox UI

By: Ken

Ken — Sun, 07 Feb 2010 06:17:41 +0000

Hey, I figured it out….

With DOM Inspector, first I have to select File / Inpsect Chrome Document / 1 , then when selecting the element of interest I have to magnify the screen to tell when the active pixel of the cursor is over a pixel of the element, then I have to hit the little calendar-looking icon of the right-side pane and look at the CSS Rules for one piece of information and Computed Styles for another piece of information. I can’t imagine an easily-describable algorithm for this procedure….

Anyway, here is my resulting userChrome.css for Firefox 3.0 – 3.6.

/* minimize text size everyhwere */

* { font-size: 8pt !important; }

/* minimize toolbar sizes for small icons & remove OS X dark-gray */

.toolbarbutton-1 { max-height:24px !important; } /* 27px for FF 3.0 */

#nav-bar { -moz-appearance:none !important; background:none !important; border:none !important; }

#PersonalToolbar { -moz-appearance:none !important; background:none !important; max-height:27px !important; } /* 30px for FF 3.0 */

/* remove buttonishness & OS X dark-gray from tabs */

.tabbrowser-tabs { background:none !important; background-color:#FFFFFF !important; }

.tabbrowser-strip { border-bottom-width:0px !important; }

.tabbrowser-tab[selected="true"] { background-color:#FFFFFF !important; border-left-style:none !important; border-right-style:none !important; border-bottom-style:none !important; }

.tabbrowser-tab[selected="true"] > .tab-image-left, .tabbrowser-tab[selected="true"] > .tab-image-middle, .tabbrowser-tab[selected="true"] > .tab-image-right, .tabbrowser-tab[selected="true"] > .tab-close-button { background:none !important; }

.tabbrowser-tab:not([selected="true"]) { color:#707070 !important; }

.tabbrowser-tab[selected="false"] { color:#A0A0A0 !important; }

/* restore closebutton to solitary tab */

.tabbrowser-tab[selected="true"] .tab-close-button { display:-moz-box !important; }

/* make blank tabs actually blank */

.tabbrowser-tab[label="(Untitled)"] .tab-icon-image { display:none !important; }

.tabbrowser-tab[label="(Untitled)"] .tab-text { visibility:hidden !important; }

But I’m no expert, so there might be some room for improvement.

By: Ken

Ken — Sun, 07 Feb 2010 01:31:00 +0000

Eric’s tip for removing the favicon in Linux:

.tab-icon-image { display: none !important;}

is now required for Firefox 3.6 on Mac and possibly others. (It also works in 3.0.) Also new in 3.6:

.tab-text { display: none !important; }

makes the closebox and favicon slam to the center, so I had to switch to:

.tab-text { visibility: hidden !important; }

Therefore, the 3.6-compatible CSS to make blank tabs actually blank is:

.tabbrowser-tab[label="(Untitled)"] .tab-icon-image { display: none !important; }
.tabbrowser-tab[label="(Untitled)"] .tab-text { visibility: hidden !important; }

Also, someone had a couple long lines of CSS for returning the closebox to a solitary tab, but all I needed was one short one:

.tabbrowser-tab[selected="true"] .tab-close-button { display: -moz-box !important; }

What I’m having trouble with is:

.tabbrowser-tab[selected="true"] > .tab-image-left,
.tabbrowser-tab[selected="true"] > .tab-image-middle,
.tabbrowser-tab[selected="true"] > .tab-image-right,
.tabbrowser-tab[selected="true"] > .tab-close-button
{ background: none !important; color: #404040 !important; }

on FF 3.0 made tabs look like tabs, integral to the HTML content, but on 3.5+ they leave tabs looking like disconnected buttons. 3.5 also introduced an annoying black line separating the tab bar from the HTML content that I’d like to get rid of. I tried DOM Inspector 2.0.4 on FF 3.6 (I don’t have 3.5 any more) but I can’t seem to get it to do anything outside of the HTML content area. Any suggestions? Thanks.

By: Recent Links Tagged With "opacity" - JabberTags

Recent Links Tagged With "opacity" - JabberTags — Tue, 23 Dec 2008 13:19:27 +0000

[...] 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 [...]

By: John

John — Fri, 14 Nov 2008 19:17:24 +0000

great information. thanks. do you know, by chance, of any chrome modification to split the back/forward buttons?

By: Victor

Victor — Wed, 29 Oct 2008 20:36:02 +0000

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.

By: Trent

Trent — Fri, 19 Sep 2008 02:45:00 +0000

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?

By: Trent

Trent — Sun, 14 Sep 2008 20:57:13 +0000

Thank a lot, forgot about the simple drag-n-drop method :)
And yes, .tab-icon-image worked too!

By: Eric Wendelin

Eric Wendelin — Sat, 13 Sep 2008 23:47:14 +0000

@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;}