Some code to customize Lock Screen in Squarespace.
Add code to Home > Settings > Advanced > Code Injection > Lock Page
Lock Screen Background
Background Color
<style>
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
background: red;
}
</style>
Background Image
<style>
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
Lock Screen Password Input
Password Input background
<style>
input[type="password"] {
background: green !important;
}
</style>
Password Input text color
<style>
input[type="password"]::placeholder {
color: red !important;
}
</style>
Password Input border
<style>
input[type="password"] {
border: 2px solid red;
}
</style>
Password Input arrow color
<style>
.icon-wrapper.arrow {
opacity: 1 !important;
fill: red !important;
}
</style>
Rename password text
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type="password"]').attr('placeholder','tuanphan');
});
</script>
Lock Screen Error Message
Message color
<style>
.error-message {
background: green !important;
color: violet !important;
}
</style>
Lock Screen Custom Font
@font-face {
font-family: 'tuan';
src: url(paste font file url here);
}
* {
font-family: 'tuan' !important;
}
Other Effects
Lock Screen Countdown
Add this code into Home > Settings > Advanced > Code Injection > Lock Page
