Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


sanjna

Question

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.

Edited by sabri
retag
Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

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;
}

Edited by LFortin
Link to post
  • 0

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 post
  • 1

@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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...