- This topic has 19 replies, 4 voices, and was last updated 7 years, 6 months ago by
.
- Posts
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!
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.
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?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.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.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!
This actually works for the button!
But how to change the border-color (of the input-field, which remains turquoise) ?
Do you mean this active state color?
Try this:
<style> .formLogin input[type="password"]:focus{ box-shadow: 0 0 5px #000000; border: 1px solid #000000; } </style>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>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?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)…Doesnt work in Firefox or Internet Explorer either.
Still turquoise.Oops… I did.
Try again now =)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!
- The topic ‘password protect’ is closed to new replies.
