Skip to main content

Editing the source HTML of your login screen

Suggest edit Updated on April 22, 2022
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.

Note: When you edit the source CSS, ensure that you follow Pega guardrails and understand potential security risks of your custom structure. 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.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. Optional: 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
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us