CSS formatting of M2 login form error message in PopUp Pro modal

I’m using PopPp Pro on a CSS trigger to create a login popup on my site. I’m having a little trouble with the display when a user puts in the wrong username/password (for login) or the wrong email address (for password reset). The error message gets written over the top of the login or password form, so it becomes unreadable and unusable.

It works alright if I make the popup wider — then the login form (which is coming from the Membership2 shortcode [ms-membership-login]) is positioned to the left, and the error message appears on the right. But before the error is triggered, it’s awkward looking with a big blank space to the right.

I’m hoping there’s a way to make the error message appear above the form instead of on top of it. Been knocking my head against this for hours. Hoping someone can suggest a solution.

The problem can be seen at http://mclone.nrocnetwork.org – just click on the “Account” link in the upper right corner and try to login and/or reset password. Since your information won’t be in there, you should see the error without much effort.

  • Luís
    • Support

    Hi @mabraham1,

    Hope you’re doing well today!

    One idea can be move the status error message to the top of the pop up, allowing to the users to read the message and the form stays usable.

    Please, try this CSS code:

    .status {
    font-size: 15px;
    height: 20px !important;
    top: 37% !important;
    }

    If you don’t know, you should always avoid change the original CSS files, in order to don’t lose it all when you make an update.

    So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    If the code doesn’t work, can you give me access to your admin panel, so I can try other solutions?

    If you don’t already know, please, follow the link below, to see how enable the staff login:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Cheers, Luís

  • mabraham1
    • Site Builder, Child of Zeus

    Like a charm, Luís!! Thanks so much.

    And for the record, I do use Simple Custom CSS :slight_smile: However, in this case, since I’m targeting the contents of the popup only, I’m using the CSS field in the PopUp Pro plugin. So I had to put #popup in front of it like this:

    #popup .status {
    font-size: 15px;
    height: 20px !important;
    top: 37% !important;
    }

    I still have to tweak the font size and spacing a bit, but now that I know how to do it, I can even add a background-color to the warning message. Very cool.

    Thanks again. Very helpful, as always. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.