How to Customize the Password Page

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

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>