X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Change the size of the firefox logo

Kuphostiwe

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?

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 0
Isicaphuno

Eminye Imininingwane Yohlelo

Isisebenziso

  • I-ejenti Engumsebenzisi: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Eminye Imininingwane

Umnikazi wombuzo

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>

Okulungisiwe ngu cor-el

Ingabe lokhu kube usizo kuwena? 0
Isicaphuno
jscher2000
  • Top 10 Contributor
8687 izisombululo 71011 izimpendulo
Kuphostiwe

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?
Ingabe lokhu kube usizo kuwena? 0
Isicaphuno

Umnikazi wombuzo

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8687 izisombululo 71011 izimpendulo
Kuphostiwe

Impendulo Ewusizo

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().
Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Umnikazi wombuzo

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 :)
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8687 izisombululo 71011 izimpendulo
Kuphostiwe

Impendulo Ewusizo

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??
Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Isisombululo Esikhethiwe

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.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
magnetewanbooks 0 izisombululo 1 izimpendulo
Kuphostiwe

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.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8687 izisombululo 71011 izimpendulo
Kuphostiwe

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?
Ingabe lokhu kube usizo kuwena?
Isicaphuno
cor-el
  • Top 10 Contributor
  • Moderator
17467 izisombululo 157841 izimpendulo
Kuphostiwe

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
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.