Replacing icon on about:home tab - SOLVED

oomingmakoomingmak
edited October 16 in Style Requests [?]
I'm trying to replace the tab icon on the Firefox about:home page (i.e. Start Page).

I have tried using the following:

tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important;
}

But it doesn't work. If I switch from the URL to display:none, it does hide the tab icon, so I know I've got the ID and class correct.

I also tried using background-image: instead of list-style-image: and it did make a change, but both old and new icons were visible at the same time, with the old icon on top, so you can barely see the new replacement icon.

What css should I use so that the icon is fully replaced?

Comments

  • calicocalico
    edited October 18 [?]

    Try this:

    tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
width:0 !important;
padding-right:16px !important;
background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important; 
}
  • oomingmakoomingmak
    edited October 16 [?]
    Hi calico. This is great! It works perfectly.

    I take it that the second line should have said width:0px rather than width:o but it still worked. In fact it works even with the width command omitted entirely.

    I do have one final question regarding changing the title text on that same tab (which I shall ask in a separate post) but as far as changing this icon goes, your css solution has solved the problem.

    Thank you so much.
Sign In or Register to comment.