Jump to content

Set custom background colours for any/all pages on my site with CSS

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hi guys,

Currently working on a client's site and want to have a custom background colour for each page on the site (currently orange).

The standard SqSp colour theme doesn't seem to be working/doing what I need.

How would I go about doing this with custom code?

Thanks!

Screen Shot 2023-06-13 at 9.23.18 PM.png

Screen Shot 2023-06-13 at 9.23.27 PM.png

Screen Shot 2023-06-13 at 9.23.34 PM.png

  • Replies 5
  • Views 349
  • Created
  • Last Reply

Top Posters In This Topic

Posted
2 hours ago, HLAVAC said:

The standard SqSp colour theme doesn't seem to be working/doing what I need.

In what way isn't it working? What are you trying to do?

Can you share your website URL?

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 2 weeks later...
Posted
On 6/22/2023 at 6:56 AM, HLAVAC said:

— https://echidna-echidna-dlzc.squarespace.com/

I mean when I click to assign and change the theme per block (and on the collection page) it doesn't change colour, it remains the same. Ideally I could find some custom code I can add to each page to assign it a unique colour in replacement of the orange (but keep the foreground yellow for logo, text, etc.)

What is password?

accesspasssword.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!)

  • Solution
Posted

Dreams

You can add to Dreams Page Header

<style>
  .section-background, .section-border {
    background-color: transparent !important;
}
section {
    background-color: #f1f !important;
}
</style>

Thoughts

Add to Thoughts Page Header

<style>
  .section-background, .section-border {
    background-color: transparent !important;
}
section {
    background-color: red !important;
}
</style>

About

Add to About Page Header

<style>
  .section-background, .section-border {
    background-color: transparent !important;
}
section {
    background-color: brown !important;
}
</style>

 

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!)

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.