How to permanently change Firefox new tab page CSS?

Question

So when I open a new tab page in Firefox, or the private browsing new tab page, I can edit the CSS if I go into inspect element.

I want to change the CSS permanently, so that when I open Firefox again, the changes I made are still there.

As an example, when I open a private browsing tab, it has the Firefox logo, the Firefox wordmark, the search bar, and then the small message at the bottom. I can use inspect element to change what these things display, but it only lasts as long as the page is open. I want to keep the changes there.

I have a customized userContent.css file with some changes made already, but my issue is that some of the things I'm trying to change aren't working.

Here is where the problem is:

.logo {
    background-color: rgba(0, 0, 0, 0);
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url("file/path/to/image.png");
    background-origin: padding-box;
    background-clip: border-box;
    background-size: 96px;
    display: inline-block;
    height: 96px;
    width: 96px;
}

When I edit the CSS in inspect element, I can change the Firefox logo to something else without issue, but when I try to do it in here, it doesn't work.

Note that the following does work:

.logo {
    display: none !important;
}

It correctly removes the logo entirely. So why doesn't my CSS up there work? These changes work in inspect element, so why not in userContent.css?

My goal is to 1) change the Firefox logo and wordmark on the new tab and private browsing tab to another image (.logo and .wordmark) 2) change the private browsing tab notice thing to say something else. I don't need anything more complicated. Just a permanent version of going into inspect element and changing the file paths of the images for goal 1 and the HTML content of the notice for goal 2.

NB: I have given Firefox the ability to load local images. Loading local images in inspect element works fine. Loading local images in userContent.css in and of itself appears to be fine because I do that in another class. Doing this for .logo and .wordmark specifically doesn't work for some reason.

Answer 1

userContent.css is loaded before anything else so it'll get overwritten by the default css. display: none !important; has !important on it so it won't get overwritten. You would need to add !important on each style you want to keep.

To change the text inside the notice, you can hide the visibility of the p and add a ::before pseudo selector to add your own content.

html.private #info-body {
   visibility: hidden;
}

html.private #info-body::before {
    content: "Your text here" !important;
    visibility: visible !important;
}