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.
Examining the CSS code of the password strength meter
The password strength meter looks like the below:
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:
And here’s how the code changes when we add a few characters into the password field:
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:
/*Weak to Medium*/
/*Strong to Very Strong*/
/*Strong to Unbreakable*/
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!
I’m a web and graphic designer. I have an extensive experience in WordPress and I like working here at MemberFix.