Jump to content

isolating pages to change the look of one section of the site - 7.0

Go to solution Solved by Ruth,

Recommended Posts

Hi - I've created a section of the school's website (Post 16) to look different to the rest of the site / different logo etc...  I've added this code to each of the pages in the post 16 section:

<style>.has-logo-image .Header-branding img{content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); 
background-size: contain; background-repeat: no-repeat; background-position: center}</style>

<style>
.Main {background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>h1 {color: #314f66;}</style>

<style>.Header-inner--bottom {background-color: #314f66;} !important; </style>
<style>.Header-inner--top{background-color: #929292;} !important; </style>

However when I navigate around the site, the new format is following to area where it shouldn't be. Works great when checking through the backend , but when viewing as a user it's not working unless you keep refreshing the page.

Can anyone help please?

 

Lower / main school should be red and gold, post 16 pages, blue and grey

 

Thank you in advance

Screenshot 2023-07-13 at 18.11.15.png

Screenshot 2023-07-13 at 18.10.55.png

Link to comment

I assume you are adding this to the individual pages header code injection? I don't actually see it working anywhere currently.

I noticed a couple of errors in your code towards the end, so I've cleaned that up.

<style>
.has-logo-image .Header-branding img {  content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
</style>

<style>
.Main {
  background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>
  h1 {color: #314f66;}
</style>

<style>.Header-inner--bottom {background-color: #314f66 !important;} </style>
<style>.Header-inner--top{background-color: #929292 !important;}</style>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

I assume you are adding this to the individual pages header code injection? I don't actually see it working anywhere currently.

I noticed a couple of errors in your code towards the end, so I've cleaned that up.

<style>
.has-logo-image .Header-branding img {  content:url(https://static1.squarespace.com/static/61093bde32e48d7f4093051d/t/64afdbaa9871ca44d701a46c/1689246635441/POST16+.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
</style>

<style>
.Main {
  background-color: rgba(161,192,212,.5) !important;
}
</style>

<style>
  h1 {color: #314f66;}
</style>

<style>.Header-inner--bottom {background-color: #314f66 !important;} </style>
<style>.Header-inner--top{background-color: #929292 !important;}</style>

 

Thanks, Ziggy - I've updated the code - much appreciated but it's still not working properly.  If you go to the Post 16 tab, and refresh the page it will turn blue.  However if you navigate away to a different part of the website, the  blue will follow you unless you refresh the browser again.  Yes, I've added the code to Page >settings > Advanced for each of the pages in the Post 16 section.  I'm not really sure what else to do - all advice gratefully received,

Cheers

Ruth

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...

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.