Sun Identity Manager Deployment Guide

Sample Labeling Exercises

The 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.

Changing product name
Changing masthead colors
Changing navigation tab colors
Changing Identity Manager behavior on commonly used pages

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;
}

Note –

For best results, create logo images between 50 and 60 pixels high.

Changing Masthead Appearance

To Change the Appearance of Identity Manager

Edit the styles/customStyle.css file.

Copy the following sections from styles.css into customStyle.css and modify as appropriate.

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

This section describes how to customize the Identity Manager navigation bar.

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.

Example 7–1 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

Example 7–2 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-position: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

Example 7–3 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.

Note –

To see the changes without rebooting your server or browser, perform a Ctrl-Refresh on a page.

Changing Identity Manager Behavior on Commonly Used Pages

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.

Example 7–4 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.

Disable the Forgot Your Password? button by setting disableForgotPassword to true.

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`).

Example 7–5 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>

To block the display of password and authentication question answers, set obfuscateAnswers to true. This setting causes answers to be displayed as asterisks in both the Administrator Interface and User Interface.

<Attribute name="obfuscateAnswers">
   <Boolean>true</Boolean>
</Attribute>