Changing the Background Color on Cart Page and Small Adjustments for Squarespace 7.0

Site URL: http://thehouseofredvelvet.com/store

Hello,

1. I am looking to fine tune the PURCHASE button on the bottom of the page on my website. I added code to change the background color to white as it is easier to read for a store. But, the PURCHASE button got messed up. 

2. I also need to change the cart page to white as well. Not sure if the link works, but after you add an item and go to purchase, the page should be white as well.

https://secure.squarespace.com/checkout?cartToken=dgrM46jTwmaL9p2GcYO7YIgG_CIxs4tA-8IuCcOm

Thank you.

This is the CODE I have in the Store page:

<style>
#overlayNav * {color: white!important}

#siteWrapper {background-color : white!important;}

#mainNavWrapper nav a, #mainNavWrapper nav a:visited, #mainNavWrapper nav label {color: #ddd9d9!important}

body * {color: black!important;}

#preFooter p, p *, h2, h3 {color: white!important}

#footer * {color: white!important}

.sqs-cookie-banner-v2-text *, .sqs-cookie-banner-v2-acceptWrapper * {color: white!important}

#mainNavigation div a {color: #ffffff !important;}

#mainNavigation div a:hover {color: hsl(0, 69%, 37%) !important;}

#mainNavigation div.active a {color: hsl(0, 69%, 37%) !important;}

#footer .nav-wrapper *:hover {color: hsl(0, 69%, 37%)!important}

.small-button-style-outline .sqs-block-button .sqs-block-button-element--small {color: white!important;}

.small-button-style-outline .sqs-block-button .sqs-block-button-element--small:hover {color: black!important;}

.newsletter-form-button-label {color: white!important;}

.sqs-editable-button-shape:hover * {color: black!important;}
</style>

For one. Add the following to your existing style tag.

body:not( .button-style-default ) .sqs-editable-button,
body:not( .button-style-default ) .sqs-editable-button-color {

  border-color : black;
  
  }

For two. Do you want to change the cart page or the checkout? You mention both. The checkout page can not be modified. It is a SS security feature.

Let us know how it goes.

6 hours ago, creedon said:

For one. Add the following to your existing style tag.

body:not( .button-style-default ) .sqs-editable-button,
body:not( .button-style-default ) .sqs-editable-button-color {

  border-color : black;
  
  }

For two. Do you want to change the cart page or the checkout? You mention both. The checkout page can not be modified. It is a SS security feature.

Let us know how it goes.

Hello,

That worked! Thank you. I guess it is the Checkout page. The one you go to next right after you hit the PURCHASE button. So that one has to remain black? I guess that is ok.

Thank you again.

Ah I see. It appears you have express checkout turned on so you go directly to the checkout page, bypassing the cart.

Yes the checkout page has to remain as is as SS doesn't not allow changes. Well except for what they provide themselves via the way of settings. Which are few and not related to styling.