Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I change the logo that displays in private browsing mode? I've tried editing userContent but its not working.

more options

I've been editing userContent.css and userChrome.css for the last couple days and I've got a lot of stuff working. I can't however figure out how to change the logo on about:privatebrowsing to be a custom image. Here is my current code:

/*** PRIVATE BROWSING ***/

@-moz-document url(about:privatebrowsing) {

/* Changes the logo on the home screen*/
.logo {
  background: url("Firefox Halo with Paw.png") no-repeat center center !important;
}

.logo-and-wordmark {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 49px !important;
}

/* Changes the home screen color */
html.private {
    --in-content-page-background: #261010 !important;}
}

I've tried using a relative path to the image for the non-private browsing section, but since private browsing is a protected area, I can't load in the image from a link.

I've been editing userContent.css and userChrome.css for the last couple days and I've got a lot of stuff working. I can't however figure out how to change the logo on about:privatebrowsing to be a custom image. Here is my current code: <pre> /*** PRIVATE BROWSING ***/ @-moz-document url(about:privatebrowsing) { /* Changes the logo on the home screen*/ .logo { background: url("Firefox Halo with Paw.png") no-repeat center center !important; } .logo-and-wordmark { align-items: center !important; display: flex !important; justify-content: center !important; margin-bottom: 49px !important; } /* Changes the home screen color */ html.private { --in-content-page-background: #261010 !important;} } </pre> I've tried using a relative path to the image for the non-private browsing section, but since private browsing is a protected area, I can't load in the image from a link.

Edeziri site na cor-el

Asịsa ahọpụtara

@jscher2000 your solution worked! Thank you. One thing I did notice though is that the code pasted below has to be above the moz-document for pages like about:home and about:new tab. I'll update this code as I figure out more parts of styling userContent.css for those who are trying to do this as well.

Here is the final code I used:

@-moz-document url(about:privatebrowsing) {


/* Hides the "You're in private browsing mode" dialog */
.info {
    display: none !important;
}


/* Changes the logo on the private browsing home screen */
html.private .logo {background-image: url(" RELATIVE IMAGE PATHNAME HERE") !important;}



/* Changes the color of the wordmark */
.wordmark {
  fill: #b24747 !important;
}



/* Centers logo and wordmark */
.logo-and-wordmark {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 49px !important;
}



/* Changes the home screen color */
html.private {
    --in-content-page-background: #1a1a1a !important;}
}
Gụọ azịza a na nghọta 👍 0

All Replies (7)

more options

I tried formatting the code in markdown to post here. Obviously that did not work.

more options

seirinblu said

I tried formatting the code in markdown to post here. Obviously that did not work.

Yes, it's easiest to use <pre> before and </pre> after your code than to preface very line with an extra space.

/*** PRIVATE BROWSING ***/

@-moz-document url(about:privatebrowsing) {
  /* Changes the logo on the home screen*/
  .logo {
    background: url("Firefox Halo with Paw.png") no-repeat center center !important;
  }
  .logo-and-wordmark {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 49px !important;
  }
  /* Changes the home screen color */
  html.private {
    --in-content-page-background: #261010 !important;
  }
}

Could you check the following preference:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box in the page, type or paste moz-d and pause while the list is filtered

(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true

Does that help?

More info on about:config: Configuration Editor for Firefox.

more options

Hmmmm that didn't work. It's worth noting that when I put url(about:privatebrowsing) with the rest of the stuff in userContent.css, the image will load in private browsing. I don't want the same image to load for about:home and about:private browsing, but that seems to be the only way to get an image to load into private browsing. If you can think of a way to make it so that I have a specific image for one but the code is still within the the main code block below I would really appreciate it.

@-moz-document url(about:newtab), url(about:home), url(about:preferences), url(about:blank), url(about:privatebrowsing) { 



/* Makes the search bar on the home screen round with red text and a red border when not clicked */
#newtab-search-text,
  #searchSubmit{
    fill: #b24747 !important;
    border-radius: 48px !important;
    border-color: #b24747 !important;
    box-shadow: none !important;
    background-color: none !important;
    color: none !important;
    font-family: helvetica !important
  }
  


/* Changes the color of the glow when you click the search bar on the home screen */
.search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus {
  border: 3px solid #B24747 !important;
  box-shadow: 0 0 7px #993d3d !important;
  }


/* Changes the background color inside of the search bar */
#newtab-search-text{
  background-color: #1a1a1a !important;
  color: #b24747 !important;
}



/* Changes the gear color and removes the hover */
.prefs-button button {fill: #b24747 !important;}

.prefs-button button:hover, .prefs-button button:focus {
    background-color:  transparent !important; }	
 


/* Turns of search suggestions on the home screen */
.contentSearchSuggestionTable {display: none !important;}



/* Changes the home screen color */
body{ background-color: #1a1a1a !important }



/* Centers logo and wordmark */
.search-wrapper .logo-and-wordmark {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 49px; }




/* Makes it so that no border appears around the search arrow */
.search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
      background-color: transparent !important;
      cursor: pointer !important; }
.search-wrapper .search-button:active {
      background-color: transparent !important; }


/* Changes the logo on the home screen*/
.logo {background-image: url("Firefox Halo with Paw.png") !important;}



/* Changes the color of the wordmark */
.wordmark { fill: #B24747 !important;}
}



/* Makes the search bar on the home screen round with red text and a red border when not clicked */
#newtab-search-text,
  #searchSubmit{
    fill: #b24747 !important;
    border-radius: 48px !important;
    border-color: #b24747 !important;
    box-shadow: none !important;
    background-color: none !important;
    color: none !important;
    font-family: helvetica !important
  }



/* Changes the color of the glow when you click the search bar on the home screen */
.search-wrapper .search-inner-wrapper:active input, .search-wrapper input:focus {
  border: 3px solid #B24747 !important;
  box-shadow: 0 0 7px #993d3d !important;
  }



/* Changes the background color inside of the search bar */
#newtab-search-text{
  background-color: #1a1a1a !important;
  color: #b24747 !important;
}



/* Turns of search suggestions on the home screen */
.contentSearchSuggestionTable {display: none !important;}



/* Centers logo and wordmark */
.search-wrapper .logo-and-wordmark {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 49px; }

}
more options

