Customize Super Password Page

This custom code snippet lets you change the default message shown on Super password-protected pages.

It is useful when you want to make the password page feel more personal, helpful, or specific to the page visitors are trying to access.

You can set one default message for all password-protected pages, and optionally add different messages for specific pages.

Sample output:

Installation instructions

Open your site in the Super Dashboard.
Open the Code page.
In the Head tab, paste the following snippet:

Note: Please read the commented message in the code

<script>

  window.SuperPasswordPageConfig = {
    /*
      Default message:
      -This message will show on all password-protected pages unless a specific
      -page message is added below. You can edit it to your preferred message
    */
    
    defaultMessage: "Welcome to my private page",

   /*
		Custom messages for each page:
		Use the part of the page link that comes after your domain.
    Examples:
    yoursite.com/map = "/map"
    yoursite.com/members = "/members"
    Add your message after the page link.
    Example:
        "/map": "This page is under construction."
        You can add a different message for each page.

		If you add more than one page, add a comma after each line except the last one.
		*/
		
    pageMessages: {
      "/map": "No access.",
      "/pont-de-la-tournelle": "This page is under construction by Melvin.",
      // "/members": "Members only. Please enter your password."
    }
  };
</script>

In the Body tab, paste the following snippet:

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/password/super-password-page.js"></script>

Save your changes.
Open your Super site and refresh the password-protected page.

How to edit the message

You can update the main password page message by changing the defaultMessage text.

Example:

defaultMessage: "This page is private. Please enter the password to continue."

You can also edit messages for each page as desired.

pageMessages: {
  "/map": "This page is under construction.",
  "/members": "Members only. Please enter your password."
}

The page path should match the URL path of the page.

https://example.com/members

The matching path would be:

"/members"

Optional style customization

If you want to customize the appearance of the password page, go to Code > CSS in your Super dashboard and paste the custom CSS below.

You can then update the values in the code, such as the font size, colors, spacing, and alignment, to match your preferred design.

Example:

