Jump to content

Different logos on home and other page(s)

Recommended Posts

Site URL: https://www.tonetension.com/

tonetension.com

password: erikwiss

 

How do I put this logo (uploaded to the css custom files): https://static1.squarespace.com/static/5d85d4c22d59120f5fe31180/t/5e36955d9995006209f21812/1580635485836/Tone+Tension+Bold+white.jpg

Onto this specific page: https://www.tonetension.com/full-client-list ?

I've tried a few different scripts circulating on the forum, with no success so far. 

Thanks!!

 

Link to comment
  • Replies 9
  • Views 724
  • Created
  • Last Reply

Add to Page Settings > Advanced > Header

<style>
  a.Header-branding img {
    visibility: hidden;
}
  a.Header-branding {
    background-image: url(https://static1.squarespace.com/static/5d85d4c…/t/5e36955…/1580635485836/Tone+Tension+Bold+white.jpg);
    visibility: visible;
    background-size: cover;
}
</style>

image.thumb.png.59c6520adf35afcc86df6fbde2e51aa0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hey  @tuanphan

I have two questions related to this specific thread and the header in general.  

1. Can you provide the instructions and code for my template as well?  I can stumble my way through but I don't actually know CSS so the instructions will be helpful.  The site is :
https://grape-plum-jrlb.squarespace.com
psd: PreviewER

I will have two different logo files.  You can see the one on the Home page and most others.  But, the Blog and Recent Projects will have a full color version.

2. I would also like to put a gradient that fades to 0% at the bottom to help the nav items stand out a bit more.  Attached is a screenshot of a site that does this.  I'd like to be able to insert it as some sort of overlay on the header instead of having to do it in Illustrator on the image itself and upload it.  Is that possible?

 

Thanks, appreciate the help.

Screen Shot 2020-04-01 at 10.38.28 PM.png

Link to comment
18 minutes ago, Justen said:

Hey  @tuanphan

I have two questions related to this specific thread and the header in general.  

1. Can you provide the instructions and code for my template as well?  I can stumble my way through but I don't actually know CSS so the instructions will be helpful.  The site is :
https://grape-plum-jrlb.squarespace.com
psd: PreviewER

I will have two different logo files.  You can see the one on the Home page and most others.  But, the Blog and Recent Projects will have a full color version.

2. I would also like to put a gradient that fades to 0% at the bottom to help the nav items stand out a bit more.  Attached is a screenshot of a site that does this.  I'd like to be able to insert it as some sort of overlay on the header instead of having to do it in Illustrator on the image itself and upload it.  Is that possible?

 

Thanks, appreciate the help.

1. Add to Page Settings > Advanced > Header

Each page has page 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;
    background-position: center center;
}
</style>

 

2. I will check tonight

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks @tuanphan

And thank you for the instructions!  Very helpful.  

Just to confirm one thing.  I only need to use this code injection on the pages that are going to be different that the main header that I have set?  Right?  Meaning, I don't do this on every page.  Only the pages in those two sections that will be different (Blog & recent Projects)?

Link to comment
30 minutes ago, Justen said:

Thanks @tuanphan

And thank you for the instructions!  Very helpful.  

Just to confirm one thing.  I only need to use this code injection on the pages that are going to be different that the main header that I have set?  Right?  Meaning, I don't do this on every page.  Only the pages in those two sections that will be different (Blog & recent Projects)?

Which Page Header you insert, it only affects that page only.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

2. I would also like to put a gradient that fades to 0% at the bottom to help the nav items stand out a bit more.  Attached is a screenshot of a site that does this.  I'd like to be able to insert it as some sort of overlay on the header instead of having to do it in Illustrator on the image itself and upload it.  Is that possible?

Can you share link to site in screenshot? and nav gradient or banner gradient? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Hi @tuanphan, Apologies I never received a notification and didn't realize you responded on that one.  Here is the link for the example I mentioned.  https://www.plexpod.com

And, I'm not really sure if it would be a nav or banner gradient.  I guess it would be whatever would accomplish what I'm trying to accomplish.  Here is the issue I'm having.  The site I'm working on: (https://grape-plum-jrlb.squarespace.com pswd: PreviewER) has a logo that is hard to make look good with the rest of the design.  It has a 'cracked' styling that makes it look really busy and difficult to view with anything happening behind it.  So, my thought is if I could add a gradient behind it that might be approx 70% opacity on top and fade to 0% opacity on the bottom.  That would still allow some of the background image to show through while giving a darker and more muted background for the logo (and nav) to sit on without having to put a solid color background.

Link to comment
On 4/17/2020 at 5:26 AM, Justen said:

Hi @tuanphan, Apologies I never received a notification and didn't realize you responded on that one.  Here is the link for the example I mentioned.  https://www.plexpod.com

And, I'm not really sure if it would be a nav or banner gradient.  I guess it would be whatever would accomplish what I'm trying to accomplish.  Here is the issue I'm having.  The site I'm working on: (https://grape-plum-jrlb.squarespace.com pswd: PreviewER) has a logo that is hard to make look good with the rest of the design.  It has a 'cracked' styling that makes it look really busy and difficult to view with anything happening behind it.  So, my thought is if I could add a gradient behind it that might be approx 70% opacity on top and fade to 0% opacity on the bottom.  That would still allow some of the background image to show through while giving a darker and more muted background for the logo (and nav) to sit on without having to put a solid color background.

I think I answered on another post

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.