Customizing style sheets

Cascading Style Sheets (CSS) are used to style the appearance of the self-service user interface. You can edit the style sheets to modify the fonts, colors, and other styles associated with the self-service user interface. This section describes the location of the style sheets, and key styles to edit to customize the user interface to match the look and feel of your website.

The default deployed CSS files are compressed and optimized with bandwidth in mind for scalability. The non-optimized versions (with whitespace/formatting intact) can be found in the IM_HOME\defaults\custom directory. The CSS files stored in the WAS_PROFILE_HOME\installedApps\node_name\ITIM.ear\itim_self_service.war\custom directory are unsuitable for editing. Copy the default files stored in the IM_HOME\defaults\custom directory to another directory. Edit the style sheets and then copy your changed files to the WAS_PROFILE_HOME\installedApps\node_name\ITIM.ear\itim_self_service.war\custom directory.

The following figures provide a visual representation of page elements for which style changes can apply.

The following table provides a reference for the main CSS styles.

Table 2. CSS styles reference

Element	Example	Main style selector	Description
Page Title	Page Title	Type selector: h1	Element used for all page titles.
Section title	Subsection Title	Type selector: h2	Section titles for pages that do not contain a twisty.
Section title (twisty)	Twisty Title	Type selector: h3	Section titles on pages which contain twisty sections. The titles are intended to allow space for the twisty image.
Breadcrumbs		Type selector: #breadcrumbs	The breadcrumbs navigation trail shown on the top left above the page title.
Button, Button Hover, Disabled Button		Class selectors: .button .button_hover .button_disabled	These button styles cover the majority of buttons in the user interface. The hover style is used when a mouse hovers over the button
Inline button, Inline button hover		Class selectors: .button_inline .button_inline_hover	Used for a subset of buttons with special layout requirements.
Page/section descriptions	This is a description.	Class selector: .description	Page and section descriptions. The description is contained in a <div> block. Therefore, you could add borders, colors, etc. if desired.
Field labels	Field label	Type selector: label	Field labels on forms.
Text field	Text field (white field background default)	Class selector: input.textField_std	Standard text fields.
Required text field	Required text field (yellow field background default)	Class selector: input.textField_required	Required text fields.
Error text field	Error text field (red field border default)	Class selector: input.textField_error	Text fields in an error state.
Warning text field	Warning text field (yellow field border default)	Class selector: input.textField_warning	Text fields in a warning state.
Field/value tables	Field Name1 Field value1 Field Name2 Field value2 Multi-valued Field3 Item 1 Item 2 Item 3 Item 4 Multi-valued Field3 Item 1 Item 2	Class selector: table.nameValueTable	Field value tables are used through out the user interface to display a field name and one or more corresponding values. For example, the Information section of the request submitted pages use name value tables. The selector is shown for the table. Additional selectors exist that style the rows, cells, multi-value lists, and name columns for this table.
Password rules table		Class selectors: .pwRulesTable .pwRulesTable .ruleCol .pwRulesTable .valueCol .pwRulesTable .accountInfoCol .button_inline_hover	The password rules table is used to style the password rules sections through out the user interface. The table consists of three columns; a rule column, a value column, and an account information column.
Message box		div.messageBoxComposite	The message box composite is the main CSS selector for the message box. Additional selectors exist to specify the image / link / and message layout.

To customize the style sheets, complete these steps: