Customize style sheets

Customize style sheets

We can change the appearance of the self-service user interface by customizing Cascading Style Sheets (CSS).

Cascading Style Sheets (CSS) are used to style the appearance of the self-service user interface. We 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 the 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 directories\defaults\custom directory. The CSS files stored in the directories\itim_self_service.war\custom directory are unsuitable for editing. Copy the default files stored in the directories\defaults\custom directory to another directory. Edit the style sheets and then copy your changed files to the directories\itim_self_service.war\custom directory. The following table shows the CSS files that can be modified to adjust the self-service user interface.

CSS file name Description

end_user.css CSS file that contains main CSS styles for left to right language orientation.

end_user_rtl.css CSS file that contains main CSS styles for right to left language orientation.

widgets.css CSS file that contains styles used for widgets, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.

widgets_rtl.css CSS file that contains styles used for widgets, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.

dateWidget_ltr.css CSS file that contains styles used for date widgets, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.

dateWidget_rtl.css CSS file that contains styles used for date widgets, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.

time.css CSS file that contains styles used for time widgets, such as those contained in Profile, Account, and RFI forms. Editing this file takes more advanced CSS skills.

customForm.css CSS file that contains styles used for layout forms, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.

customForms_rtl.css CSS file that contains styles used for layout forms, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.

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

Figure 2. Page elements for style changes (continued)

Figure 3. Page elements for style changes

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

Element Example Main style selector Description

Page Title Page Title Enter selector: h1 Element used for all page titles.

Section title Subsection Title Enter selector: h2 Section titles for pages that do not contain a twisty.

Section title (twisty) Twisty Title Enter selector: h3 Section titles on pages which contain twisty sections. The titles are intended to allow space for the twisty image.

Breadcrumbs Enter 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 Enter 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...

Download copy of the CSS files in the directories\itim_self_service.war\custom directory. See Manage custom files.
Upload the CSS files from the directories\defaults\custom directory to another directory, then modify the files in that directory and upload the updated files to the directories\itim_self_service.war\custom directory. Be sure to back up the custom version of the files we created so your customizations are not lost.
See Manage custom files.

Parent topic: Self-service user interface customization

CSS file name	Description
end_user.css	CSS file that contains main CSS styles for left to right language orientation.
end_user_rtl.css	CSS file that contains main CSS styles for right to left language orientation.
widgets.css	CSS file that contains styles used for widgets, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.
widgets_rtl.css	CSS file that contains styles used for widgets, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.
dateWidget_ltr.css	CSS file that contains styles used for date widgets, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.
dateWidget_rtl.css	CSS file that contains styles used for date widgets, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.
time.css	CSS file that contains styles used for time widgets, such as those contained in Profile, Account, and RFI forms. Editing this file takes more advanced CSS skills.
customForm.css	CSS file that contains styles used for layout forms, such as those contained in Profile, Account, and RFI forms, for left to right language orientation. Editing this file takes more advanced CSS skills.
customForms_rtl.css	CSS file that contains styles used for layout forms, such as those contained in Profile, Account, and RFI forms, for right to left language orientation. Editing this file takes more advanced CSS skills.

Element	Example	Main style selector	Description
Page Title	Page Title	Enter selector: h1	Element used for all page titles.
Section title	Subsection Title	Enter selector: h2	Section titles for pages that do not contain a twisty.
Section title (twisty)	Twisty Title	Enter selector: h3	Section titles on pages which contain twisty sections. The titles are intended to allow space for the twisty image.
Breadcrumbs		Enter 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	Enter 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.