Change the UNLOCK text on passworded pages
SmugMug has some great system pages – you can read about them here. But in this tutorial, I am going to be talking about the page that your visitors will see when they open a password protected page, gallery or folder.
The default text that shows on this page is UNLOCK which we are going to change using a little bit of CSS code.
Add a CSS content block to the ENTIRE SITE section of your website and then add this code to it:
CSS
/* hiding the UNLOCK label */
#sm-node-password .sm-heading {
display: none ;
}
/* replacing the UNLOCK label with your own text */
#sm-node-password:before {
display: block !important;
content: 'My Text'; /* replace with your own text*/
text-align: center;
padding-bottom: 10px;
font-size: 1.5em;
}
/* Hide the Password label */
#sm-node-passwordform .sm-node-password-password-field .sm-label {
display: none;
}
/* Replace it with your own password label */
#sm-node-passwordform .sm-node-password-password-field:before {
content:'Your Password';
display: block;
margin-bottom: 3px;
}
/* Hide the default button label*/
#sm-node-passwordform .sm-button .sm-button-label {
display: none;
}
/* Replace the button label with your own label*/
#sm-node-passwordform .sm-button:after {
content:'Enter if you dare';
}
/* Hide the Remember Me default label*/
#sm-node-passwordform .sm-node-password-remember-hint-container .yui3-button-label{
display: none;
}
/* Replace the Remember Me default label with your own label*/
#sm-node-passwordform .sm-node-password-remember-hint-container:after {
content:'Remember your login details';
margin-left: 10px;
}
Comments (2)
Leave a Reply
BUEN DIA! Como se puede editar el “boton Let me in” y la palabra “Password”. Mil Gracias!!
I have just modified the code for you so you can change all the labels on the password form :} Enjoy!