How do I change the logo that displays in private browsing mode? I've tried editing userContent but its not working.
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.
Bewurke troch cor-el op
Keazen oplossing
@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;}
}
Dit antwurd yn kontekst lêze
👍 0
Alle antwurden (7)
I tried formatting the code in markdown to post here. Obviously that did not work.
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.
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; }
}
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;}
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;}
}
Keazen oplossing
@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;}
}
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.