New to the community? Start here

How do I change the buttons and text colors?

The add to shopping cart buttons are green with white text.

But once you click on it, the button changes to Green with blue text briefly. It’s impossible to read the text in the button.

And once you get to the point of seeing the Check Out button, the text is also blue on green (until you rollover, then text turns white.) Wherever the blue text appears it’s unreadable.

I imagine I’d have to change something using CSS. Yes? Don’t know anything about CSS so if that’s the answer, is there a simple way for me to fix it without much knowledge? You know, just cut and paste something?

Thanks.

Mon, 4 Feb 2013 14:45:59
  • karks88
    • Site Builder, Child of Zeus

    If you use Firefox, use the Firebug extension (other browsers also have developer tools). That will show you the CSS classes you need to change. You can just copy and paste the code into your CSS, then make any color changes you want. For example, I have a site where the Add to Cart button looks like:

    #mp_product_list input.mp_button_addcart, .type-product input.mp_button_addcart, input.mp_cart_direct_checkout_link, #mp_shipping_submit, form.mp_buy_form .mp_adding_to_cart, .mp_cart_direct_checkout_link, .mp_link_buynow {
    
background-color: #349936;
    
background-image: -moz-linear-gradient(center bottom , #2F8C32 0%, #339937 100%);
    
box-shadow: 0 1px 0 #2B7F2E inset;
    
text-shadow: 0 -1px 1px rgba(27, 110, 29, 0.6);
    
}

    You could change the background color info, and add a text color, etc. Also, look for CSS that contains :hover states. That will allow you to change what happens when your mouse hovers over the button.

  • NealF
    • WPMU DEV Initiate

    OK. This is a bit over my head. Have too many questions to even start asking.

    I’m going to have to do some studying of how to use Firebug first before I can see what makes sense to ask.

    Hopefully, it won’t be too complex.

    Thanks.

  • NealF
    • WPMU DEV Initiate

    I haven’t changed from whatever the default theme is. One of my questions on another posting was whether or not the theme was just for the store or a global theme change. The answer I got back was that it was a site-wide change and not just the store, so I didn’t want to change anything.