Jump to content

How to change background colour of one only page (being used in an index page)?

Recommended Posts

Hi

My homepage is an index page comprising of 3 pages. Im trying to change the background colour of just one of the page.

I have tried several suggestions in various answers in the forum although none seem to work.

I am using the following code which changes the colour when im viewing that page alone, although when i view the homepage it does not reflect the changed colour.


.collection-[id] #page { background-color: [color #]; }

Your expert help is much appreciated.

Im working Bryant template.

Link to comment
  • Replies 6
  • Created
  • Last Reply
  • 2 months later...

Needed this on my site www.farmoremarketing.com. In the index pages the different pages are div tags. Inspect the section of your page you want to change and find the id. Then just change the background using CSS.


#yourPageId {
 background-color:yourColor;
}

If you want it to be an image the css looks like


#yourPageId {
 background-image:url("yourImageUrl");
 background-size:cover;
 background-position:center;
}

Link to comment
  • 5 months later...

Hi thereThank you for this.

I am able to use this code and when I check the page in particular it does change the bg colour. However, when I navigate back to my homepage in which this page sits as part of an index - the colour is not changed.

Any idea what needs to be added to the code to make it work in an index?

Many thanks!

Link to comment
  • 9 months later...

@emfawcett I hope you solved this long ago, but updating for anyone who comes across the thread! I'm using the Pacific template but this is applicable to all. If you inspect the page code on the index page you're working with, you'll see there is a div above the page content with id "[name of your page]-section".

alt text

I injected this code on the index page (not the actual page you're trying to change) :


<style>
#collection-57e8cfb7414fb52bddda59ff #get-on-our-vip-list-section {
background-color:#34b9ec; 
}
</style>

screen-shot-2016-10-10-at-72122-pm.png.41017508c420b602bfe2dfdfd61676d3.png

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.