LinkedIn
Copied!

Table of Contents

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

Version:

Only available versions of this content are shown in the dropdown

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.

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.

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

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

  8. Optional:

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

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.