Your Uncommonly Amazing WordPress Tech Partner
Membership plugins

How to style the MemberPress password strength indicator

How to style the MemberPress password strength indicator

[et_pb_section bb_built=”1″][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.19.4″]

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!

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

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.
How to Trigger a ThriveLeads Popup with a Divi Button Element
In this article you’ll learn how to connect ClickFunnels to your WordPress membership site running the MemberPress plugin via Zapier.
On this tutorial you are going to learn how to enhance Search Results page and match your website’s look by using Divi template.

Leave a Reply

Your email address will not be published. Required fields are marked *