Table of Contents

Article

How to customize the login screen

Summary

The standard log-in and log-out splash screens included with V6.1 identify Pegasystems Inc. and contain Process Commander branding.

You can replace the contents and design of the login and logout screens to with something more appropriate to your organization by overriding three image (in binary file rules) and two rules.

Suggested Approach

To edit the log-in and log-out screens:

Create a RuleSet for guests

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.

  1. Create a RuleSet and version to hold the rules that are to be available to unauthenticated users. Give this RuleSet version a name that makes it easily identifiable, such as unauthenticated:01-01-01.

  2. Create a new access group for unauthenticated users. Add the unauthenticated:01-01-01 RuleSet version as a Production RuleSet to this access group as well as your current access group.
    Note: You cannot edit any PegaRULES access groups.

    Production RuleSet

  3. Log-out and log-in to access the new RuleSet version.

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


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

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
    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
    1. Using any image software, create three images to replace webwb.pxloginbackground.jpg, webwb.pxloginbutton.png, and webwb.pxlogindivbackground.png. Make the new images about the same size as the default images.
    2. Upload the replacement images into three new binary file rules, in the RuleSet version you created.
    3. Update your copied HTML rules @baseclass.web-login and @baseclass.web-session-return to reference your three images:

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

#logo {<br />margin: 0 auto;<br />display: block;<br />width: 535px;<br />height: 535px;<br />background-image: url(webwb/desktopimages/pxlogindivbackgroundCustom.png);
}

.loginButton {<br />background-image: url(webwb/desktopimages/pxloginbuttonCustom.png);<br />width: 125px;<br />height: 36px;<br />margin: 0px;<br />padding: 0px;<br />cursor:pointer;<br />}

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 {<br />padding: 2px;<br />font-size: 7pt;<br />color: #31669A;<br />vertical-align: middle;<br />width: 15%;<br />text-align: center;<br />white-space: nowrap;<br />}

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

<div id="footer"><br /><pega:include name="CopyrightNoticeCustom"/><br /></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.

 

  • Empty your browser cache to see the latest changes.

 

The rules containing the new images is 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.

Tags:

Published March 11, 2010 — Updated May 7, 2010


100% found this useful

Have a question? Get answers now.

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