Add background/highlight to Global Error messages

  • Resolved ritefrederico

    (@ritefrederico)


    2 years, 10 months ago

    Hi, I need help to customize the global error messages.
    I know I can change the font color, but since I feel that there’s not enough contrast in the message, I would like to add a highlight/box to those global error messages, such as the Terms and Conditions checkbox validation error message.

    Thanks in advance,

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • 3 Sons Development – a11n

    (@3sonsdevelopment)

    2 years, 10 months ago

    Hi @ritefrederico,

    Just to make sure I’m looking in the right place, is this an example of the errors you’d like to style differently?

    You can change how this appears with some CSS. This is a quick snippet that changes the background color and the text color. It also gives just a bit of padding to push the text off of the edges.

    • In your WordPress dashboard, go to Appearance and click on Customize.
    • Look down for the Additional CSS section and click on it. 
    • In the box there, paste this: 
      
.container.alert-color {
    color: #fff;
    background-color: #b20000;
    padding: 5px 15px;
}
    • Publish your changes.

    Feel free to modify that snippet to fit your style. Let us know if you have any questions.

    Cheers

    Thread Starter ritefrederico

    (@ritefrederico)

    2 years, 10 months ago

    That’s exactly it! It worked perfectly – really appreciate your help a11n!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add background/highlight to Global Error messages’ is closed to new replies.