/*
  =====================================================
  SUPER PASSWORD PAGE CUSTOMIZATION
  =====================================================

  =====================================================
   PASSWORD CONTENT AREA ONLY
  =====================================================

*/
html.custom-password-page .custom-password-shell {
  width: 100% !important;
  min-height: 100vh !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 48px 20px !important;
  box-sizing: border-box !important;

  color: #ffffff !important;

  /*
    Background for the password content area only.

    First radial-gradient = top-left glow
    Second radial-gradient = bottom-right glow
    Last color = main background
  */
  background:
    radial-gradient(circle at top left, rgba(255, 216, 77, 0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(125, 255, 230, 0.16), transparent 36%),
    #0f172a !important;
}

/*
  =====================================================
    CUSTOM PASSWORD HEADING / MESSAGE
  =====================================================

  This affects the custom password page title/message.
*/

html.custom-password-page .custom-password-heading {
  max-width: 960px !important;

  /* Spacing below the heading */
  margin: 0 auto 32px auto !important;

  text-align: center !important;

  /* Heading font */
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  /* Heading size */
  font-size: clamp(34px, 6vw, 72px) !important;

  /* Heading thickness */
  font-weight: 800 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;

  /* Heading color */
  color: #ffffff !important;
}

/*
  =====================================================
   PASSWORD INPUT WRAPPER / PASSWORD BOX
  =====================================================

  This affects the full password input container.
*/
html.custom-password-page .custom-password-control {
  /* Password box width */
  width: min(100%, 480px) !important;

  /* Password box height */
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;

  /* Rounded corners */
  border-radius: 999px !important;

  /* Password box background */
  background: rgba(255, 255, 255, 0.12) !important;

  /* Password box border */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  /* Password box shadow */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35) !important;

  /* Glass blur effect */
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/*
  =====================================================
   PASSWORD INPUT FIELD
  =====================================================

  This affects where users type the password.
*/
html.custom-password-page .custom-password-control input[type="password"] {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;

  /* Typed password color */
  color: #111827 !important;

  /* Cursor color */
  caret-color: #111827 !important;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
}

/*
  =====================================================
   PASSWORD PLACEHOLDER TEXT
  =====================================================
*/
html.custom-password-page .custom-password-control input[type="password"]::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

html.custom-password-page .custom-password-control input[type="password"]:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/*
  =====================================================
   SUBMIT BUTTON
  =====================================================

  This affects the arrow/submit button.
*/
html.custom-password-page .custom-password-control button,
html.custom-password-page .custom-password-control input[type="submit"],
html.custom-password-page .custom-password-control [role="button"] {
  width: 64px !important;
  min-width: 64px !important;
  min-height: 58px !important;

  border: 0 !important;
  border-radius: 0 !important;

  /* Button background color */
  background: #ffd84d !important;

  /* Button icon/text color */
  color: #111827 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: background 180ms ease, transform 180ms ease !important;
}

/*
  =====================================================
    SUBMIT BUTTON HOVER COLOR
  =====================================================
*/
html.custom-password-page .custom-password-control button:hover,
html.custom-password-page .custom-password-control input[type="submit"]:hover,
html.custom-password-page .custom-password-control [role="button"]:hover {
  background: #ffe680 !important;
}

/*
  =====================================================
    SUBMIT BUTTON ICON COLOR
  =====================================================
*/
html.custom-password-page .custom-password-control svg {
  color: #111827 !important;
  stroke: #111827 !important;
}

/*
  =====================================================
    PASSWORD BOX FOCUS STATE
  =====================================================
*/
html.custom-password-page .custom-password-control:focus-within {
  border-color: #ffd84d !important;
  box-shadow:
    0 0 0 4px rgba(255, 216, 77, 0.22),
    0 24px 70px rgba(0, 0, 0, 0.35) !important;
}
/*
  =====================================================
    PASSWORD ERROR MESSAGE
  =====================================================

*/
html.custom-password-page .custom-password-shell form {
  width: min(100%, 480px) !important;
}

html.custom-password-page .custom-password-shell form [role="alert"],
html.custom-password-page .custom-password-shell form [aria-live],
html.custom-password-page .custom-password-shell form [class*="error" i],
html.custom-password-page .custom-password-shell form [id*="error" i] {
  position: static !important;
  display: block !important;

  width: 100% !important;
  max-width: 480px !important;

  margin: 10px 0 0 0 !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;

  transform: none !important;
  inset: auto !important;

  text-align: left !important;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;

  color: #ff6b6b !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  white-space: normal !important;
  pointer-events: none !important;
}

/*
  =====================================================
    MOBILE RESPONSIVE DESIGN
  =====================================================
*/
@media (max-width: 767px) {
  html.custom-password-page .custom-password-shell {
    padding: 32px 16px !important;
  }

  html.custom-password-page .custom-password-heading {
    font-size: clamp(32px, 11vw, 48px) !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
  }

  html.custom-password-page .custom-password-control {
    width: 100% !important;
    min-height: 54px !important;
  }

  html.custom-password-page .custom-password-control input[type="password"] {
    min-height: 54px !important;
    font-size: 16px !important;
  }

  html.custom-password-page .custom-password-control button,
  html.custom-password-page .custom-password-control input[type="submit"],
  html.custom-password-page .custom-password-control [role="button"] {
    width: 58px !important;
    min-width: 58px !important;
    min-height: 54px !important;
  }
}

Notes and limitations

The code works only on Super password-protected pages.
The defaultMessage applies to all password pages unless a page-specific message is added.
Page-specific messages only work when the path matches the page URL.
If your site uses heavy custom code, third-party scripts, or custom password page styling, additional testing may be needed.
This snippet changes the visible message only. It does not change how Super’s password protection works.
After updating the code, refresh the live site to check the result.