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

Comments

• 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; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• file_art

  March 2016

  Thank you very much
• Albert

  March 2016

  You are welcome!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• file_art

  March 2016

  Oh sorry. Thank's. Everything is ok.
• Albert

  March 2016

  You're welcome!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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?
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• WD_MaceIT

  January 2017

  Thank you.
• Albert

  January 2017

  You are welcome!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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;
  }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next