Advanced customization of login page and headers

Edit online

Use templates to add or customize static elements on the login page and headers.

You must have read or write access to the customizable files and the directories where they are maintained. See Location of IVIG Service Center customizable files and Customizing IVIG Service Center files (Software stack ) for specific details about where these files are located. Contact your system administrator if you do not have the necessary permissions.

The following templates are provided for customization in the WAS_HOME/profiles/app_server/config/cells/cell_name/itim/custom/ui/template directories/ui/template folder:
  • Login.html
  • Header.html
  • ForgotPasswordHeader.html

You can add or customize static elements (that do not involve scripting), such as links, images, and icons. For example, you can add a custom help desk link or a custom image to the login page or headers.

For customizing icons in the template files, complete the following steps:
  1. In the .../itim/custom/ui/original/images folder, locate the image that you want to customize. For example, .../itim/custom/ui/original/images/identity.png.
  2. Copy the image that you want to customize to the .../itim/custom/ui/images folder.
  3. Use the absolute paths while you add an image directly. For example, ./custom/ui/images/identity.png

If you want to style the new static element, use the custom stylesheet. See Customizing cascading styles.

After you customize the file, validate the html to ensure that the syntax is correct.

The following example shows the original Header.html template before customization:

<div>
	<div class="idxHeaderPrimary afterLogin">
		<div class="idxHeaderPrimaryInner"
			data-dojo-attach-point="primaryBannerNode">
			<ul class="idxHeaderPrimaryActionsLeading"
				data-dojo-attach-point="_leadingGlobalActionsNode">

				<div class="shadowUpper"></div>

			</ul>

			<ul class="idxHeaderPrimaryActionsTrailing"
				data-dojo-attach-point="_trailingGlobalActionsNode">
			</ul>

		</div>

	</div>
	<div class="itimSSNavHeader">

		</div>
</div>

In the following example, links are added to the customized header template.

<a href="http://www.google.com" class="linkTest" target="_blank">User Agreement</a> 

<div>
	<div class="idxHeaderPrimary afterLogin">
		<div class="idxHeaderPrimaryInner"
			data-dojo-attach-point="primaryBannerNode">
			<ul class="idxHeaderPrimaryActionsLeading"
				data-dojo-attach-point="_leadingGlobalActionsNode">

				<div class="shadowUpper"></div>

			</ul>
			<ul> <a href="http://localhost:9080/itim/self" class="selfcare_link" target="_blank">SelfCare</a>
					  	</ul>			<ul class="idxHeaderPrimaryActionsTrailing"
				data-dojo-attach-point="_trailingGlobalActionsNode">
			</ul>

		</div>

	</div>
	<div class="itimSSNavHeader">
		<ul> <a href="http://localhost:9080/itim/console" class="console_link" target="_blank">AdminUI</a>
					  	</ul>
		</div>
</div>