Skip to main content
LinkedIn
Copied!

Table of Contents

Editing the text rules containing the source CSS for login screens

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.

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.

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.

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.

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.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us