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

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


Question

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>

Link to comment

3 answers to this question

Recommended Posts

  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Link to comment
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...