Advanced customization of login page and headers

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 Identity Service Center customizable files and Customization of Identity Service Center files for specific details about where these files are located.

The following templates are provided for customization in the Configure > Advanced Configuration > Custom File Management > All Files 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 directories/ui/images folder, locate the image that you want to customize. For example, directories/ui/images/identity.png.
2. Upload the image that you want to customize to the directories/ui/images folder with the appropriate filename.
3. Check the notification panel and take the appropriate action.

If you want to style the new static element, use the custom stylesheet. See Customize 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://<application_interface_ip>:9082/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://<application_interface_ip>:9082/itim/console" class="console_link" target="_blank">AdminUI</a>
					  	</ul>
		</div>
</div> 

Parent topic: Login page customization