Editing the text rules containing the source CSS for login screens

Your Pega application uses several rules that form the source markup HTML and CSS of your login screens. To customize these login screens, you can add your own HTML structure, CSS elements, or background images to the source fields in each of their respective HTML and Text rules.

Before you begin: If you have not yet done so, create an authentication service. Your application requires an authentication service for users to securely log in. For more information, see Creating an authentication service.

After creating an authentication service, you must configure your browser requestor. For more information, see Configuring a browser requestor.

Note: When editing the source HTML or CSS, make sure to observe Pega guardrails and analyze potential security risks of your customized structure. Observe notes included by the developers in the original HTML stating what not to change. For more information about guardrails, see Application Guardrails landing page.

If you want to edit the source CSS of your login screens, open the Text rules containing the CSS your Pega application uses and edit the source CSS. CSS rules containing your login screen source HTML include the following items:

Text login rules
Rule name Description
webweb.pychangepassword.css CSS for the pyForgotPassword HTML.
py-login-screen CSS for theWeb-Login,Web-login-LDAP, and pyDisplayAuthScreenSelector HTML.
py-login-screen-auth-providers CSS for the authentication IDP buttons in the pyDisplayAuthScreenSelector HTML.
  1. In the navigation pane in Dev Studio, open an existing Pega login Text rule by clicking Records > Technical > Text.
  2. In the Stream name column, click the search icon.
  3. In the Search Text field, enter the rule name of the login screen or IDP button you want to edit.
  4. Click Apply.
  5. Click the resulting row. Pega Platform displays the associated CSS file.
  6. In the CSS field, enter your customized login screen CSS, or upload a new CSS file.
  7. Click Save. The customized CSS of your login screen is built into your application instance of Pega-Engine.
  8. Click Check-in to add changes to the unauthenticated Pega ruleset you created.
  9. Confirm the login screen reflects your customized CSS.
What to do next: If you want to edit the source HTML of your login screens, see Editing the source HTML of your login screen.

If you want to add a new background image to your login screens, see Adding a new background image to your login screen.