Hello
Today I'll show you how to change Password Strength Meter (PSM) on your Forumotion site.
By default, this PSM should display as this image below, looks not bad
I will stop rambling about this but first I want you to choose carefully between two options below :
- Text only
- Text with background gradient
Second, just copy and paste the code you like to Admin Control Panel -> Display -> Colors -> CSS, they are minified
Live demo HERE
I choose myself a text one, how about you?
Enjoy.
Today I'll show you how to change Password Strength Meter (PSM) on your Forumotion site.
By default, this PSM should display as this image below, looks not bad
I will stop rambling about this but first I want you to choose carefully between two options below :
- Text only
- Text with background gradient
Second, just copy and paste the code you like to Admin Control Panel -> Display -> Colors -> CSS, they are minified
- Text only
- Code:
#pwd_bad,#pwd_middle,#pwd_good{font-size:0;color:#fff;background-color:transparent}
#pwd_bad:after,#pwd_middle:after,#pwd_good:after{font-size:11px;padding:5px 20px;border-radius:25px}
#pwd_bad:after{content:"I Security LOW";background-color:red}
#pwd_middle:after{content:"II Security MEDIUM";background-color:blue}
#pwd_good:after{content:"III Security HIGH";background-color:green}
- Text with background gradient
- Code:
#pwd_bad,#pwd_middle,#pwd_good{font-size:0;background-color:transparent;background-image:none;text-shadow:1px 0 2px #000;color:#fff}
#pwd_bad:after,#pwd_middle:after,#pwd_good:after{font-size:11px;padding:5px 20px;border-radius:25px;background:url(//i.imgur.com/vlgig8R.jpg) center no-repeat}
#pwd_bad:after{content:"Security LOW";background-position:0}
#pwd_middle:after{content:"Security MEDIUM";background-position:-175px}
#pwd_good:after{content:"Security HIGH";background-position:-350px}
Live demo HERE
I choose myself a text one, how about you?
Enjoy.
Last edited by SarkZKalie on Sat Jun 01, 2024 3:54 am; edited 2 times in total