Is it possible to style Firefox browser UI only on certain pages? - SOLVED

oomingmak

I'd like to have a particular Firefox toolbar icon appear desaturated, but only when my about:home page is being viewed.

I have already successfully used @-moz-document url("about:Home") to style various elements of the about:home page contents, but it doesn't work for browser UI elements (such as toolbar button icons etc.)

To clarify:

If I use the css:

#button .toolbarbutton-icon { filter: saturate(0%) !important; }

it works fine, but everywhere (i.e. on all web pages).

But if I try to restrict it so that the change only happens when my about:home page is being viewed (using the css shown below) it does not work.

@-moz-document url("about:Home") {
#button .toolbarbutton-icon { filter: saturate(0%) !important; }
}


Is what I'm trying to do even possible, or are moz-document url changes limited to changing only a page's contents?

I'm sure there must be a way to do this.

João.

With stylish 2.1.1 and old Firefox, it's possible:
#main-window[stylish-url="about:home"] toolbarbutton .toolbarbutton-icon {filter: saturate(0%);}

oomingmak

Thanks again, João.

Another successful result due to your kind assistance. It works like a charm!

This is why I refused update Firefox beyond v56. So much customization ability gets lost.

João.

It's a pleasure to help.

stonecrusher

This is why I refused update Firefox beyond v56. So much customization ability gets lost.

You can still do it in FF67 via userChrome.css. Just addons can't do it anymore because of stability/speed and security optimizations.