Skip to main content


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

Editing the text rules that contain the source CSS for login screens

Updated on February 7, 2022

Make the branding of your site more consistent by editing the source CSS of your login screens. For example, you can customize the screens so that their appearance fits the site's color scheme and typography.

Note: When you edit the source CSS, ensure that you follow Pega guardrails and understand potential security risks of your custom structure. For more information about guardrails, see Application Guardrails landing page.
The following CSS rules contain the source CSS for your login screens:

webweb.pychangepassword.css
CSS for the pyForgotPassword HTML.
py-login-screen
CSS for the Web-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 of Dev Studio, click Records.

  2. Expand the Technical category and click Text File.

  3. In the File Name column, click the Filter icon, and then find the rule name of the login screen or IDP button that you want to edit.

  4. Click the CSS rule form name that you want to open.

  5. On the Main tab, enter your customized login screen CSS or upload a new CSS file.

    For example: To change the background color of the login screen, enter the following code:
    body { 
     background-color: <your color hexa code (#ffffff)>;
     }
  6. Click Save.

    Result: The customized CSS of your login screen is built into your application instance.
  7. Save the changes by clicking Check-in.

  8. To verify how the login screen reflects your customized CSS, in the Actions list, select Preview.

  • 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.

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

Close Deprecation Notice
Contact us