Styling 'Please fill the required field.' messages?

  • Resolved PDIMG

    (@stefanristicdev)


    10 years, 3 months ago

    Hello everybody!

    Any idea about how to style those ‘Please fill the required field.’ messages with the red border?

    I’ve tried using a .wpcf7-not-valid-tip class, but it’s not working except for the display property. So, this works:

    .wpcf7-not-valid-tip{
	display:none;
}

    but this doesn’t work:

    .wpcf7-not-valid-tip{
	border: 1px solid yellow;
}

    Thanks!

    http://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)
  • bxwebber

    (@bxwebber)

    10 years, 3 months ago

    Hi!

    Maybe this can help (it worked for me):
    The original classes can be found in the plugin’s stylesheet, which sits in the contact-form-7 plugin folder > includes > css > styles.css . Of course it’s best to copy the ones you need into your child theme’s stylesheet and change the values.

    My example (in which I changed the border- and background-colors):

    div.wpcf7-mail-sent-ok { border: 2px solid #87cefa !important;background-color:lightskyblue; }
div.wpcf7-mail-sent-ng { border: 2px solid #87cefa !important;background-color:lightskyblue; }
div.wpcf7-spam-blocked { background-color:#ffa500; }
div.wpcf7-validation-errors { border:0;background-color:#f7e700; }

    The !important statement seems necessary to make it effective.

    Thread Starter PDIMG

    (@stefanristicdev)

    10 years, 3 months ago

    Thank you for your answer bxwebber!

    Your tip about checking CF7 styles.css helped me to find the correct class. It should be:

    span.wpcf7-not-valid-tip

    Issue solved, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling 'Please fill the required field.' messages?’ is closed to new replies.