Home Forums Support Widget Support Other Widgets password protect

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • Sihan
    Participant
    Post count: 3
    #12808 |

    I am using the password protect widget in a site and would like to know if there is any chance to get the login button and highlight around the box in a straight RGB red, or if I can change it myself? It will be a great help!

    responsive-muse
    Keymaster
    Post count: 139
    #12821 |

    Hello Sihan!

    You can easily change it using this code (change color values as you want)

    #botonlogin {
        background: #ee0000;
        border-bottom: 2px solid #ff00a9;
    }

    You can use custom CSS by either using Object -> Insert HTML or putting it in the tag by going to the Metadata tab of Page Properties (Page -> Page Properties).

    Kind regards.

    Sihan
    Participant
    Post count: 3
    #12839 |

    Hi, thanks for the info.
    I have tried both ways. If I view in the browser it does not see the change, is it because I have to upload onto the server first?

    responsive-muse
    Keymaster
    Post count: 139
    #12850 |

    You should not need to upload it, but it may be your browser cache. Can you use a Chrome incognito window?
    If you put it in a server URL maybe we can look at it.

    Sihan
    Participant
    Post count: 3
    #12963 |

    Great, I will email you an url. dummy site now.
    I can see the html. change in colour in firefox but it still does not show the change.

    responsive-muse
    Keymaster
    Post count: 139
    #12966 |

    We just checked it.
    It seems there is missing style tags.
    Remove previous code and try code below.

    <style>
    #botonlogin {
        background: #ee0000;
        border-bottom: 2px solid #ff00a9;
    }
    </style>

    Tell us if it works, thank you!

    Ferdinand
    Participant
    Post count: 6
    #14677 |

    This actually works for the button!

    But how to change the border-color (of the input-field, which remains turquoise) ?

    • This reply was modified 5 months, 2 weeks ago by  Ferdinand.
    responsive-muse
    Keymaster
    Post count: 139
    #14744 |

    Do you mean this active state color?

    active input

    Try this:

    <style>
    .formLogin input[type="password"]:focus{
        box-shadow: 0 0 5px #000000;
        border: 1px solid #000000;
    }
    </style>
    Ferdinand
    Participant
    Post count: 6
    #14917 |

    Yes, that’s the one!
    Doesnt work :/ Still turquoise…

    I’ve put it like this under Page/Page-properties/HTML for <head>:
    <style>
    #botonlogin {
    background: #000000;
    border-bottom: 2px solid #000000;
    }

    .formLogin input[type=”password”]:focus{
    box-shadow: 0 0 5px #000000;
    border: 1px solid #000000;
    }
    </style>

    responsive-muse
    Keymaster
    Post count: 139
    #14925 |

    Mmmm, that should work!.

    Can you try with !important added?

    .formLogin input[type=”password”]:focus{
    box-shadow: 0 0 5px #000000!important;
    border: 1px solid #000000!important;
    }

    If still does not work:
    – What browser are you using?
    – Do you have a live URL to check it?

    Ferdinand
    Participant
    Post count: 6
    #14976 |

    thanks for response!

    I’ve inserted your add-on like this:
    <style>
    #botonlogin {
    background: #000000;
    border-bottom: 2px solid #000000;
    }

    .formLogin input[type=”password”]:focus{
    box-shadow: 0 0 5px #000000!important;
    border: 1px solid #000000!important;
    }
    </style>

    Still not working, atleast not in Chrome:
    http://ferdesign.nl/icontest/exit.html (pw=test)

    Ferdinand
    Participant
    Post count: 6
    #14977 |

    …Doesnt work in Firefox or Internet Explorer either.
    Still turquoise.

    responsive-muse
    Keymaster
    Post count: 139
    #15002 |

    I cannot see any password in the URL you provided. Maybe you removed it?

    Ferdinand
    Participant
    Post count: 6
    #15024 |

    Oops… I did.
    Try again now =)

    responsive-muse
    Keymaster
    Post count: 139
    #15033 |

    I discovered the problem, double quotes were not in correct format.

    Please, replace old code with double quotes

    .formLogin input[type=”password”]:focus{
    box-shadow: 0 0 5px #000000!important;
    border: 1px solid #000000!important;
    }

    For this one with single quotes

    .formLogin input[type='password']:focus{
    box-shadow: 0 0 5px #000000!important;
    border: 1px solid #000000!important;
    }

    I hope this does the job!

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.