Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Editing the source HTML of your login screen

Updated on February 7, 2022

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.

Note: 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:

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.
HTML rule for the LDAP login screen for an unauthenticated user session. Prompts users for the LDAP login ID and passwords.
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.
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.

    For example: 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.

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

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

  • Previous topic Configuring the browser requestor
  • Next topic Editing the text rules that contain the source CSS for login screens

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us