The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    [CSS] Adding style for Password Strength Meter

    SarkZKalie
    SarkZKalie
    Support Moderator
    Support Moderator


    Male Posts : 1442
    Reputation : 220
    Language : English

    [CSS] Adding style for Password Strength Meter Empty [CSS] Adding style for Password Strength Meter

    Post by SarkZKalie Wed Sep 05, 2018 10: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
    [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, 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}
    [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: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}
    [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.

    Live demo HERE

    I choose myself a text one, how about you? santa

    Enjoy.


    Last edited by SarkZKalie on Sat Jun 01, 2024 3:54 am; edited 2 times in total



    [CSS] Adding style for Password Strength Meter Sarkzk10
    YoshiGM
    YoshiGM
    Active Poster


    Male Posts : 1557
    Reputation : 146
    Language : Spanish & English
    Location : Mexico

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

    Post by YoshiGM Thu Sep 06, 2018 2:33 am

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


    Male Posts : 1442
    Reputation : 220
    Language : English

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

    Post by SarkZKalie Thu Sep 06, 2018 5:30 am

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



    [CSS] Adding style for Password Strength Meter Sarkzk10
    avatar
    Guest
    Guest


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

    Post by Guest Thu Sep 06, 2018 3: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!
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19325
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha

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

    Post by Ape Thu Sep 06, 2018 4:27 pm

    Nice work it looks great Wink keep up the good work



    [CSS] Adding style for Password Strength Meter Left1212[CSS] Adding style for Password Strength Meter Center11[CSS] Adding style for Password Strength Meter Right112
    [CSS] Adding style for Password Strength Meter Ape_b110
    [CSS] Adding style for Password Strength Meter Ape1010
    SarkZKalie
    SarkZKalie
    Support Moderator
    Support Moderator


    Male Posts : 1442
    Reputation : 220
    Language : English

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

    Post by SarkZKalie Fri Sep 07, 2018 3:38 am

    Thank you



    [CSS] Adding style for Password Strength Meter Sarkzk10

      Current date/time is Mon Sep 23, 2024 1:25 pm