Skip to main content

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

Editing the text rules containing the source CSS for login screens

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

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 nameDescription
webweb.pychangepassword.cssCSS for the pyForgotPassword HTML.
py-login-screenCSS 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 RecordsTechnicalText.
  2. In the Streamname 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.

  • Previous topic Editing the source HTML of your login screen
  • Next topic Adding a new background image to your login screen

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