How can I change background alerts? [Alert css colors]

file_art · March 2016

Hello,

I would like to change green background in alert to more dark. Where can I add new hex color?

Regards,

Art

Albert · March 2016

Hi,

we guess you mean SUCCESS alert. To change background color of this alert, you need to use the following css:

.alert_success { background: #000 !important; }
.alert_success .alert_icon { background: #000 !important; }

file_art · March 2016

Thank you very much

Albert · March 2016

You are welcome!

file_art · March 2016

Muffin sorry but I have a small problem. I added css code to rtl.css but nothing happen. Should I change sth else? Help, please.

Albert · March 2016

Each custom css should be located under Theme options > Custom CSS & JS > Custom CSS section.

file_art · March 2016

Oh sorry. Thank's. Everything is ok.

Albert · March 2016

You're welcome!

file_art · March 2016

Muffin group you are great. I have one more question.

I would be very grateful for your help because I have the education site and I have many alerts.

I know how can I change the background and thanks ou very much for this but I have a problem because I would like have the same background in every alert - white and black words. I don't know how can I have a black font?? And I would like to have a white background with color frame.

Please help me. This is the last question. I promise!

Regards,

Art

Albert · March 2016

You mean to change background to black and font to white for each alert, like Warning, Error, Info and Success?

WD_MaceIT · January 2017

Yes please, I am looking for the answer of this question, Could you please suggest me?

Albert · January 2017

@WD_MaceIT Ok, so to do this, you need to you the following css:

.alert_warning { background: #000 !important; color: #FFF !important; }
.alert_warning a { color: #FFF !important; }
.alert_warning .alert_icon { background: #000 !important; color: #FFF !important; }

.alert_error { background: #000 !important; color: #FFF !important; }
.alert_error a { color: #FFF !important; }
.alert_error .alert_icon { background: #000 !important; color: #FFF !important; }

.alert_info { background: #000 !important; color: #FFF !important; }
.alert_info a { color: #FFF !important; }
.alert_info .alert_icon { background: #000 !important; color: #FFF !important; }

.alert_success { background: #000 !important; color: #FFF !important; }
.alert_success a { color: #FFF !important; }
.alert_success .alert_icon { background: #000 !important; color: #FFF !important; }

WD_MaceIT · January 2017

Thank you.

Albert · January 2017

You are welcome!

zema · August 2017

Dear muffingroup

i used the css displayed above to adapt the alert messages in woocommerce.

all of them are working well except of the .alert_warning and .alert_warning a

whatever colorcode (hex) i place in - the color stays as it is (yellow) and the text doesn't change either.

can you pls advice, thx in advanced.

link to my site: https://oasiz.ch/

best

elias

Bryan · August 2017

Hi,
have you tried adding !important at the css statement?
thanks

zema · August 2017

yes, my code looks like this:

.alert_warning { background: #000 !important; color: #FFF !important; }

.alert_warning a { color: #b2947c !important; }

.alert_warning .alert_icon { background: #0c4744 !important; color: #b2947c !important; }

Bryan · August 2017

You mean this? http://prntscr.com/gcebw2

zema · August 2017

no - i mean the one "your cart is empty" that appears when your in the shop but havent anything in your cart and try to checkout.

https://oasiz.ch/cart/

The one you showed in your print-screen is correct, that one works - im speaking about the one that stays mainly yellow - only the .alert_warning .alert_icon works fot that one. Whyever...

Bryan · August 2017

This is the css for the main bar color, the icon color and background are already set in your custom css

.alert_warning {
    background: blue !important;
    color: red !important;
}

How can I change background alerts? [Alert css colors]

Comments