This content has been archived.

Table of Contents

How to customize the login screen (6.2 SP2)

PRPC's standard login and logout screens identify Pegasystems and feature PRPC branding:

standard login screen

You can replace the images used by the login and logout screens with elements that reflect the brand of your organization by following the steps outlined below.

This article covers PRPC 6.2 SP2. To replace the login screen in earlier versions, refer to the links in the Related content section.

Suggested approach

You can customize some or all of the graphic elements for the login and logout screens. However, to make any changes, you need to create and deploy a custom ruleset. Place in that ruleset the rules that hold and display your custom images.

Create and deploy a custom ruleset and access group for visitors

PRPC presents the login page to guest requestors — users who have started the PRServlet servlet but have not yet been authenticated by logging in. By default, the system uses the PRPC:Unauthenticated access group for guest requestors.

To customize the pages, you need to create an alternate access group and a ruleset for your custom rules for the login and logout screens, and to instruct the system to use them instead of the defaults for guest requestors.

1. Create a ruleset for your custom rules

Create a ruleset and version to hold the rules for the login and logout screens. Give the ruleset a name that makes it easily identifiable, such as unauthenticated:01-01-01.

unauthenticated ruleset

Log out and back in to make the new ruleset is available in pick lists.

2. Create a new access group and add the new ruleset to it

Create a new access group for unauthenticated users. Specify the application and version as "PegaRULES" and set the current ruleset version.

Add the guest role.

Add unauthenticated:01-01 in the Production RuleSets field to the new access group and to your own current access group (so you can save rules into it).

26446-6guest.png

When you save the access group, a warning appears that the ruleset you created is not defined in the application. You can disregard the warning for this ruleset.

3. Save copies of the login and logout screen rules to the new ruleset

Save copies of these six standard rules to customize into the unauthenticated:01-01 ruleset:

Screen Rule  
Login  
  pxloginbackground

A binary file rule holding the background image for the login page.

It holds a jpg image of 1738 x 1104 pixels.

Save the rule with a distinct name, such as pxloginbackgroundCustom.

  pxloginbutton

A binary file rule holding the image for the login button.

It holds a png image of 125 x 36 pixels.

Save the rule with a distinctive name, such as pxloginbuttonCustom.

  pxlogindivbackground A binary file rule holding the image for the area around the operator ID and password fields, often displaying a corporate logo and text. It holds a png image, 524 x 524 pixels. Save the rule with a distinctive name, like pxlogindivbackgroundCustom.
  pxlogindivbackgroundwithcaptcha

When CAPTCHA login security is enabled, the system uses this binary file rule to provide the background for the login fields and the CAPTCHA challenge.

It holds a png image of 524 x 700 pixels.

Save the rule with a distinctive name, such as pxlogindivbackgroundwithcaptchaCustom.

Note If you customize some login images but not this one, you may prevent CAPTCHA features from displaying when they are enabled.

For information about CAPTCHA, see How to Configure Login Security and Password Policies.

  web-login

This HTML rule defines the login page, specifying , (among other things) the images to use.

Copy this rule into your ruleset without changing the name.

Logout  
  web-session-return

This HTML rule defines the logged-out page, specifying (among other things) the background image to use.

Copy this rule into your ruleset without changing the name.

4. Update the HTML rules to reference the custom rules

Open web-login and update the references to the rules that the login page uses with the names of the binary rule copies that you saved. The references are in the Cascading Style Sheet (CSS) declaration near the top of the page:

For the page background, change the bolded text to pxloginbackgroundCustom:

body
margin: 10px;
font-family: Tahoma, sans-serif;
font-size: 10pt;
text-align: center;
background-image: url(webwb/desktopimages/pxloginbackground.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #8da3b5;

Similarly, update the references for the two images that frame the login fields: one for use when CAPTCHA is enabled and one for when it is disabled:

<pega:choose>
<pega:when java='<%= tools.findPage("LoginError") != null %>'>
<pega:choose>
<pega:when test='(LoginError.pxShowCaptcha=="true")'>
background-image: url(webwb/desktopimages/pxlogindivbackgroundwithcaptcha.png);
height: 705px;
</pega:when>
<pega:otherwise>
background-image: url(webwb/desktopimages/pxlogindivbackground.png);
height: 524px;
</pega:otherwise>
</pega:choose>
</pega:when>
<pega:otherwise>
background-image: url(webwb/desktopimages/pxlogindivbackground.png);
height: 524px;
</pega:otherwise>
</pega:choose>

If you wish to use a custom image for the login button, update the bolded text in this reference:

.loginButton
background-image: url(webwb/desktopimages/pxloginbutton.png);
width: 125px;
height: 36px;
margin: 0px;
padding: 0px;
cursor: pointer;

To use a custom image for the background to the logout screen, open Web-Session-Return and update the bolded text in this reference with the name of the version of pxloginbackground that you saved:

body
margin: 10px;
font-family: Tahoma, Arial, sans-serif;
font-size: 10pt;
text-align: center;
background-image: url(webwb/desktopimages/pxloginbackground.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #8da3b5;
To use a different background image for the logout screen, create and reference a new binary rule file, and reference that image in Web-Session-Return (see below).

Save the HTML rules.

Update the Requestor Type

Requestor Type data instances define the types of requestors that can access PRPC, such as a browser session, an external application, or an internal background process. The BROWSER Requestor Type establishes what is available to someone trying to access PRPC in the normal way, through the browser.

  1. In the Rules Explorer, select SysAdmin > Requestor Type.
  2. Select the Requestor Type "BROWSER" for System Name "pega".
  3. Add the unauthenticated access group to the Access Groups list and click the radio button beside it:
    Requestor Type
  4. Save the Requestor Type. Make sure the radio button remained selected beside the "unauthenticated" access group. If it did not, select it again and save the rule again.

You have prepared the ruleset and have updated the Requestor Type; however, you cannot see any changes yet because you have not updated any images or text.

Add custom images

You are now ready to add your custom images to the binary rules.

You can easily download the original images to customize in the image-management software of your choice. There are two options:

  1. Open the binary rule form that holds the image you want to modify. Click Download File to download the image to your computer.
    download image
  2. In Designer Studio, click Pega button> User Interface > Image Gallery. Browse for the image that you want and right-click it. Select Save Picture As... to save the image to your local computer.

You can start from the existing images or create images from scratch. Make sure you save the image with the same extension that the original image has (usually .jpg or .png).

When the images are ready, add them to their binary file:

  1. Open the binary file you want to update.
  2. Click Upload File. A form appears where you specify the image file you want to use.
    upload file
  3. Once you have located the file, click Upload File to upload it and close the upload form.
    In the binary rule form, the original image has disappeared.

  4. Save the rule to display the image you uploaded.

When you are ready to review your changes, clear your browser cache and then go to your login page. Your custom login screen will appear. (The example below is intentionally bright to emphasize the extent to which you can make changes):

customized login screen

Suggest Edit

100% found this useful


Related Content

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.