Squarespace 7.1 password pages use the .sqs-password-page class as the main container. The form, input field, and submit button all have specific selectors you can target for complete restyling.
Create a branded lock screen by changing the background, restyling the password input and submit button, and adjusting the lock icon or instructional text to match your site's design language.
.sqs-password-page {
background: #111 !important;
color: #fff;
}
.sqs-password-page .password-input {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
color: #fff;
padding: 14px 20px;
font-size: 16px;
border-radius: 4px;
}
.sqs-password-page .password-input:focus {
border-color: #fff;
outline: none;
}
.sqs-password-page .password-submit {
background: #e74c3c;
color: #fff;
border: none;
padding: 14px 32px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
}Find more snippets in our CSS CheatsheetTry it free →
