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
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; } |
For best results, create logo images between 50 and 60 pixels high.
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; } |
This section describes how to customize the Identity Manager 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.
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.
* 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; |
. .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 } |
.tablehdr { background-image: url(../images/other/dot.gif); background-repeat: repeat-x; background-position: left bottom; background-color: #9999CC; } |
.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.
To see the changes without rebooting your server or browser, perform a Ctrl-Refresh on a page.
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.
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.
<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> |
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). |
<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> |