Webshop page custom colors

Hi there!

Kinda new to Squarespace and running into a few issues.

We're Monster Club, the most relaxed trading card game in the world. And we're setting up a new website through Squarespace (shhh please don't tell anyone yet ;-))

The context:
On our old website editor we could easily change the colors of each individual product page. Yet on Squarespace the whole website and all product pages are affected by the same color palette. However! There is the possibility on Squarespace to do some CSS customizations. And boy did we try...

The issue:
This issue is about this page: https://helicon-flatworm-ehcb.squarespace.com/shop/p/spring-bowl-rltkk-jy5sr-fjw6l-a9had-m6msp-zkjnh (password is 'test')
And here's what we're trying to make it look alike: https://www.themonsterclubcorporation.com/card-shop/more-games/monster-club-poker-cards/

We've been trying for hours to make all text on this page black. And to turn the background white. But without much success... Thus we're here.

What we've tried so far:

1. Adding custom css to the entire site making sure it only affects 'section[data-section-id="64a728e77ad8c13c96e6116f"]' (yep, we got the Squarespace ID Finder installed ;-)) We were able to alter some text colors, but by far not everything. We were unable to alter the background color.
2. Adding a code block to the 'Additional Info' section in the product details. This is the preferred solution, but we were unable to make anything work...

Could you please help a monster out?

Looking forward hearing from you,

Monster Club

You mean change page content background (keep black color for header/footer) of all products or above product only?

4 hours ago, tuanphan said:

You mean change page content background (keep black color for header/footer) of all products or above product only?

Exactly! We wish to change the page content backgrounds as well as the text colors to match the example. Header and footer may stay default. And of course only for this specific product page: Monster Club Poker Cards.

13 minutes ago, tuanphan said:

Edit product > Additional Info > Add a Code Block > Paste this code

<style>
  body {
    background-color: #f1f2f3 !important;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
section#pdp * {
    color: black;
}
</style>

 

NO WAY 😱

It works! And what an elegant solution. Those lines of code make it very easy to customize every individual page in case necessary!

Just added this simple line to make sure the background of the footer remains black at all times:

  footer {
    background-color: #000000 !important;
}

Thank you very, very much!

Do you happen to be in need of a set of Poker Cards perhaps? We can set you up with one of those!

Just another question! Is there a line of code to make the pink button change in color according to the theme too?

It's still pink and on hoover it becomes entirely black.

Wouldn't it look great if the button were to be white by default (still with the black border) and fill up black on hoover with the text then becoming white?

Add this before </style>

.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button-inner {
    color: var(--primaryButtonBackgroundColor) !important;
}

45 minutes ago, tuanphan said:

Add this before </style>

.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button-inner {
    color: var(--primaryButtonBackgroundColor) !important;
}

 

Thank you! That makes the button text on hover visible again. Yay! Yet can we change its background color as well as its text color to custom colors with an additional line of code so it will better suit the style of the page?

What's great is that this block of code can be used for so many different cases!

With background button, use this

.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button:before {
    background-color: red !important;
}

11 hours ago, tuanphan said:

With background button, use this

.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button:before {
    background-color: red !important;
}

 

Thank you! We implemented it successfully into the code. Which now looks like this:

<style>
body {
    background-color: #ffffff !important;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
section#pdp * {
    color: black;
}
footer {
    background-color: #000000 !important;
}
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button-inner {
    color: var(--primaryButtonBackgroundColor) !important;
} 
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button:before {
    background-color: black !important;
}
</style>

The button text is now readable both on idle as well as on hover. But we can't get it to change its color however. Will you look into this together with us one more time?

Here's the link to the page: https://helicon-flatworm-ehcb.squarespace.com/shop/p/spring-bowl-rltkk-jy5sr-fjw6l-a9had-m6msp-zkjnh (password 'test')

19 hours ago, MonsterClub said:

Thank you! We implemented it successfully into the code. Which now looks like this:

<style>
body {
    background-color: #ffffff !important;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
section#pdp * {
    color: black;
}
footer {
    background-color: #000000 !important;
}
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button-inner {
    color: var(--primaryButtonBackgroundColor) !important;
} 
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button:before {
    background-color: black !important;
}
</style>

The button text is now readable both on idle as well as on hover. But we can't get it to change its color however. Will you look into this together with us one more time?

Here's the link to the page: https://helicon-flatworm-ehcb.squarespace.com/shop/p/spring-bowl-rltkk-jy5sr-fjw6l-a9had-m6msp-zkjnh (password 'test')

I see it already change to pink color on hover here

24 minutes ago, tuanphan said:

I see it already change to pink color on hover here

Indeed! But it would be great if we could make it any color to better fit the style of the specific page.

You can change it to a hex color, eg: 

color: #fff !important;

3 hours ago, tuanphan said:

You can change it to a hex color, eg: 

color: #fff !important;

Indeed we expected that to work too. But it seems it does so only partially:

(Only the text color seems to change to #ffffff. And midway you see the button being clicked and the text displaying 'Adding...' & 'Added!' to be rendered invisible (black) still too.)

Here's the full code as used for this example:

<style>
body {
    background-color: #ffffff !important;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
section#pdp * {
    color: black;
}
footer {
    background-color: #000000 !important;
}
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button-inner {
    color: #ffffff !important;
} 
.sqs-add-to-cart-button-wrapper:hover .sqs-add-to-cart-button:before {
    background-color: black !important;
}
</style>

Could you still help us out on this one?

With adding/added, use this before </style>

.status-text {
    color: white !important;
}

On 7/29/2023 at 10:18 AM, tuanphan said:

With adding/added, use this before </style>

.status-text {
    color: white !important;
}

 

Thanks again, Tuanphan,

The code is working great. but as you can see this doesn't change the pink color of the button. We would love to be able to change the pink color of the button to any color so that we can make it suit any page. But none of the solutions above seems to be able to achieve that yet.

Can you still help us out on this one, please?

On 8/2/2023 at 4:34 PM, MonsterClub said:

Thanks again, Tuanphan,

The code is working great. but as you can see this doesn't change the pink color of the button. We would love to be able to change the pink color of the button to any color so that we can make it suit any page. But none of the solutions above seems to be able to achieve that yet.

Can you still help us out on this one, please?

You mean change Adding, Added to pink before hover?

On 8/3/2023 at 11:38 AM, tuanphan said:

You mean change Adding, Added to pink before hover?

 

Yes that's right! As well as the pink lining on over ( but that may go automatically when we change the pre-hover pink color). That way we can fully customize the button! Can you still help us out on this one?

https://helicon-flatworm-ehcb.squarespace.com/shop/p/spring-bowl-rltkk-jy5sr-fjw6l-a9had-m6msp-zkjnh (password 'test')

password is incorrect now