PRPC Custom Login Screen

1 Introduction.......................................................................................................................3
1.1 Objective....................................................................................................................3
1.2 Scope..........................................................................................................................3
2 Implementation ................................................................................................................3
2.1 Rule sets.....................................................................................................................3
2.2 Access Groups...........................................................................................................3
2.3 Customize the files.....................................................................................................4
2.3.1 Update HTML/CSS ...........................................................................................5
3 Testing...............................................................................................................................7
1 Introduction
1.1 Objective
The standard login and log out splash screens are shipped with PRPC. This document
covers the details on how to replace the standard screens/contents with customized design
of login and logout screens based on the organizational logos and needs.

1.2 Scope
This document provides the implementation details for incorporating customized login
screen for PRPC applications

2 Implementation
2.1 Rule sets

Process Commander presents the log-in form to guest requestors — users who have
started the PRServlet servlet but are not yet authenticated. The RuleSet lists of guest
users are limited to those RuleSets and versions listed in the
PegaRULES:Unauthenticated access group.
Create a RuleSet and version to hold the rules that are to be available to un-authenticated
users. Give this RuleSet version a name that makes it easily identifiable, such as
LoginScreen: 01-01-01.

2.2 Access Groups

Create a new access group for users. Add the LoginScreen: 01-01-01 RuleSet version in
Production RuleSet of this access group as well as your current access group.
Note: You cannot edit any PegaRULES access groups.
 Log-out from the application and log-in again to access the new RuleSet version.

Add the new access group to the BROWSER requestor type and select the radio
button next to it.

Save the log-in and log-out screen component rules into the new RuleSet
version.

2.3 Customize the files

The log-in and log-out screens are comprised of the following images and rules:

• webwb.pxloginbackground.jpg — The background of the splash screens.

1738x1104px. you must replace this file with a binary file rule with a different
name, such as pxloginbackgroundCustom.

• webwb.pxloginbutton.png — the image used for the background of the "Login"

button. 125x36 px.You must replace this image with a binary file rule with a
different name. such as pxloginbuttonCustom.

• webwb.pxlogindivbackground.png —The background of the div element that

typically contains the organization logo, User Name and Password fields, and the
"Login" button. You must also replace this image with a binary rule file with a
different name. such as pxlogindivbackgroundCustom.
 • @baseclass.web-login — The HTML rule that defines the log-in splash screen. It
contains the CSS style definitions that define the background and button classes.
Copy this rule into your RuleSet, preserving the rule name.

• @baseclass.web-session-return — The HTML rule that defines the log-out splash

screen. It contains the same CSS style definitions the @baseclass.web-login
HTML rule. Copy this rule into your RuleSet, preserving the rule name.

• CopyrightNotice — The HTML fragment that contains the values that construct the
Copyright statement in the footer of the splash screens. Save this rule into your
RuleSet using a different name, such as CopyrightNoticeCustom.

Customize the files to suit the needs of your organization

Using any image software, create three images to replace
webwb.pxloginbackground.jpg,webwb.pxloginbutton.png &
webwb.pxlogindivbackground.png. Make the new images about the same size as the
default images.
Upload the replacement images into three new binary file rules, in the RuleSet
version you created.

2.3.1 Update HTML/CSS

Update your copied HTML rules @baseclass.web-login and @baseclass.web-session-

return to
Reference your three images:

body {
margin: 10px;
font-family: Tahoma, Arial, sans-serif;
font-size: 10pt;
text-align: center;
background-image:
url(webwb/desktopimages/pxloginbackgroundCustom.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #8da3b5;
}
#logo {
margin: 0 auto;
display: block;
width: 535px;
height: 535px;
background-image:
url(webwb/desktopimages/pxlogindivbackgroundCustom.png);
}
.loginButton {
background-image:
url(webwb/desktopimages/pxloginbuttonCustom.png);
width: 125px;
height: 36px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
Note: Be sure to adjust the height and width attributes if the dimensions of your uploaded
images differ from the originals..

Edit the footer div element to change the color and positioning of the Copyright
statement:

div#footer span {
padding: 2px;
font-size: 7pt;
color: #31669A;
vertical-align: middle;
width: 15%;
text-align: center;
white-space: nowrap;
}

In the document HTML, find and edit the following to include the updated copyright
information:

<div id="footer">
<pega:include name="CopyrightNoticeCustom"/>
 </div>

Caution You can further edit the text, colors, and layout in both the web-login and web-
session-return HTML rules . However, editing any <pega: > JSP tags, <form>, or <input>
elements may render you unable to log-in to your system

3 Testing
Empty your browser cache to see the latest changes.

The rules containing the new images are now available to guest users. However, your
workstation browser cache may contain the older files. To clear your workstation cache
(when using Internet Explorer), sign off from Process Commander, close any windows that
display the image, and choose Tools > Internet Options >General > Temporary Internet Files
> Delete.

Access your system. You should now be able to view the replacement log-in and log-out
splash screens