The Custom Portal Login Page is a minimally styled HTML page that uses custom HTML elements to enable you to easily customize it without needing to worry about the login functionality itself. In most, customizing this page is as simple as adding your colors and logo images to the provided custom elements.

By default, Bootstrap CSS is included on the page and Bootstrap classes are used to layout the page and apply a base-level of styling.

The default Custom Portal Login Page.

The following custom HTML elements are available to use:

background-visual

The background-visual element is used to display an image or video as a backdrop to the login page.

Attributes

  • src: A URL to an image or video to be used as a background for the entire page.
<background-visual
    src="https://www.mywebsite.com/images/my-login-background-image.png">
</background-visual>

login-form

The login-form element, as you might guess, displays a form with username and password fields and a login button to allow the end user to log in to the Custom Portal. You can customize it using the following attributes on the element itself.

Attributes

  • heading: Text to display above the login form. Default: "Welcome".
  • logo: URL to an image to display at the top of the login form. Default: "".
  • button-bg-color: The login button background color. Can be hex value, rgba, or named CSS color. Default: "blue".
  • button-text: Text to display in the login button. Default: "Sign In".
  • button-text-color: The login button text color. Can be hex value, rgba, or named CSS color. Default: "white".
  • bg-color: The form background color. Can be hex value, rgba, or named CSS color. Default: "gray".
  • text-color: The form text color. Can be hex value, rgba, or named CSS color. Default: "white".
  • link-text-color: The form link color. Can be hex value, rgba, or named CSS color. Default: "lightblue".
  • server: The server to send login requests to. This should normally be left blank unless the login page or Portal API is on a different server than the rest of the Custom Portal. Default: "".
<login-form
    heading="Welcome"
    logo=""
    button-bg-color="blue"
    button-text="Sign In"
    button-text-color="white"
    bg-color="gray"
    text-color="white"
    link-text-color="lightblue"
    server="">
</login-form>

Try it!

You can test out styling an example Login Page by copying the CodePen below.

The Custom Portal Login Page on CodePen.