My "add to cart" button is not readable

ThirdDayImaging

My "Add to Cart" button (which, in my case, actually says "Prices and Sizes") has somehow turned to a solid white box and is only readable when a customer hovers over it. I have no idea how this could've happened, nor how to fix it. I contacted the heroes and they sent me here saying that it sounds like some sort of CSS issue.

Has anyone else encountered this? Does anyone know how to fix it?

Please keep in mind that I am absolutely clueless when it comes to writing code or anything else that goes beyond template customization.

Thanks!

thenickdude

That's actually caused by this CSS, which appears in the CSS of your SmugMug theme:

.sm-user-ui .sm-button-skin-accent,
.sm-user-ui a.sm-button-skin-accent,
.sm-user-ui a.sm-button-skin-accent:visited {
    color: #FFFFFF;
    border-color: #141414;
    background-color: #FFFFFF;
}

You can see it sets both the background and foreground colours to white. I think that probably means that you've set the "accent colour" for your theme to white. Click on Customize -> Customize site, go to the Theme tab, hover over your Active Theme and click the little wrench icon, then change the Accent Colour to something that's not white.

ThirdDayImaging

Ahhhh - that did it - thank you!
Lesson learned: Don't set your text and accent colors the same. Lol.

thenickdude

By the way, the descenders on the text on your logo seem to be cut off on the screen for me. You can add this to your theme's CSS to fix it:

.sm-page-widget-logo-text-container, .sm-page-widget-logo-text {
  overflow: visible !important;
}

ThirdDayImaging

Lamah wrote: »

By the way, the descenders on the text on your logo seem to be cut off on the screen for me.

By "descenders" are you referring to the menu items extending down below the bottom of the visible screen when clicked or hovered over?

thenickdude

Ah, no I mean the parts of the header text that fall below the line, the bottoms of the "g"s etc. get cut off on my computer (Chrome on Mac):



Adding that CSS fixes it:

ThirdDayImaging

Wow!

Lamah wrote: »

By the way, the descenders on the text on your logo seem to be cut off on the screen for me. You can add this to your theme's CSS to fix it:

.sm-page-widget-logo-text-container, .sm-page-widget-logo-text {
  overflow: visible !important;
}

Lamah wrote: »

Ah, no I mean the parts of the header text that fall below the line, the bottoms of the "g"s etc. get cut off on my computer (Chrome on Mac):



Adding that CSS fixes it:

Wow! I never noticed that before - thank you.
I see the code that you included above, but I have no idea how to use it.

thenickdude

Click Customise -> Customise Site, then click Theme, hover over your active theme and click the wrench, go to the Advanced tab and click the "edit" link for "custom CSS", paste it in there! (it's pretty well-hidden!)

ThirdDayImaging

Awesome!

Lamah wrote: »

Click Customise -> Customise Site, then click Theme, hover over your active theme and click the wrench, go to the Advanced tab and click the "edit" link for "custom CSS", paste it in there! (it's pretty well-hidden!)

That worked great! Thank you so much - you've been a huge help.

Btw, I love your website. Where were the "Beach" images taken? They are very nice.

thenickdude

Thanks! That's St Clair beach in my hometown of Dunedin, New Zealand.

ThirdDayImaging

Lamah wrote: »

Thanks! That's St Clair beach in my hometown of Dunedin, New Zealand.

It's absolutely beautiful, and it reminds me of my hometown on the coast of Maine.