Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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 

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

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.