LinkedIn
Copied!

Table of Contents

Editing the source HTML of your login screen

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

Make your login screens immediately recognizable and promote your brand by customizing the login screens of your application. For example, you can edit the source HTML of the login screen to display your own logo or custom text.

When you edit the source CSS, ensure that you follow Pega guardrails and understand potential security risks of your custom structure. For more information about guardrails, see Application Guardrails landing page.
The following HTML rules contain the source HTML for your login screens:

Web-Login
HTML rule for the login screen for an unauthenticated user session. The rule is used by the /prWeb/ servlet and prompts users for the login ID and password.
Web-Login-LDAPAuth
HTML rule for the LDAP login screen for an unauthenticated user session. Prompts users for the LDAP login ID and passwords.
pyDisplayAuthScreenSelector
HTML rule for an authentication screen for an unauthenticated user session. The rule is used by the /PRAuth/ servlet and requests an identity provider (IDP) for single sign-on. If users select a third-party IDP on this screen, the system redirects users to an IDP login screen that is not managed by Pega. Prompts users for the login ID, password, and single sign-on credentials.
pyForgotPassword
HTML rule for the Forgot Password screen for an unauthenticated user session.
  1. In the header of Dev Studio, in the Search field, search for the name of the HTML login rule that you want to edit.

  2. In the Generate For list, choose the screen type:

    • If your customized login screen uses HTML directives, select HTML.
    • If your customized login screen uses JavaServer screen tags, select JSP.
  3. In the Browser Support list, choose which browsers can use your screen:

    • If all modern browsers support your customized login screen, select Modern browsers.
    • If only Microsoft Internet Explorer supports your customized login screen, select IE only.
  4. In the Accessibility list, tag whether your customized login screens meet the accessibility requirements for your application.

    For more information about accessibility compliance reports, see Using the Accessibility report.
  5. In the HTML source field, enter your customized login screen HTML.

    In the source HTML of the Web-Login rule, find the code fragment that defines the logo source:
    <img src= 'webwb/pzpega-logo.svg' class="logo" alt="Pega Logo" />

    Replace the existing value with the new image source in the following format:

    <img src= 'webwb/New Logo File Name' class="logo" alt="Pega Logo" />
  6. If your customized login references clipboard pages, click the Pages and Classes tab, and then enter the required clipboard pages and the classes to which they belong.

  7. Click Save.

    The customized HTML of your login screen is built into your application instance.
  8. Save the changes by clicking Check-in.

  9. Optional:

    To verify how the login screen reflects your customized HTML, in the Actions list, select Preview.

Related Content

Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.