Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Want different logo on homepage than all other pages


talya_pdx

Question

16 answers to this question

Recommended Posts

  • 0

To change logo on One Page, add this code to Page Settings > Advanced > Header

<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

Link to comment
  • 0
On 3/7/2020 at 3:00 AM, coindisplays said:

Hi @tuanphan, I want to change the logo on only one page of my site.  Is this the code that I need?

On this page of my site, I would like to change the logo that you see there at the top to a different one.

https://www.coindisplays.com/home-goods-and-decor

If possible, where do I load the new logo?

Thanks,

Paul

<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

Link to comment
  • 0

Hi @tuanphan

Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page".

I also need to know how to center the logo. 

I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct?

Link to comment
  • 0
3 hours ago, peterbjerg said:

Hi @tuanphan

Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page".

I also need to know how to center the logo. 

I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct?

above code for SS 7.1, one page. So yes, you can use on client's site.

Center logo? You mean left-right menu, center logo?

you can upload image via this guide https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

the image has url yoursite.com/s/image

eg: beaverhero.com/s/beach.png

Link to comment
  • 0

@tuanphan I tried, but it did not work. 

Site: https://arenastrategy.squarespace.com/cover-page

Password: Arenasite

All together, the exiting code for this page is: 

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}

  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}

  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}

  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}

</style>

 

ADDING your code, but with link to my image,  looks like this, but didnt work 😞 Maybe you can help?

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}
  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}
  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}
  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

 

 

Link to comment
  • 0

add !important to after

background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png) !important;

image.thumb.png.507b726c0544bc40e231b8823f786b6b.png

Link to comment
  • 0
On 3/2/2020 at 12:50 PM, tuanphan said:

To change logo on One Page, add this code to Page Settings > Advanced > Header


<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

Hi there! 

I added this code and it worked for my 7.1 site however the very bottom of the logo has been chopped off.

Do you know why this might be? Is there anyway to fix this?

The white one is the new one that was coded in and the blue one is the original.

Screenshot 2020-04-06 at 19.25.33.png

Screenshot 2020-04-06 at 19.25.23.png

Link to comment
  • 0
14 hours ago, Ned said:

Hi there! 

I added this code and it worked for my 7.1 site however the very bottom of the logo has been chopped off.

Do you know why this might be? Is there anyway to fix this?

The white one is the new one that was coded in and the blue one is the original.

 

 

edit background-size: cover

to

background-size: contain;

if it doesn't work, can you share link to your site/which plan do you use? (personal or business)

Link to comment
  • 0

Hi @tuanphan,

Thanks for your great insights!

I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help?

Page:

https://www.valleyfoundation.nl/

Current code injection:

<style>
  a.Header-branding img {
    visibility: hidden;
}
  a.Header-branding {
    background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png);
    visibility: visible;
    background-size: cover;
}
</style>

Thank you so much!!!

Link to comment
  • 0

 

3 hours ago, Celina said:

Hi @tuanphan,

Thanks for your great insights!

I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help?

Page:

https://www.valleyfoundation.nl/

Current code injection:


<style>
  a.Header-branding img {
    visibility: hidden;
}
  a.Header-branding {
    background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png);
    visibility: visible;
    background-size: cover;
}
</style>

Thank you so much!!!

@Celina I have the same issue. In my case, it shows up in the browser I am logged into. When I try to open the page on some other computer, it doesn't work.  

Link to comment
  • 0
21 hours ago, Celina said:

Hi @tuanphan,

Thanks for your great insights!

I'm wondering if you could perhaps help me tweak the above mentioned code so that is doesn't override all my pages.. I have a logo with white text on the homepage and grey text for all other pages, but with this css injection i only get the desired result after refreshing each page. Can you help?

Page:

https://www.valleyfoundation.nl/

Current code injection:


<style>
  a.Header-branding img {
    visibility: hidden;
}
  a.Header-branding {
    background-image: url(https://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.pnghttps://static1.squarespace.com/static/5cbb7cba9b8fe83b89278d3d/t/5eb963b779d8322ad168a5db/1589207991895/Valley+logo_nieuw_wit.png);
    visibility: visible;
    background-size: cover;
}
</style>

Thank you so much!!!

 

17 hours ago, Nimosa said:

 

@Celina I have the same issue. In my case, it shows up in the browser I am logged into. When I try to open the page on some other computer, it doesn't work.  

Disalbe Ajax Loading. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

Link to comment
  • 0

@tuanphan Hello! Your code worked for me for having your example image of the coffee beans, but when I tried to use my own image it dosnt work. I have uploaded the images to my custom css files in Design > Custom CSS and tried to use that URL but it didnt work. I also followed the guide you shared ( https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files?_ga=2.126154952.473549274.1626051893-1584433839.1621909610&_gac=1.191221976.1626051893.Cj0KCQjwwLKFBhDPARIsAPzPi-JzBek1AdzIUjPWwC2VN2dGjeIKyA2lD95ZPOb9NRWgiOdbAgp_z6saArIIEALw_wcB ) but was not able to figure it out. 

 

This is the image I would like it to be 

The site is https://capybera-bronze-jlt5.squarespace.com/ password is 'master'

Location master (1).png

Link to comment
  • 0
On 7/12/2021 at 10:06 AM, BONICA said:

@tuanphan Hello! Your code worked for me for having your example image of the coffee beans, but when I tried to use my own image it dosnt work. I have uploaded the images to my custom css files in Design > Custom CSS and tried to use that URL but it didnt work. I also followed the guide you shared ( https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files?_ga=2.126154952.473549274.1626051893-1584433839.1621909610&_gac=1.191221976.1626051893.Cj0KCQjwwLKFBhDPARIsAPzPi-JzBek1AdzIUjPWwC2VN2dGjeIKyA2lD95ZPOb9NRWgiOdbAgp_z6saArIIEALw_wcB ) but was not able to figure it out. 

 

This is the image I would like it to be 

The site is https://capybera-bronze-jlt5.squarespace.com/ password is 'master'

Location master (1).png

Which image url did you insert? Can you paste full code here? We can check easier.

You can also use this code

<style>
   .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://beaverhero.com/wp-content/uploads/2021/07/newlogo-min.png);
}
</style>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...