[CSS] Adding style for Password Strength Meter
3 posters
Page 1 of 1
[CSS] Adding style for Password Strength Meter
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 June 1st 2024, 4:54 am; edited 2 times in total
Re: [CSS] Adding style for Password Strength Meter
I saw this code before, but i remember don't worked anymore with the recent updates in the service.
Thanks
Thanks
Re: [CSS] Adding style for Password Strength Meter
Did not know it had a version before. I just make it clearer and easier to use: D
Re: [CSS] Adding style for Password Strength Meter
I do like when people make improvements. Even though it may seems small, it is still well done. The CSS itself can be changed anytime, so it's up to personal beauty. Thanks for sharing this with us. Thumbs up!
Guest- Guest
Similar topics
» [CSS] Adding style for Announcement and Sticky
» Adding a password to signup
» Members Introduction
» Bann Meter
» Paypal Donation Meter
» Adding a password to signup
» Members Introduction
» Bann Meter
» Paypal Donation Meter
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum