mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to style the MemberPress password strength indicator

How to style the MemberPress password strength indicator

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!

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.

1 – Introduction / Overview In this article you will learn how to integrate BuddyBoss with LearnDash LMS and publish a course based subscription app on the Apple App Store

Learn how to integrate Invision Power System to Wordpress via SSO.
In this article you’ll learn how to use MemberMouse’s native functionality to set up a free, low-tech affiliate program!
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments