Merging style sheet customization from a previous version

Edit online

After upgrading from a previous version of IBM® Tivoli® Identity Manager, you must reapply any customizations you made to the cascading style sheet for the self-service user interface.

Before you begin

Depending on how your system administrator customized your system, you might not have access to this task. To obtain access to this task or to have someone complete it for you, contact your system administrator.

You need access to the file system on which IBM Tivoli Identity Manager is deployed.

You must have a working knowledge of IVIG and cascading style sheets (CSS).

About this task

Customizations, including view definitions, that are defined through the administrative console are preserved during an upgrade. Updates to SelfServiceScreenText.properties are automatically merged as well.

However, after the upgrade program completes, the deployed self-service cascading style sheet (CSS) is restored to factory defaults. First merge the updated CSS values into your customized CSS skin created for your previous version of the product. Then reapply your customized files to the deployed self-service war.
Note: During the upgrade, ITIM.ear file is backed up from WebSphere® application server to IM_HOME/data/backup/ITIM.ear directory. You can view the itim_self_service.war/custom directory for a copy of the CSS skin that was deployed before the upgrade.

To merge CSS customizations, make the following additions and modifications to your original IBM Tivoli Identity Manager CSS files.

Note: If modifications for right-to-left (RTL) CSS files (for example, enduser_rtl.css) were made, merge the modifications by using a text comparison tool. Make the equivalent changes to the enduser_rtl.css file as the enduser.css file, but adjust for the right-to-left layout.

Procedure

  1. Open your existing CSS file with an editor.

    This file can be found in the directory IM_HOME/data/backup/ITIM.ear

    Note: For a separate system upgrade, copy the files from the deployed ITIM.ear file.
  2. Add the appropriate changes based on your migration path.
    See CSS updates.

    For migration from Version 5.0 to Version 6.0, add the CSS changes made in both Version 5.1 and Version 6.0.

    For migration from Version 5.1 to Version 6.0, add the CSS changes made in Version 6.0 only.

  3. Copy the updated CSS files to the Self Service user interface custom directory itim_self_service.war/custom.

Results

These modifications take effect immediately, and no restart of the IVIG application is required.

CSS updates

CSS changes added in 5.1:
enduser.css
Description: Added twistie for h2 headings.

Add the following text:

a.twistie_open h2{
	margin-left:0px;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	background-image: url("/itim/self/images/twistie_open.gif");
}

a.twistie_closed h2{
	margin-left:0px;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	background-image: url("/itim/self/images/twistie_closed.gif");
}
Description: Changed Review Activities instructions to be a twistie.

Add the following text:

/* Review Activity Styles */
#instructionDetailTwistieDiv {
	white-space: expression("pre"); /* IE */
	white-space: -moz-pre-wrap; /* Firefox */
	word-wrap: break-word;
}
/* End Review Activity Styles */
Description: Added CSS Styles for User Recertification.

Add the following text:

/* Recertification items table styles */
table.recertItemsTable {
	width: auto;
}

table.recertItemsTable th {
	padding: .2em 1em .2em 1em;
	background-color: #C0C0C0;
	white-space: nowrap;
	text-align: left;
}

table.recertItemsTable td {
	padding: .2em 1em .2em 1em;
	border: 1px solid #C0C0C0;
}

table.recertItemsTable tr.recertItemRow td {
	border-bottom-style: none;
}

table.recertItemsTable tr.recertSubItemRow td {
	border-top-style: none;
	border-bottom-style: none;
}

table.recertItemsTable tr.altRow {
	background-color: #F6F6F6;
}

table.recertItemsTable .selectAllOptions {
	display: inline;
	padding: 0 .5em 0 .5em;
	font-weight: normal;
}

table.recertItemsTable .selectAllOptions a {
	padding: 0 .3em 0 .3em;
	color:#1375D7;
	font-weight: normal;
}

table.recertItemsTable .recertItemSelectAllOptions {
	display: inline;
	padding: 0 .5em 0 .5em;
	font-weight: normal;
	font-size: .8em;
}

table.recertItemsTable .recertItemSelectAllOptions a {
	padding: 0 .3em 0 .3em;
}

table.recertItemsTable a.recertExpandCollapseLink {
	margin-right: .2em;
}

table.recertItemsTable a.recertExpandCollapseLink img {
	border: none;
	vertical-align: bottom;
}

table.recertItemsTable div.recertItem {
	display: inline;
	margin-bottom: 2px;
}

table.recertItemsTable td.recertItemImpact {
	text-align: center;
}

table.recertItemsTable div.recertItemDescription {
	max-width: 300px;
	font-size: .8em;
}

table.recertItemsTable div.recertItemImpactedBy {
	display: inline;
	margin-bottom: 2px;
}

table.recertItemsTable td.recertItemActionRecertify {
	width: expression("0%"); /* IE */
	width: 1px; /* Firefox */
	white-space: nowrap;
	padding-right: 0;
	border-right: none;
}

table.recertItemsTable td.recertItemActionRecertifyErrorNone {
	width: expression("0%"); /* IE */
	width: 1px; /* Firefox */
	white-space: nowrap;
	padding: .2em 0 .2em 13px;
	border-right: none;
}

table.recertItemsTable td.recertItemActionRecertifyErrorExists {
	width: expression("0%"); /* IE */
	width: 1px; /* Firefox */
	white-space: nowrap;
	padding: .2em 0 .2em 5px;
	border-right: none;
}

table.recertItemsTable td.recertItemActionReject {
	width: 0%;
	white-space: nowrap;
	padding-left: 0;
	border-left: none;
	border-right: none;
}

table.recertItemsTable td.recertItemActionBlank {
	height: 24px;
}

