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
引用

額外的系統細節

應用程式

  • 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
8634 個解決方法 70618 個答案

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
8634 個解決方法 70618 個答案

有幫助的回覆

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
8634 個解決方法 70618 個答案

有幫助的回覆

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
8634 個解決方法 70618 個答案

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
17413 個解決方法 157295 個答案

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
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題