[CSS] Adding style for Password Strength Meter

Go down

adding music - [CSS] Adding style for Password Strength Meter Empty [CSS] Adding style for Password Strength Meter

Post by SarkZKalie on September 5th 2018, 11:41 pm

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
adding music - [CSS] Adding style for Password Strength Meter Defaul10
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. 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-image:none}
#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}
adding music - [CSS] Adding style for Password Strength Meter Text-o11

  • Text with background gradient

Code:
#pwd_bad,#pwd_middle,#pwd_good{font-size:0;background-color:none;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}
adding music - [CSS] Adding style for Password Strength Meter Text-g11
You can freely change content in the text to your tongue language, or any background color and text color you want.
Note:
AwesomeBB and Mobile Version may not work because of JavaScript conflicting
Code:
<div id="cont_pwd" style="display: none;">
<div class="pwd_img" id="pwd_bad" style="display: none;">Weak</div>
<div class="pwd_img" id="pwd_middle" style="display: none;">Normal</div>
<div class="pwd_img" id="pwd_good" style="display: none;">Strong</div>
</div>
Live demo HERE

I choose myself a text one, how about you?
Enjoy.


adding music - [CSS] Adding style for Password Strength Meter Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1100
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

adding music - [CSS] Adding style for Password Strength Meter Empty Re: [CSS] Adding style for Password Strength Meter

Post by YoshiGM on September 6th 2018, 3:33 am

I saw this code before, but i remember don't worked anymore with the recent updates in the service.
Thanks Wink
YoshiGM
YoshiGM
Forumember

Male Posts : 843
Reputation : 115
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

adding music - [CSS] Adding style for Password Strength Meter Empty Re: [CSS] Adding style for Password Strength Meter

Post by SarkZKalie on September 6th 2018, 6:30 am

Did not know it had a version before. I just make it clearer and easier to use: D


adding music - [CSS] Adding style for Password Strength Meter Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1100
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

adding music - [CSS] Adding style for Password Strength Meter Empty Re: [CSS] Adding style for Password Strength Meter

Post by System32 on September 6th 2018, 4:08 pm

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!
System32
System32
Forumember

Male Posts : 93
Reputation : 13
Language : Serbian,English

http://paganism.forumotion.com/

Back to top Go down

adding music - [CSS] Adding style for Password Strength Meter Empty Re: [CSS] Adding style for Password Strength Meter

Post by APE on September 6th 2018, 5:27 pm

Nice work it looks great Wink keep up the good work


adding music - [CSS] Adding style for Password Strength Meter Left1212adding music - [CSS] Adding style for Password Strength Meter Center11adding music - [CSS] Adding style for Password Strength Meter Right112
adding music - [CSS] Adding style for Password Strength Meter Ape_b110
adding music - [CSS] Adding style for Password Strength Meter Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14924
Reputation : 1618
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

adding music - [CSS] Adding style for Password Strength Meter Empty Re: [CSS] Adding style for Password Strength Meter

Post by SarkZKalie on September 7th 2018, 4:38 am

Thank you


adding music - [CSS] Adding style for Password Strength Meter Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1100
Reputation : 179
Language : English

https://www.rotavn.xyz/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum