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

oomingmakoomingmak
edited June 2019 in Style Requests [?]
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.

Comments

  • João.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%);}
  • oomingmakoomingmak
    [?]
    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.João.
    [?]
    It's a pleasure to help.
  • stonecrusherstonecrusher
    edited June 2019 [?]

    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.

Sign In or Register to comment.