Custom Login Page - Create - Colorblock Layout

This page describes how to configure a custom login page with a colorblock layout.

To create a custom login page, go to Admin > Tools > Core Functions > Core Preferences > Custom Login Page. Then, select the New Page button.

To edit a custom login page, go to Admin > Tools > Core Functions > Core Preferences > Custom Login Page. Then, select the Edit link for the appropriate page.

Layout

In the Layout section, select Colorblock. As you select a template, the left side of the screen is updated to display a preview of the login page.

General Settings

In the General Settings section, provide the following information:

  • Title - Provide a name for the login page This name should help administrators identify the page and its purpose. It is important to note that the title that you provide will be visible in the page URL (e.g., https://portalname.csod.com/Login/render.aspx?id=TITLE&corpname=portalname).

Custom Settings

In the Custom Settings section, provide the following information:

Login Box and Logo

  • Display Logo - Select this checkbox to display a logo image at the top of the login box.
  • Company Logo - Select the Choose File button to select an image file from your device to use as the logo image on the login page. The selected image is only displayed if the Display Logo checkbox is selected. Image size should be less than 1MB. You can upload jpg, jpeg, png, or gif file types. Animated gifs are accepted if multiple images are desired.
  • Logo Position - From the drop-down, select whether the selected company logo is displayed aligned to the left, right, or center of the login box.

Login Page and Block Color

  • Image - Select the Choose File button to select an image file from your device to use as the image on the login page. Image size should be less than 1MB. You can upload jpg, jpeg, png, or gif file types. Animated gifs are accepted if multiple images are desired.
  • Block Color - Select the background color for the login box. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Welcome Message

  • Welcome Message - In this field, enter the welcome message that is displayed to users within the login box.
  • Welcome Message Color - Select the color in which the welcome message is displayed. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Username and Password Fields

  • Username - In this field, enter the label for the Username field. This text appears to the left of the Username field. This text should help prompt the user to enter the appropriate information in the field.
  • Username Color - Select the text color for the Username field label. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.
  • Password - In this field, enter the label for the Password field. This text appears to the right of the Password field. This text should help prompt the user to enter the appropriate information in the field.
  • Password Color - Select the text color for the Password field label. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Login Button

  • Login Button Text - In this field, enter the text that should appear on the Login button.
  • Login Text Color - Select the text color for the login button text. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.
  • Login Button Color - Select the color for the login button. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Forgot Username and Password Links

  • Forgot Username - In this field, enter the label for the link that users should select if they have forgotten their username.
  • Forgot Username Color - Select the text color for the Forgot Username link. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.
  • Forgot Password - In this field, enter the label for the link that users should select if they have forgotten their password.
  • Forgot Password Color - Select the text color for the Forgot Password link. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Contact Support Message and Email Address

Administrators can configure a message and contact information in the event that users need support logging in to the portal.

  • Support Email Pretext - In this field, enter the text that appears before the "Contact Support" link. For example, you may enter "Need help logging in?"
  • Support Email Color - Select the text color for the Support Email Pretext. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.
  • Support Email Address - In this field, enter the email address that users should contact if they need support logging in to the portal.
  • Email Text - In this field, enter the text that prompts users to contact support. For example, you may enter "Contact us!"
  • Support Email Link Color - Select the text color for the link to contact support. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Login Box Footer

  • Footer Notes, If Any - In this field, enter any text that should appear at the bottom of the login box.
  • Footer Text Color - Select the text color for the footer text. You can enter the Hex value in the text field or select the color box to enter RGBA values, Hex values, or manually select a color from the color palate.

Page Title

  • Page Title - In this field, enter the text that will appear in the browser tab when the login page is open. If no value is entered here, then the site name is displayed.

Save/Cancel

After configuring the login page, select the Save button in the upper-right corner of the page. You are redirected to the Custom Login Pages page where you can further test the login page using the URL and Preview option.

Select Cancel to discard your changes.