Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 29, 2016 at 12:09 pm #705501
    ppi37

    Hi,
    I would like to style the validation error messages in a Contact Form 7.
    I just want to have it in red.

    can someone give me the Quick CSS code ?

    I try this but no nothing changes.

    #wpcf7-not-valid-tip {
    color: #red;

    Thanks

    October 29, 2016 at 3:46 pm #705521
    Basilis

    Hey ppi37,

    The correct code is

    #wpcf7-not-valid-tip {
color: red;
}

    Please do let us know if we can do anything else to help you

    Best regards,
    Basilis

    October 29, 2016 at 3:51 pm #705526
    ppi37

    Hi Basilis,
    Thanks,
    but no change with your code

    October 29, 2016 at 4:37 pm #705551
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    div.wpcf7-validation-errors {
    border: 2px solid #f70000!important;
}


    Best regards,
    Vinay

    October 29, 2016 at 5:01 pm #705555
    ppi37

    Hi Vinay,
    It’s OK with the following Quick CSS

    #wpcf7-not-valid-tip {
    color: #e95b0f;
    }

    div.wpcf7-validation-errors {
    border: none;
    color: #e95b0f;
    }

    #top label span {
    color: #e95b0f;
    }

    Thanks a lot

    October 29, 2016 at 7:10 pm #705592
    Nikko

    Hi ppi37,

    Glad it’s fixed :)

    Best regards,
    Nikko

    October 29, 2016 at 7:51 pm #705614
    ppi37

    Hi again,
    Finaly the following CSS is not good.

    #top label span {
    color: #e95b0f;
    }

    because it changes labels of the checkbox and the labels of the files too.
    But if I remove it, the validation error messages still in the primary color.
    And it’s not easy to see which fiel is wrong.

    a solution ?

    Thanks

    October 29, 2016 at 8:00 pm #705622
    ppi37

    Hi,
    I don’t understand why the following code doesn’t work with the enfold theme.
    span .wpcf7-not-valid {
        border: 1px solid #ff0000;
    }
    following the recomandations here :

    Styling Contact Form 7 validation with CSS and border

    Thanks

    November 1, 2016 at 6:20 am #706555
    Rikard

    Hi,

    Please try adding the important statement to the end of you CSS:

    span .wpcf7-not-valid {
    border: 1px solid #ff0000 !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.