X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

Change the size of the firefox logo

  • 10 replies
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by cor-el
பதிவிடப்பட்டது

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.

Read this answer in context 0
மேற்கோள்

Additional System Details

பயன்பாடு

  • User Agent: 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
8643 தீர்வுகள் 70721 பதில்கள்
பதிவிடப்பட்டது

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
8643 தீர்வுகள் 70721 பதில்கள்
பதிவிடப்பட்டது

உதவிகரமான பதில்

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
8643 தீர்வுகள் 70721 பதில்கள்
பதிவிடப்பட்டது

உதவிகரமான பதில்

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
8643 தீர்வுகள் 70721 பதில்கள்
பதிவிடப்பட்டது

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
17425 தீர்வுகள் 157456 பதில்கள்
பதிவிடப்பட்டது

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
இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.