Highlighting colors

[Doxster]

Hi,

I am almost done with the design of the site. I have some questions regarding some minor details that I’d like to nail down.

1. When hovering the cart icon, how do I change the colors of “view shopping bag” and “proceed to checkout”. Both normal and highlighted colors please.

2. When viewing the cart and the checkout page I’d like the buttons and the text fields to have more visible borders, how do I do this?

3. At the cart and the checkout page I’d like to change the button colors and the hovering colors of the buttons, how do I do this?

4. At the cart (once more) I’d like to change the colors and the hovering colors of the buttons to the right, proceed to checkout etc. How do I do this?

5. At the checkout page there is a blue “box”, where it says “if you want to add a coupon…..”. How do I change the content and color of this box?

Lots of questions, thanks in advance!

Chris

[Kyle – SUPPORT]

Hi

All of these are changable in the color customiser. We ask you play around with the colors checking what changes what. Button backgrounds mainly use the alt bg background.

The ‘remaining customer’ bar uses the accent color

2) What do you mean?

– Kyle

[Doxster]

Hi

Thanks Kyle I’ll try bg background. I’ve been playing around but it’s somewhat frustrating not finding what you changed 🙂

2) If you look at both the cart and the checkout there are textfields. But it’s impossible to see where the fields starts and ends. I’d like to have more visible borders of the text fields, preferably in black.

Chris

[Doxster]

Hi again,

I’ve been playing around alot in the customization options and still only have had half of a success.

1. I still havn’t found how to change the color of the buttons. I’ve found how I changed the highlighting color of the buttons though. This is for both hovering over the cart icon up on the right, the cart in my sidebar and in the cart page.

2. I still havn’t found how to change the color of the cupon box at the checkout page.

3. Still havn’t found how to add more visible borders to the text boxes.

What am I missing?

Chris

[laranz – SUPPORT]

Hi,

1. Can you give me a screenshot of the colors you want to change, so that I can spot it and give you a way or using Custom CSS.
2. If you want to change the background of the coupon code in the cart page means use this Custom CSS in Theme Options.

.woocommerce .coupon input.input-text { background-color: #ff0000; }

3. There are no text box over there in the cart page except the coupon code, you mean the table border? Can you explain which area in a screenshot like point 1, so that it is easy to spot which area/element.

Let us know,

Thanks,
laranz.

[Doxster]

This reply has been marked as private.

[Kyle – SUPPORT]

I will forward this to Laranz for you 🙂

– Kyle

[laranz – SUPPORT]

Hi,

I suggest you to use the firebug to check the button class and change that accordingly. I added some styles for you.

1. For menu hover on Checkout and shopping cart on Menu, use this Custom CSS.

.bag-buttons a:hover, .woocommerce .button.update-cart-button:hover, .bag-buttons a.checkout-button:hover, .woocommerce input.button.alt:hover, .woocommerce .alt-button:hover, .woocommerce button.button.alt:hover { background-color: red; }

Change the red to your color, you can also use hex values.

2. Have a coupon background, can be changed via.

.woocommerce-info { background-color: red; }

3. Text box colors can be changed with this,

#customer_details input { background-color: red; }

4. Apply coupon, color.

.woocommerce input[name="apply_coupon"] { background-color: red; }

5. For Cart page,

.shipping-calc select, .shipping-calc button { background-color: red; }

6. For sidebar,

.sidebar .wc-forward{ background-color: red; }

I hope I cover all things, I suggest you to make use of the firebug and spot the class and change the background color accordingly. If something didn’t work try to add !important at the end of the style.

Let us know,

Thanks,
laranz.

[Doxster]

This reply has been marked as private.

[Doxster]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this code also.

/*Zip code*/
#calc_shipping_postcode{border:1px solid #ccc !important;color:#ff0000 !important}

/*Update Total*/
button[name="calc_shipping"]{
background: #ff0000 !important;
}
/*Proceed to checkout*/
 input.checkout-button{
background: #ff0000 !important;
}

.woocommerce-page .woocommerce-info, .woocommerce .woocommerce-info {
    background: none repeat scroll 0 0 #ff0000 !important;
}

.form-row textarea {
    border: 1px solid #cccccc !important;
}

#order_review #payment #place_order {
    background: none repeat scroll 0 0 #ff0000 !important;
}

Thanks
Mohammad

[Doxster]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

input{border:1px solid #ccc !important;}
textarea{border:1px solid #ccc !important;}

Which checkout button do you want to change? You are making confuse. Post new request before solving last one. Just clear the issue one by one. I already gave code to change the checkout button code. Where are you inserting all of these code?

Thanks
Mohammad

[Doxster]

Hi Mohammad,

But those codes are for the border are they not? Since Laranz gave me code to change the background color I’d like to stick with that.

I will put this as resolved and create an entire new thread to avoid confusion. Thanks!

[Rui Guerreiro – SUPPORT]

Ok. We will assist you on the new topic.
-Rui