X
Πατήστε εδώ για μετάβαση στην έκδοση της ιστοσελίδας για κινητές συσκευές.

Φόρουμ υποστήριξης

Change the size of the firefox logo

Δημοσιεύτηκε

The Firefox logo on the Startpage is 97x97 pixels, I want to make it bigger but if I use a bigger image it gets cropped. How can I change the logo size with CSS please?

The Firefox logo on the Startpage is 97x97 pixels, I want to make it bigger but if I use a bigger image it gets cropped. How can I change the logo size with CSS please?

Επιλεγμένη λύση

jscher2000 said

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

Yes that was it. I changed the code to:

.logo {  
	background: url(Images/ff200.png) no-repeat center !important;
	background-size: 180px !important;
	position: absolute;
	margin-bottom: 100px;
	display: inline-block !important;
   	height: 200px !important;
    	width: 200px !important;
	}

and it finally worked. Thankyou so much for the help.

Ανάγνωση απάντησης σε πλαίσιο 0
Παράθεση

Επιπρόσθετες λεπτομέρειες συστήματος

Εφαρμογή

  • Πλατφόρμα χρήστη: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Περισσότερες πληροφορίες

Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

The CSS I am using for the Startpage is:

:root{
  scrollbar-color: #323639 #202125;
  scrollbar-width: 50px; }

@-moz-document url('about:home'), url('about:newtab') {
    body {
        background-image: url(Images/ff5.jpg) !important;
    }
}


@-moz-document url('about:home'), url('about:newtab') {#newtab-search-text {
	background-color: rgb(40,40,40) !important;
	border-radius: 10px 10px 10px 10px !important;      
	border-color: CornflowerBlue  !important;
	border-width: 2px !important;
	font-size: 16px !important;
	font-family: Arial !important;
	color: CornflowerBlue   !important;
}


	  
@-moz-document domain() {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 95px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}
The CSS I am using for the Startpage is: <pre><nowiki>:root{ scrollbar-color: #323639 #202125; scrollbar-width: 50px; } @-moz-document url('about:home'), url('about:newtab') { body { background-image: url(Images/ff5.jpg) !important; } } @-moz-document url('about:home'), url('about:newtab') {#newtab-search-text { background-color: rgb(40,40,40) !important; border-radius: 10px 10px 10px 10px !important; border-color: CornflowerBlue !important; border-width: 2px !important; font-size: 16px !important; font-family: Arial !important; color: CornflowerBlue !important; } @-moz-document domain() { .logo-and-wordmark { margin-top: 140px; height: 20px; } .logo { background: url(Images/logo3.png) no-repeat center !important; background-size: 95px !important; position: absolute; margin-bottom: 50px; display: block; } .wordmark { visibility: hidden !important; position: absolute; margin-top:50px; display: none; } }</nowiki></pre>

Τροποποιήθηκε στις από το χρήστη cor-el

Σάς φάνηκε χρήσιμο; 0
Παράθεση
jscher2000
  • Top 10 Contributor
8633 λύσεις 70607 απαντήσεις
Δημοσιεύτηκε

On this site you can put <pre> before and </pre> after your code snippets to prevent characters like # from being interpreted as wiki syntax. I think this empty domain() isn't helping:

@-moz-document domain() {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 95px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}

Question: where is the Firefox logo you're referring to?

On this site you can put &lt;pre> before and &lt;/pre> after your code snippets to prevent characters like # from being interpreted as wiki syntax. I think this empty '''domain()''' isn't helping: <pre>@-moz-document domain() { .logo-and-wordmark { margin-top: 140px; height: 20px; } .logo { background: url(Images/logo3.png) no-repeat center !important; background-size: 95px !important; position: absolute; margin-bottom: 50px; display: block; } .wordmark { visibility: hidden !important; position: absolute; margin-top:50px; display: none; } } </pre> Question: where is the Firefox logo you're referring to?
Σάς φάνηκε χρήσιμο; 0
Παράθεση
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

Thanks for your help, the logo is on the StartPage albeit I removed the tiles and changed the logo to a darker version but even if I change the background size in the CSS it still crops the image. Do you think the domain() needs to be removed, if so how do I write it?

Thanks for your help, the logo is on the StartPage albeit I removed the tiles and changed the logo to a darker version but even if I change the background size in the CSS it still crops the image. Do you think the '''domain()''' needs to be removed, if so how do I write it?
Σάς φάνηκε χρήσιμο;
Παράθεση
jscher2000
  • Top 10 Contributor
8633 λύσεις 70607 απαντήσεις
Δημοσιεύτηκε

Χρήσιμη απάντηση

Is that the Developer Edition start page??

Anyway, your other rules have this restriction:

@-moz-document url('about:home'), url('about:newtab'){}

so I think that probably is what you intended instead of domain().

Is that the Developer Edition start page?? Anyway, your other rules have this restriction: @-moz-document url('about:home'), url('about:newtab'){} so I think that probably is what you intended instead of domain().
Σάς φάνηκε χρήσιμο; 1
Παράθεση
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

I got all the code from Google searches but here is the modified CSS

@-moz-document url('about:home'), url('about:newtab') {
    body {
        background-image: url(Images/ff5.jpg) !important;
    }
}

@-moz-document url('about:home'), url('about:newtab') {#newtab-search-text {
	background-color: rgb(40,40,40) !important;
	border-radius: 10px 10px 10px 10px !important;      
	border-color: CornflowerBlue  !important;
	border-width: 2px !important;
	font-size: 16px !important;
	font-family: Arial !important;
	color: CornflowerBlue   !important;
}
	  
@-moz-document url('about:home'), url('about:newtab') {   
   .logo-and-wordmark {
	  margin-top: 140px;
	  height: 20px;
    }
	  
	.logo {  
	background: url(Images/logo3.png) no-repeat center !important;
	background-size: 150px !important;
	position: absolute;
	margin-bottom: 50px;
	display: block;
	}
	   
   .wordmark {
	visibility: hidden !important;  
	position: absolute;
	  margin-top:50px;
	  display: none;
   }
}

but as you can see from the screenshot the background size increases the logo size but within a smaller container. I created the Startpage just to be different :)

