Change Icon and Colours of Message Boxes

[lilcreatures]

Where can I change all the icons in the information boxes (like the “View Basket – ### has been added to your basket”) to my own image?
a. Also where can I change the boarder colour for these boxes?

See attached message box is turquoise, in the checkout the message box is red: http://lilcreatures2.tcc-staging.com/checkout/. I would like all the box borders to be #75bcb8 and all the icons to be my HEART-LEFT as the example (icon only) in attached pic HELP-BOXES-2

Thank you

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

You can change those colors within the Color Customizer => Color – UI Elements or by adding some custom CSS to Theme Options => Custom CSS.

/* WooCommerce Warnings */
.woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info {
    border-color: #e9212f!important;
}

/* WooCommerce Info Message */
.woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message {
    border-color: #d1f2f0!important;
}

To change the icon, you can choose another icon from here: http://fontawesome.io/icons/.

For example, here is a heart: http://fontawesome.io/icon/heart/.

You can then override the CSS to change the font icon, so a heart would use this which you would add to Theme Options => Custom CSS:

.woocommerce .woocommerce-message:before, .woocommerce-page .woocommerce-message:before {
    content: "\f004"!important;
    color: red!important;
    font-family: FontAwesome!important;
}

[lilcreatures]

Thank you David, this is fantastic the borders are working perfectly!

For the last part, is there a way to use my own image rather than the fonticon like a flavicon image?

[David Martin – Support]

If you upload your image into the media library and supply me the image URL I can help with that.

[lilcreatures]

Here it is, thank you.

http://lilcreatures2.tcc-staging.com/wp-content/uploads/2014/12/HEART-LEFT.png

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce-page .woocommerce-message, .woocommerce .woocommerce-message {
    background: url(http://lilcreatures2.tcc-staging.com/wp-content/uploads/2014/12/HEART-LEFT.png) no-repeat 10px #eee !important;
}

.woocommerce-page .woocommerce-message:before, .woocommerce .woocommerce-message:before {
display:none !important;
}

Thanks
Mohammad