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.
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. |
- In the navigation pane in Dev Studio, open an existing Pega login Text rule by clicking .
- In the Streamname column, click the search icon.
- In the Search Text field, enter the rule name of the login screen or IDP button you want to edit.
- Click Apply.
- Click the resulting row. Pega Platform displays the associated CSS file.
- In the CSS field, enter your customized login screen CSS, or upload a new CSS file.
- Click Save. The customized CSS of your login screen is built into your application instance of Pega-Engine.
- Click Check-in to add changes to the unauthenticated Pega ruleset you created.
- Confirm the login screen reflects your customized CSS.
Previous topic Editing the source HTML of your login screen Next topic Adding a new background image to your login screen