All Collections
Widgets and Advanced How-to's
How to Customize the Password Page
How to Customize the Password Page

You can style the password page and change the text prompt using some custom CSS code.

Cam Incoll avatar
Written by Cam Incoll
Updated over a week ago

At the moment there is not a built-in way to customise the Password page in Super. Instead you can use a little piece of custom code to change the prompt.

Note that this code needs to be in the Head section of Code, not in the CSS section so it runs when the password screen is displayed.

Please put this code in the Head section of Code:

<style>
.super-password-protection__title:before {
content: "Welcome to my site"; /* change the wording here */
visibility: visible !important;
}

.super-password-protection__title {
visibility: hidden !important;
}

</style>

<script>
if(document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',afterDOMLoaded);
} else {
afterDOMLoaded();
}
function afterDOMLoaded(){
//Everything that needs to happen after the DOM has initially loaded.
var node_list = document.getElementsByTagName('input');

for (var i = 0; i < node_list.length; i++) {
var node = node_list[i];

if (node.getAttribute('type') == 'password') {
// You can edit the placeholder text here
node.placeholder = 'Enter the magic code';
}
}
}
</script>
Did this answer your question?