Jump to content

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

Recommended Posts

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
  • Replies 3
  • Views 307
  • Created
  • Last Reply

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.