Overview

MemberPress is a WordPress membership plugin widely used by our customers here at MemberFix. One of the cool features of this plugin is the ability to show a password strength meter on the new member registration form.

password meter - How to style the MemberPress password strength indicator

Examining the CSS code of the password strength meter

The password strength meter looks like the below:

password strength 1 - How to style the MemberPress password strength indicator

The code behind the password strength meter uses some CSS classes which change dynamically based on the input characters into the Password field. Here’s the code with no input characters:

css code - How to style the MemberPress password strength indicator

And here’s how the code changes when we add a few characters into the password field:

css code weak pass - How to style the MemberPress password strength indicator

As you have noticed the class changes from “mp-nopass” to “mp-weakpass”. And so we’ll need to control these CSS classes. Further, besides these two we also have “.mp-mediumpass” and “.mp-strongpass.”

Adding the CSS code to style the password strength meter

To style this strength meter just go to Appearance > Customize > Additional CSS and add the below code:

/*No Password*/

.mp-nopass{
background: #EEE;
border: none;
color: #707071;
}

/*Weak to Medium*/

.mp-weakpass{
background: #D81E00;
border: none;
color: #000;
}

/*Strong to Very Strong*/

.mp-mediumpass{
background: #1ab073?;
border: none;
color: #000;
}

/*Strong to Unbreakable*/

.mp-strongpass{
background: #5AD869;
border: none;
color: #000;
}

The above colors for the background can be changed to whatever color you want. That is all!

Just let me know if you have questions!

Share This