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:

/* 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;
}