table.recertItemsTable label.recertItemAction {
	display: inline;
}

table.recertItemsTable td.recertItemSelectAll {
	width: 0%;
	white-space: nowrap;
	padding-left: 0;
	border-left: none;
}

table.recertItemsTable .recertSubItem {
    font-size: 1em;
    margin: 0 0 0 1em;
}

table.recertItemsTable div.recertItemDecision {
	display: block;
	margin-bottom: 2px;
	margin-top: 5px;
}
/* End recertification items table styles */

.simpleLink:link, .simpleLink:visited {
	font-weight: normal;
}


.requiredInstruction {
	font-size: .8em;
	margin: 1em 0 0 1em;
	background-image: url("/itim/self/images/required_field.gif");
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 12px;	
}

CSS changes added in 6.0:

enduser_extra.css
Import enduser_extra.css

Add the following text:

@import "enduser_extra.css";
Description : Background color of self console has been changed to whitesmoke color.

Add the following style in body tag selector

background-color:	#F5F5F5;
Description : Background color of banner has been changed to light blue.

Update the following style in banner id selector:

background-color: black;
to
background-color: #c8e0f8;
Description : Various changes in login screen.

Update the loginContainer id selector using the following style:

#loginContainer{
		width:619px;
		margin:20px auto;
		margin-left: auto ;
		margin-right: auto ;
    background-position:left top;
  	background-repeat:no-repeat;
		background-color:#FFF;	
		padding:0;
		border: solid 1px #bbbbbb;
		font-family:Arial,Verdana,Helvetica,Tahoma,sans-serif;
		font-size:12px;
		color:#555555; 
		overflow: hidden;
		text-align: left;
		}
Description : Layout changes for product login image

Add the following style in loginImage id selector:

margin-left: 40px;
margin-top: -30px;
Description : Layout changes and font size changes for product version

Update content in loginVersion id selector:

margin-left: 110px;
font-size:10px;
Description : Layout changes and font size changes for login content

Update content in loginContent id selector

margin-left: 40px ;
margin-right: 20px ;
font-size:14px;
Description : Styling for new help link in login screen

Add the following style:

#loginToolbar {
		margin-right: 20px ;
		}
Description : Styling for message box

Add the following style:

#messageBox {
		margin-right:80px;
		font-size:14px;
		}
Description : Add an extra tag selector h2i to the existing group selector declaration box for h1, h2, h3. Also, add corresponding style for h2i tag selector.

Add the following style:

h2i {
		font-size:120%;
		border-bottom-style: none;
		border-bottom-width: 2px;
		margin-bottom: 0px;
		margin-left: 15px;
		}
Description : Added hand cursor for anchor.

Add the following style in pseudo class a:LINK, a:VISITED:

cursor: hand;
Description : Added a new class descriptioni.

Add the following style:

.descriptioni {
		display: block;
    margin-bottom: 20px;
		margin-left: 15px;
		}
Description : Added new style for tables.

Add the following style:

span.tableLayout {
		display:inline-block;
		min-width:80%;
		margin : 10px 10px 10px 0 ;
		}
Description : Updated width for table column header.

Add the following style in thead th selector:

width: auto;
Description : Added a new class dataTable

Add the following style:

.dataTable {	
		width:100%;	
		margin: 0px;
		}
Description : Added a new class customHeader

Add the following style:

customHeader {
		text-align: left;
		border-style: solid;
		background-color: #E6E6E6;
 		border-width:1px 1px 1px 1px;
		border-color:#C8C8C8 #C8C8C8 #737373 #C8C8C8;
		width: auto;
		}
Description : Added a new class customHeaderTable

Add the following style:

.customHeaderTable {
		border-top-style:hidden;
		}
Description : Updated the width of anchors in column header

Add the following style in thead th a:LINK, thead th a:VISITED selector:

width: auto;
Description : Added style for account tables

Add the following style:

table #global_table_accounttype {
  	width: 20%;
		}

		table #global_table_userid_10 {
    width: 10%;
   	}

		table #global_table_description_30 {
		width: 30%;
		}
Description : Added a new class viewRequestsCustomHeaderStyle

Add the following style:

.viewRequestsCustomHeaderStyle{
		text-align: left;
		padding: 5px;
		vertical-align: middle;
		}
Description : Added style for custom header labels

Add the following style:

div.viewRequestsCustomHeaderStyle label{
		display: inline;
		font-weight:bold;
		}
Description : Added new style for recertItemOwnershipType

Add the following style:

table.recertItemsTable div.recertItemOwnershipType {
  	max-width: 300px;
		font-size: 1em;
		}
Description : Added styles for table cells

Add the following style:

div.tableCellContent {
		white-space:nowrap;
		overflow:hidden; 
		width:25em;
		text-overflow:ellipsis;"
		}
Add an extra tag class tfootTd to the existing group selector declaration box for tfoot th selector. Also, add an extra tag class label to the existing group selector declaration box for label selector.

Description : Removed following styles that are not used anymore.

Remove the following styles:

th.reviewActivitiesCustomHeader {
		text-align: left;
		border-style: solid;
		border-width:1px 1px 1px 1px;
		background-color: #E6E6E6;
		border-color:#FFFFFF #C8C8C8 #737373 #FFFFFF;
		}

.simpleLink:link, .simpleLink:visited {
		font-weight: normal;
		}

		.label_accessibility {
			display: none;
		}

.requiredInstruction {
			font-size: .8em;
			margin: 1em 0 0 1em;
			background-image: url("/itim/self/images/required_field.gif");
			background-repeat: no-repeat;
			background-position: center left;
			padding-left: 12px;	
		}

What to do next

These modifications take effect immediately. A restart of the IVIG application is not required.