Jump to content

How to change text colors on "Quick View" product modals?

Recommended Posts

Site URL: https://adammannphoto.com/shop

When I "quick view" a product in my store, all of the product details are not showing up. Well, they're technically there, but they're displaying in white. I cannot find an area in the design menu to adjust colors for the quick view contents. I went through all of my color schemes and the header and paragraph text are always black, never white. Any ideas how to fix this?

Screen Shot 2021-04-24 at 10.34.09 AM.png

Screen Shot 2021-04-24 at 10.34.14 AM.png

Link to comment
On 4/27/2021 at 10:33 PM, simplyadammann said:

@tuanphan Yes I disabled it because it wasn't working, but I'd still like help. I'll turn it back on.

Add to Design > Custom CSS

/* Quickview lightbox content color */
.lightbox-inner .ProductItem .ProductItem-details * {
    color: black;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 7/18/2021 at 11:20 AM, Janecullinan said:

Hey there, I am also struggling with the same thing. I plugged in this code and now the drop down bar has text overlapping and the quantity number is still white. 

Could you please help me with this www.featherandflame.com.au

Hi. It looks fine here. Did you solve the problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 8/16/2021 at 1:29 PM, Rose_cuz said:

Hi!

 

I'm having similar problems with Quickview.

 

I managed to update the text colour to white using the CSS above. Could you help me now fix the button colour in Quick view? The 'Add to cart' needs to be white. Thanks!

 

image.thumb.png.8195a6ee185c95dddf2c7f9c7659ed20.png

Hi. Can you share link to shop page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
  • 6 months later...

Hi 

I'm also struggling with this problem. I used the custom CSS changing the colour to white, but the quantity is still in black as are the arrows to scroll. I'd like these to be gold or white, and the add to cart button is Navy blue,, I'd prefer to change this button to either white will black text or Gold with Black text. 

Any ideas? 

Thanks 🙂

www.godman-angling.com/shop

Picture3.jpg

Link to comment
17 hours ago, GodmanAngling said:

Hi 

I'm also struggling with this problem. I used the custom CSS changing the colour to white, but the quantity is still in black as are the arrows to scroll. I'd like these to be gold or white, and the add to cart button is Navy blue,, I'd prefer to change this button to either white will black text or Gold with Black text. 

Any ideas? 

Thanks 🙂

www.godman-angling.com/shop

Picture3.jpg

Add to Design > Custom CSS

div.lightbox-inner .product-quantity-input input {
    color: white !important;
}
div.lightbox-inner .sqs-add-to-cart-button {
    background-color: white !important;
}
div.lightbox-inner .sqs-add-to-cart-button-inner {
    color: black !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
20 hours ago, casaparris said:

This is helpful. 

can you also provide how to customize the variables like the 'size' dropdown within the lightbox please.

If you share link to a product, we can test code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/16/2023 at 10:51 AM, casaparris said:

casaparris.com/newer

notice on the dropdown under variables in the quickview have a weird text going on?

I need to fix this as well as some width issues in the mobie.

Screen Shot 2023-01-15 at 9.51.20 PM.png

Which page? I don't see any products on this page to test quick view

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.