MonsterClub

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?

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?

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?

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

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')

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!

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?

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!

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.

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: 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. 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