Change background color to my store page only

Site URL: http://melissawebb.com

Hello - I want to change the background only on my store page from black to white.

https://www.melissawebb.com/delivery-menu

Not a CSS expert at all so any help appreciated

This should be able to assist you in making the specific change:

#collection-5e7116a5d59115318c711877
#page {background-color: #FFFFFF;}

Change main content only or all (main content, header, footer,..)?

tuanphan  - all content please. I'm a complete novice so will need the entire CSS code to put into the page

Add to Page Settings > Advanced > Header

<style>
  /* main content */
  div#siteWrapper {
    background: white;
}
  /* header */
  header#header {
    background: white;
}
  /* footer */
  footer#footer {
    background: white;
}
  div#preFooter {
    background: white;
}
</style>

Thanks Tuanphan. Exactly what I needed 😀

Hi @tuanphan Could you tell me what I need to do to change the background colo rfor every page / for the entire website? I have the color code. I just don't know what to paste into CSS. 🤓 

13 hours ago, Tuelay said:

Hi @tuanphan Could you tell me what I need to do to change the background colo rfor every page / for the entire website? I have the color code. I just don't know what to paste into CSS. 🤓 

Add to Home  >Design > Custom CSS

 /* main content */
  div#siteWrapper {
    background: white;
}
  /* header */
  header#header {
    background: white;
}
  /* footer */
  footer#footer {
    background: white;
}
  div#preFooter {
    background: white;
}

Hello! @DPruitt @tuanphan I was wondering if you could help me with something similar. My website has a black background but I'm looking to make all the pages for my new shop white, as the product images have a white background and want this to look seamless. 

www.voguekitchens.co.uk/shop

@Shwena

Do you want the whole page white? Or just the main content area where the products are shown, leaving the header and footer black?

@creedon Would be great if I could have the whole page white. Would I be able to revert all the fonts to be darker as they're all currently white against the black background at the moment

@Shwena

We'd have to come up with some CSS to change the color of the fonts as well.

Give us some time to see what we can come up with. Bump this thread if we don't get back to you in a couple of days.

@Shwena

You'll need to redo your elfsight code in whatever tools elfsight gives you.

@Shwena

I wouldn't say this is 100% but it's a good start, I think! 🙂

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /*
  
    begin site black themed, store page to white
    
    Version         : 0.1d0
    
    SS Version      : 7.0
    
    v7.0 Templates  : Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed,
                      Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                      Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                      Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                      Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                      Stella, Thorne, Vow, Wav, West )
                      
                      your template is not listed? then it is not currently
                      supported
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    no user serviceable parts below
    
    */
    
    .Header-branding-logo {
    
      -webkit-filter : invert( 100% );
      filter : invert( 100% );
      
      }
      
    .Header--bottom,
    .Intro,
    .Main,
    .Footer
    
      {
      
        background-color : white;
        
        }
        
    .tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder-item,
    .Intro,
    .ProductList h1.ProductList-title,
    .ProductList .product-price,
    .Footer-nav a
    
      {
      
        color : black;
        
        }
        
    .tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-item,
    .tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder-item:hover
    
      {
      
        color : #36454f; /* Charcoal */
        
        }
        
    .tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-item:hover {
    
      color : black;
      
      }
      
    .Footer-nav a:hover {
    
      color : rgba( 0, 0, 0, 0.5 );
      
      }
      
    .social-icons-color-white.social-icons-style-regular .sqs-use--icon {
    
      fill : black;
      
      }
      
    .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover .sqs-use--icon {
    
      fill : rgba( 0, 0, 0, 0.4 );
      
      }
      
    .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper:hover .sqs-use--icon {
    
      fill : black;
      
      }
      
    .ProductItem-additional {
    
     color : black;
      
      }
      
    /* end site black themed, store page to white */
    
  </style>

This is specific to the poster's need.

Let us know how it goes.

@creedon Ahh this is perfect! Thank you so much for you help - massively appreciated! 😄 Only thing is the main logo at the top of the page is now black across all other pages on the website instead of white when you go from the shop page to any other page. Is there a way to change this?

Quote

Only thing is the main logo at the top of the page is now black across all other pages on the website instead of white when you go from the shop page to any other page. Is there a way to change this?

Please put the code in Store Settings > Advanced > Page Header Code Injection for the store page. When the code is there is will only effect the store page.