Jump to content

Changing the background colour of one page on my website

Recommended Posts

Hi,

I have been trying to change the background colour of a single page on my website to yellow. I have used the page header code injection in the advanced page settings to add CSS to the page to change the background colour, however, it's still got a white background.

The code I added is below:

<style>
.Header--top {
  background: yellow;
}
.Main {
  background: yellow;
}
.Footer {
  background: yellow;
}
</style>

I think there might be an error in the CSS. I'm not a coder and I used a website to generate this code.

If anyone knows where I am going wrong, it would be great to know to change the colour.

Thanks

Link to comment
  • Replies 4
  • Views 728
  • Created
  • Last Reply
3 hours ago, RedTrainBlog said:

Hi,

I have been trying to change the background colour of a single page on my website to yellow. I have used the page header code injection in the advanced page settings to add CSS to the page to change the background colour, however, it's still got a white background.

The code I added is below:

<style>
.Header--top {
  background: yellow;
}
.Main {
  background: yellow;
}
.Footer {
  background: yellow;
}
</style>

I think there might be an error in the CSS. I'm not a coder and I used a website to generate this code.

If anyone knows where I am going wrong, it would be great to know to change the colour.

Thanks

What is your site url, seems like the color has been covered by other element

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
48 minutes ago, RedTrainBlog said:

Thanks for getting back to me. The URL of the page I am trying to make yellow is:

http://www.redtrainblog.com/home

I'm not sure what you mean by "the color has been covered by other element" can you explain more?

Thanks

Alastair

Try

<script>
	#site {
        background: red;
    }
</script>

Add it to individual page code injection, there is a gear icon on Pages item, click Advanced on the popup

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@RedTrainBlog If you use Personal Plan, add this to Design > Custom CSS

body#collection-576ad46c893fc053dd0c0a9c #site {
    background: green;
}

Also, your home page has very long content. You should consider adding a back to top button.

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.