I got all the code from Google searches but here is the modified CSS <pre>@-moz-document url('about:home'), url('about:newtab') { body { background-image: url(Images/ff5.jpg) !important; } } @-moz-document url('about:home'), url('about:newtab') {#newtab-search-text { background-color: rgb(40,40,40) !important; border-radius: 10px 10px 10px 10px !important; border-color: CornflowerBlue !important; border-width: 2px !important; font-size: 16px !important; font-family: Arial !important; color: CornflowerBlue !important; } @-moz-document url('about:home'), url('about:newtab') { .logo-and-wordmark { margin-top: 140px; height: 20px; } .logo { background: url(Images/logo3.png) no-repeat center !important; background-size: 150px !important; position: absolute; margin-bottom: 50px; display: block; } .wordmark { visibility: hidden !important; position: absolute; margin-top:50px; display: none; } } </pre> but as you can see from the screenshot the background size increases the logo size but within a smaller container. I created the Startpage just to be different :)
Σάς φάνηκε χρήσιμο;
Παράθεση
jscher2000
  • Top 10 Contributor
8633 λύσεις 70607 απαντήσεις
Δημοσιεύτηκε

Χρήσιμη απάντηση

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??
Σάς φάνηκε χρήσιμο; 1
Παράθεση
Δημοσιεύτηκε

Επιλεγμένη λύση

jscher2000 said

Maybe you are enlarging the background image but not the height and width of the element that the background applies to??

Yes that was it. I changed the code to:

.logo {  
	background: url(Images/ff200.png) no-repeat center !important;
	background-size: 180px !important;
	position: absolute;
	margin-bottom: 100px;
	display: inline-block !important;
   	height: 200px !important;
    	width: 200px !important;
	}

and it finally worked. Thankyou so much for the help.

''jscher2000 [[#answer-1215714|said]]'' <blockquote> Maybe you are enlarging the background image but not the height and width of the element that the background applies to?? </blockquote> Yes that was it. I changed the code to: <pre> .logo { background: url(Images/ff200.png) no-repeat center !important; background-size: 180px !important; position: absolute; margin-bottom: 100px; display: inline-block !important; height: 200px !important; width: 200px !important; } </pre> and it finally worked. Thankyou so much for the help.
Σάς φάνηκε χρήσιμο;
Παράθεση
magnetewanbooks 0 λύσεις 1 απαντήσεις
Δημοσιεύτηκε

I just want to see the FOX on my search page, either in white on white or whatever. What is the point of giving me this clever logo in a teeny tiny form way up in the left hand corner. I want him full size on my search page. He doesn't have to be in colour.

by the way, I like duck duck go. God, I'm sick of google.

I just want to see the FOX on my search page, either in white on white or whatever. What is the point of giving me this clever logo in a teeny tiny form way up in the left hand corner. I want him full size on my search page. He doesn't have to be in colour. by the way, I like duck duck go. God, I'm sick of google.
Σάς φάνηκε χρήσιμο;
Παράθεση
jscher2000
  • Top 10 Contributor
8633 λύσεις 70607 απαντήσεις
Δημοσιεύτηκε

Hi magnetewanbooks, the large centered colorful Firefox logo appears if you remove a few sections of the other content on the page such as Top Sites, Recommended by Pocket, or Highlights. I can't remember seeing the other logo recently. Is that the one used for the tutorial button?

Hi magnetewanbooks, the large centered colorful Firefox logo appears if you remove a few sections of the other content on the page such as Top Sites, Recommended by Pocket, or Highlights. I can't remember seeing the other logo recently. Is that the one used for the tutorial button?
Σάς φάνηκε χρήσιμο;
Παράθεση
cor-el
  • Top 10 Contributor
  • Moderator
17412 λύσεις 157274 απαντήσεις
Δημοσιεύτηκε

The Firefox icon in the top left corner is about the onboarding feature, see about:config

  • browser.onboarding.enabled

The large icon in the center is only displayed when you only enable the Web Search bar and hide all other content on the Firefox Home page like posted above.

The Firefox icon in the top left corner is about the onboarding feature, see about:config *browser.onboarding.enabled The large icon in the center is only displayed when you only enable the Web Search bar and hide all other content on the Firefox Home page like posted above. *https://support.mozilla.org/en-US/kb/hide-or-display-content-new-tab *https://support.mozilla.org/en-US/kb/customize-new-tab-page
Σάς φάνηκε χρήσιμο;
Παράθεση
Κάντε μια ερώτηση

Πρέπει να συνδεθείτε στο λογαριασμό σας για να απαντήσετε στις δημοσιεύσεις. Παρακαλούμε ξεκινήστε μια νέα ερώτηση, αν δεν έχετε ήδη λογαριασμό.