Skip to main content


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

Login screen customization

Updated on February 7, 2022

You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.

For example, you can edit the login screen to display a new logo and background image that identifies your organization or application, or change the styling of text fields, buttons, or the background element.

Unauthenticated users only have access to certain pages in your application. Your application has several rules that correspond to each screen that unauthenticated users can access. You can adapt any of the screens to your business needs by changing the rules in the screen's source HTML or in the cascading style sheets (CSS).

  • Skins

    Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

  • Updating the UI Kit in your application

    Ensure that your application includes a modern, responsive, and consistent UI by updating the out-of-the-box UI Kit layer in your application stack.

  • Updating the Cosmos theme in your application

    Build your application by using the latest UI tools. By ensuring that the Cosmos theme ruleset is up to date, you provide your application with a modern and responsive interface.

  • Managing Cosmos UI settings in case designer

    Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.

  • CSS helper classes

    CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.

  • Uploading custom font files

    Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.

  • Configuring the browser requestor

    By associating a browser requestor and your application with an unauthenticated access group and ruleset, you enable customization of your login screens. When you define an unauthenticated access group in the browser requestor form, you give unauthenticated users access to the login screens of your application.

  • Editing the source HTML of your login screen

    Make your login screens immediately recognizable and promote your brand by customizing the login screens of your application. For example, you can edit the source HTML of the login screen to display your own logo or custom text.

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

    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.

  • Adding a new background image to your login screen

    Personalize the appearance of your login screen by integrating a custom background image into your login screen CSS.

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