|
| |
| Sun[TM] Identity Manager 8.0 Deployment Overview | |
Chapter 7
Private Labeling of Identity ManagerThis chapter identifies the basic components you will need to rebrand the Identity Manager interface to match your company’s intranet or corporate style guidelines. Private labeling is the customization of the interface to meet these corporate guidelines.
Private Labeling TasksThere are three general categories of private labeling tasks:
- Changing default header content by incorporating your corporate logo, changing default text, and altering colors in both the User and Administrator interfaces.
- Changing display fonts and component colors throughout the application through the use of a style sheet located in styles\customStyle.css.
- Changing Identity Manager behavior on commonly used pages by editing the System Configuration object. These tasks, which include disabling the Forgot Your Password? button, are frequently performed by users while rebranding the product interface.
Architectural FeaturesPrivate labeling includes editing the components listed in the following table.
Style Sheets
Four style sheets affect the display characteristics of text in the product interface:
- lockhart.css — Contains Sun corporate interface styles for web applications.
- style.css — Defines the display attributes of pages throughout both interfaces. This file also controls the images contained in the headers.
- customStyle.css — Contains any changes to the default settings contained in style.css. and lockhart.css. Settings in this file override the settings in style.css and lockhart.css. Customers should not edit the preceding files, but instead put their customizations into customStyle.css.
- Styles-Help.css — Defines style classes used in online help and pop-up help (i-Help).
Default Text
Default text occurs throughout the product interface in the following:
Text Attributes
Display attributes include
Default Style Settings
The $WSHOME/styles/style.css and lockhart.css files contains default style settings. Do not edit these files.
Customized File
The customStyle.css file contains customizations and is not overwritten during product upgrades. Settings defined there will override the default settings in style.css and lockhart.css. Include all your customizations in customStyle.css.
JSP Files
Several JSP files contain the default settings for headers: userHeader.jsp, bodyEnd.jsp, and bodyStart.jsp. Do not edit these files. Instead, to preserve your customizations during product upgrade, edit only the JSPs listed in Architectural Features.
WPMessages_en.properties File
The $WSHOME/WEB-INF/lib/idmcommon.jar file contains the message catalog entries that you can extract into a WPMessages_en.properties file for editing.
Customizing HeadersCustomization tasks are identical for both interfaces, although you must edit different files.
Note
Avoid editing any .jsp file other than the specified files. If you must edit one, first back up the .jsp to a safe location before copying, editing, and renaming it.
Changing Header Appearance
The most typical labeling tasks involve
- Changing the image referenced in the header section of the page from the default Sun logo to corporate standards. Replace or remove images by editing customStyle.css.
- Suppressing the Identity Manager logo
- Using corporate internal look and feel guidelines, specifically borders, header, and background colors
- Changing “logged in as ...” txt. You cannot change this through .jsps. You can edit the custom message catalog. See Changing Default Information Displayed in the Identity Manager User Interface Home Page.
Customizing Identity Manager PagesTypical customizations include:
Customizing the Home Page
Adding a List of Quick Links
A typical customization to the home page involves adding a custom list of links to tasks or resources that users frequently access in your environment. These quick links offer a shortcut through the product interface to frequent destinations.
To add a list of quick links
Changing the Default “Logged in as ..” Text
- Imported the following XML file:
- Add the following line to the System Configuration object within the <Configuration><Extension><Object> element:
<Attribute name='customMessageCatalog' value='AltMsgCatalog'/>
- Add the following line:
<msg id=’UI_NAV_FOOT_LOG’>mytext{0}</msg>
- Save change and restart your application server.
Changing Page Title and Subtitle
To change the default Login page title and subtitle and welcome message, change the following entries in the custom message catalog:
To change this text, follow the procedure for extracting and editing the WPMessages_en.properties file detailed in Changing the Default “Logged in as ..” Text.
Code Example 7-1 Default Message Catalog Settings
UI_LOGIN_IN_PROGRESS_TITLE=Log In (In Progress)
UI_LOGIN_CHALLENGE=Enter Your {0} Password
UI_LOGIN_CHALLENGE_INFO=You are required to enter the password you logged into
[PRODUCT_NAME] with before the requested action can be completed.
UI_LOGIN_TITLE_LONG=[PRODUCT_NAME] LogIn
UI_LOGIN_WELCOME=Welcome to the Sun Java™ System [PRODUCT_NAME] system.
Enter the requested information, and then click <b>Login</b>.
UI_LOGIN_WELCOME2=Welcome to the Sun Java™ System [PRODUCT_NAME] system.
Enter your user ID and password, and then click <b>Login</b>. If you can't remember your password, click <b>Forgot Your Password?</b>
UI_LOGIN_TITLE=Log In
UI_LOGIN_TITLE_TO_RESOURCE=Log In to <b>{0}</b>
Changing Background Image on the Login Page
You can change the background image by editing customStyle.css as follows:
div#loginFormDiv {
background:
url(.../images/other/login-backimage2.jpg)
no-repeat;
margin-left: -10px;
padding: 0px 0px 280px;
height: 435px;
Customizing the Browser Title Bar
You can now replace the product name string in the browser title bar with a localizable string of your choice.
- Import the following XML file:
Code Example 7-2 XML to Import
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE Configuration PUBLIC 'waveset.dtd' 'waveset.dtd'>
<Configuration name='AltMsgCatalog'>
<Extension>
<CustomCatalog id='AltMsgCatalog' enabled='true'>
<MessageSet language='en' country='US'>
<Msg id='UI_BROWSER_TITLE_PROD_NAME_OVERRIDE'>Override Name</Msg>
</MessageSet>
</CustomCatalog>
</Extension>
</Configuration>
- Using the Identity Manager IDE, load the System Configuration object for editing. Add the following line inside the <Configuration><Extension><Object> element:
<Attribute name='customMessageCatalog' value='AltMsgCatalog'/>
- Also in the System Configuration object, you must change ui.web.browserTitleProdNameOverride to true.
- Save this change to the System Configuration object, and restart your application server.
Changing Default Information Displayed in the Identity Manager User Interface Home Page
The Identity Manager User Interface home page provides a “dashboard” area that summarizes basic information about the logged-in account, including the default strings listed in the following table.
All attributes belong to the ui.web.user.dashboard object.
Table 7-2 Default Settings of ui.web.user.dashboard Object
Default Configuration Object Setting
Description
displayLoginFailures
Displays the number of unsuccessful password or authentication question login attempts if a maximum login attempts value has been configured in an account’s account policy.
displayPasswordExpirationWarning
Displays messages related to password expiration if password policy is applied to an account.
displayApprovals
displayAttestationReviews
displayOtherWorkItems
displayRemediations
Enable the display of the following work item types for all users: Approvals, Attestations, Remediations, and Other.
Note: Even if the configuration object is true for a particular type, the interface string may not appear based on the permissions granted to a user for his account.
displayRequests
Specifies the number of outstanding requests for role, group, or resource updates for an account
displayDelegations
Displays a string that indicates that the user has defined an approval delegation. Options include enabled or disabled.
By default, the value of the preceding configuration objects is set to true, and these strings will appear in the Identity Manager User Interface. To suppress the display of any string, set it to false in the System Configuration object.
You can edit the System Configuration object through the Identity Manager IDE. For information on using the Identity Manager IDE, see Using the Identity Manager IDE in Identity Manager Deployment Tools. For general information about the System Configuration object, see Appendix A, "Editing Configuration Objects."
Changing the Appearance of the User Interface Navigation Menus
The navigation menus of the User Interface requires two settings in the system configuration object:
Changing Font Characteristics
Display attributes typically specify the following basic font display characteristics:
Table 7-3 Font-related Display Characteristics
Display Attribute
Description
family
For example, Helvetica or Arial
size
Specified in point size (for example, 14 point)
weight
Unspecified indicates normal weight. When specified, typically bold
color
Typically specified as black (title -- font-family, font-size, font-weight, color
Certain components can be further defined by additional characteristics. For example, buttons can be defined with a background color. The alignment of the text and button label is another characteristic.
Editing Font Characteristics
To edit, copy from styles.css and paste into customStyle.css. Then, modify the selected setting in customStyle.css.
Example
The following entry represents the default settings for each page title:
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
color: C;
Sample Labeling ExercisesThe following example illustrates how to suppress the Identity Manager logo and reference a custom image in the masthead of the page. Consult the example files located in the sample/rebranding directory.
Replacing the Identity Manager Logo with a Custom Logo
To change the logo in the Administrator or User interfaces, copy the following snippets from styles/style.css into customStyle.css and replace the Identity Manager logo image with your .image file:
td.MstTdLogo {
width: 31px;
height: 55px;
background: url(../images/other/logo.jpg) no-repeat 5px;
}
td.MstTdTtlProdNam {
background: url(../images/other/xyz_masthead.jpg) no-repeat 10px 30px;
padding:10px 10px 0px 10px;
vertical-align:top;
white-space:nowrap;
height: 75px;
width: 350px;
}
Changing Masthead Appearance
To change the look-and-feel of Identity Manager,
- Edit the styles/customStyle.css file.
- Copy the following sections from styles.css into customStyle.css and modify as appropriate.
Code Example 7-3 styles/customStyle.css File
MstDiv {background-image:url(../images/other/dot.gif);background-repeat:repeat-x;
background-position:left top;background-color:#000033}.MstTblEnd {background: url(../images/other/dot.gif);background-color: #666;height: 1px;}
td.MstTblEndImg {
background-color: #666;
height: 1px;
background: url(../images/other/dot.gif);
font-size:1px;
}
td.MstTdLogo {
width: 31px;
height: 55px;
background: url(../images/other/logo.jpg) no-repeat 5px;
}
td.MstTdSep {
width: 1px;
height: 61px;
background: url(../images/other/dot.gif) no-repeat center;
}
td.MstTdTtlProdNam {
background: url(../images/other/xyz_masthead.jpg) no-repeat 10px 30px;
padding:10px 10px 0px 10px;
vertical-align:top;
white-space:nowrap;
height: 75px;
width: 350px;
}
Changing Navigation Tabs
Customizing the Identity Manager User Interface Navigation Bar
The Identity Manager User Interface implements a second XPRESS form that contains the navigation bar. This means that the rendered page has two <FORM> tags, each with a different name attribute:
<form name="endUserNavigation">
and
<form name="mainform">
When you insert JavaScript code into the Identity Manager User Interface navigation bar, be sure that you are referring the correct form. To do so, use the name attribute to specify which <FORM> tag you want to reference: document.mainform or document.endUserNavigation.
Customizing Navigation Links
Copy and edit the following code to customize the navigation links across the top of the page. Change the background-color to an appropriate color.
Code Example 7-4 Customizing Navigation Links
* LEVEL 1 TABS */
.TabLvl1Div {
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
background-color:#333366;
padding:6px 10px 0px;
}
a.TabLvl1Lnk:link, a.TabLvl1Lnk:visited {
display:block;
padding:4px 10px 3px;
font: bold 0.95em sans-serif;
color:#FFF;
text-decoration:none;
text-align:center;
}
table.TabLvl1Tbl td {
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left top;
background-color:#666699;
border:solid 1px #aba1b5;
}
table.TabLvl1Tbl td.TabLvl1TblSelTd {
background-color:#9999CC;
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
border-bottom:none;
Changing Tab Panel Tabs
Code Example 7-5 Changing Tab Panel Tabs Identity Manager
.TabLvl2Div {
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
background-color:#9999CC;
padding:6px 0px 0px 10px
}
a.TabLvl2Lnk:link, a.TabLvl2Lnk:visited{
display:block;
padding:3px 6px 2px;
font: 0.8em sans-serif;
color:#333;
text-decoration:none;
text-align:center;
}
table.TabLvl2Tbl div.TabLvl2SelTxt {
display:block;
padding:3px 6px 2px;
font: 0.8em sans-serif;
color:#333;
font-weight:normal;
text-align:center;
}
table.TabLvl2Tbl td {
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left top;
background-color:#CCCCFF;
border:solid 1px #aba1b5;
}
table.TabLvl2Tbl td.TabLvl2TblSelTd {
border-bottom:none;
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
background-color:#FFF;
border-left:solid 1px #aba1b5;
border-right:solid 1px #aba1b5;
border-top:solid 1px #aba1b5;
table.Tab2TblNew td {background-image:url(../images/other/dot.gif);background-repeat:repeat-x;background-positi on:left top;background-color:#CCCCFF;border:solid 1px #8f989f}
table.Tab2TblNew td.Tab2TblSelTd {border-bottom:none;background-image:url(../images/other/dot.gif);background-repeat:repeat- x;background-position:left bottom;background-color:#FFF;border-left:solid 1px #8f989f;border-right:solid 1px #8f989f;border-top:solid 1px #8f989f}
Changing Sorting Table Header
.tablehdr {
background-image: url(../images/other/dot.gif);
background-repeat: repeat-x;
background-position: left bottom;
background-color: #9999CC;
}
Changing User / Resource Table Component
Code Example 7-6 Changing User / Resource Table Component
.tablesorthdr {
/*background-color: #BEC7CC;*/
background-image:url(../images/other/dot.gif);
background-repeat:repeat-x;
background-position:left bottom;
background-color:#CCCCFF;
border:solid 1px #aba1b5;
}
.treeContentLayout {
background-color: #9999CC;
}
.treeBaseRow {
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #fff;
border-left: solid 1px #8F989F;
border-right: solid 1px #8F989F;
border-bottom: solid 1px #8F989F;
}
.treeButtonCell {
background-image:url(../images/other/dot.gif);
background-color:#666699;
color: #fff;
}
}
.treeMastHeadRow {
background-color: #333366;
}
.treeMastHeadRow {
background-color: #333366;
}
.treeMastHeadText {
background-color: #333366;
background-image: url(../images/other/dot.gif);
}
You can customize many other options (including text style and size, alignment, and the colors and configurations of other objects) by following the same procedures.
Changing Identity Manager Behavior on Commonly Used Pages
To customize Identity Manager behavior on commonly used pages, you can alter settings in the System Configuration object.
Customizing with the System Configuration Object
You can customize many commonly altered properties of the User or Administrator interfaces can by editing the System Configuration object. The attribute <Attribute name='ui'> and its subobjects control the product interface. Modifying the attributes under this attribute can change the behavior of Identity Manager.
Miscellaneous Modifications: Admin Section of File
The admin section of System Configuration object file contains several attributes that are related to the Administrator Interface.
- To disable the Forgot Your Password? button on the Administrator login page, set disableForgotPassword to true.
- Setting supressHostName to true will suppress the display of the hostname for processes on the Task Details page.
Code Example 7-7 Modifying the Admin Section of a File
<Attribute name='admin'>
<Object>
<Attribute name='disableForgotPassword'>
<Boolean>false</Boolean>
</Attribute>
<Attribute name='workflowResults'>
<Object>
<Attribute name='suppressHostName'>
<Boolean>false</Boolean>
</Attribute>
</Object>
</Attribute>
</Object>
</Attribute>
Miscellaneous Changes: User Section of the File
The user section of the System Configuration object file includes options for the User Interface.
The workflowResults attribute contains attributes for customizing the display of workflows for non-administrative users, as indicated below:
Table 7-4 Attributes for Customizing Workflows for Non-Administrative Users
Attribute
Description
anonSuppressReports
Controls whether the workflow diagram is displayed in the anonymous user workflow status pages (anonProcessStatus.jsp).
suppressHostName
Controls whether the hostname is included in workflow status pages for end-users (processStatus.jsp).
suppressReports
Controls whether workflow diagrams is displayed to all non-anonymous users (processStatus.jsp).
Code Example 7-8 Customizing Workflows for Non-Administrative Users
<Attribute name='user'>
<Object>
<Attribute name='disableForgotPassword'>
<Boolean>false</Boolean>
</Attribute>
<Attribute name='workflowResults'>
<Object>
<Attribute name='anonSuppressReports'>
<Boolean>false</Boolean>
</Attribute>
<Attribute name='suppressHostName'>
<Boolean>false</Boolean>
</Attribute>
<Attribute name='suppressReports'>
<Boolean>false</Boolean>
</Attribute>
</Object>
</Attribute>
</Object>
</Attribute>