On about:privatebrowsing, the html tag has class="private" so you could try:

/* Changes the logo on the home screen*/
.logo {background-image: url("Firefox Halo with Paw.png") !important;}
  /* For about:privatebrowsing */
html.private .logo {background-image: url("private-image.png") !important;}
more options

Code for about pages needs to be placed in userContent.css.

Doesn't this code work for the about:privatebrowsing page ?

@-moz-document url(about:privatebrowsing){
.logo {background-image: url("Firefox Halo with Paw.png") !important;}
}
more options

Asịsa Ahọpụtara

@jscher2000 your solution worked! Thank you. One thing I did notice though is that the code pasted below has to be above the moz-document for pages like about:home and about:new tab. I'll update this code as I figure out more parts of styling userContent.css for those who are trying to do this as well.

Here is the final code I used:

@-moz-document url(about:privatebrowsing) {


/* Hides the "You're in private browsing mode" dialog */
.info {
    display: none !important;
}


/* Changes the logo on the private browsing home screen */
html.private .logo {background-image: url(" RELATIVE IMAGE PATHNAME HERE") !important;}



/* Changes the color of the wordmark */
.wordmark {
  fill: #b24747 !important;
}



/* Centers logo and wordmark */
.logo-and-wordmark {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 49px !important;
}



/* Changes the home screen color */
html.private {
    --in-content-page-background: #1a1a1a !important;}
}
more options

seirinblu said

One thing I did notice though is that the code pasted below has to be above the moz-document for pages like about:home and about:new tab.

Maybe there's an unclosed } somewhere. You could could add a couple extras to make extra sure that the earlier blocks are closed.