Styling the Login Page

Use the Login Page tab to configure the Service Manager login page. The same login page is displayed for all roles and user interfaces.

For Cloud: The customizations to the login page are saved in the tenant that you are configuring. Use the URL that is configured for the Tenant record in the ConfigDB in order to access the login page

For On-Premise: The application will select which customizations to displayed based on the address used in the browser. For the customizations to be correctly displayed, you must use the URL that is configured in the ConfigDB in order to access the customized login page

To restore the login page to its default configuration, click the remove customization icon at the top of the Style Editor.

About the Options on the Login Page Tab

For information on making color changes, see Working with Colors in the Style Editor.

Section	Parameter	Description
Common	Layout	The name of the current layout to display the drop-down menu. Legacy (original Service Manager login page design) Cloud Fancy Enterprise
	Text	Text color of all common text including the user roles in the login page.
	Links	Text color of the Forgot Password? link.
Background	Color	Background color of the login page.
	Image	An image for the background. Click Upload file to add an image. See Adding a Background Image to the Login Page.
Title	Show	Cloud, fancy, and enterprise layouts only. True means visible. False means not visible.
	Text Title	The text title. See Editing the Title Text on the Login Page. You cannot localize the title text.
	Text Color	Color of the title text.
	Size	Size of the title text.
Logo	Show	Cloud, Fancy, and Enterprise layouts only. True means visible. False means not visible.
	Scale	Display size of the logo as a percentage of the original image.
	Image	The logo image. Click Upload file to add a logo. See Adding a New Logo to the Login Page.
Form	Border Color	For legacy layouts only. The color of the border.
	Border Width	For legacy layouts only. A wide border displaces other objects on the form. To hide the border, set the width to zero.
	Field Text	Color of the text in the User name and Password fields.
	Field Background	Background color of the fields.
	Field Border	Color of the of the border around the fields.
	Field Text Size	Size of the text in the User name and Password fields.
	Label	Color of the words User name and Password.
	Button Background	Color of the Login button.
	Button Text	Color of the word Login.
Copyright	Additional Text	Additional text for your implementation, such as your copyright text. Click this link to enter text above the copyright. See Adding Customized Text Above the Copyright on the Login Page. NOTE: You cannot localize the copyright.
	Text Color	Color of the copyright text.
	Links	Color of the hyperlinks in the copyright text.
Bars	Height	For legacy layouts only. Height of the top and bottom bars in pixels. To hide the background, set the width to zero. For the background to appear, set the bar height to be greater than the border width.
	Background Color	Color of the space above the top bar and below the bottom bar. The background has a gradient with white.
	Border Width	Width of the top and bottom bars in pixels. To hide the bars, set the width to zero.
	Border Color	Color of the top and bottom bars.
Left Bar	Background	For cloud layouts only. Color of the left bar.
	Width	Width of the left bar in 15-pixel increments. To hide the bar, set the width to zero.
	Image	An image for the left bar. Click Upload file to add an image. See Adding an Image to the Left Bar on the Login Page.
Top Bar	Background	For enterprise layouts only. Color of the top bar.
	Height	Height of the top bar in pixels. To hide the bar, set the height to zero.
	Image	An image for the top bar. Click Upload file to add an image. See Adding an Image to the Top Bar of the Login Page.

Adding a Background Image to the Login Page

When you fill a background using an imported image, Service Manager anchors the image at the upper left corner and either repeats the image to fill the background or crops the image to fit the background.

When using a small image, such as a logo, you expect the background to be repeated, so the login page should look OK regardless of its background size.

When using a large image, such as a landscape, you want the image to fill the background of the login page without repeats or excessive cropping.

In the table below, we show the background image size of the Service Manager login pages in a maximized browser window on two common monitor resolutions, without any cropping or repeating of the image.

Layout	1680 x 1050 Monitor	1920 x 1080 Monitor
Legacy	1680 x 871 pixels	1920 x 901 pixels
Others	1680 x 991 pixels	1920 x 1021 pixels

To add a new background image to the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Background, click Upload file.

4.Click the select file icon .

5.Navigate to the file of the image to add and double-click the file name. The application displays the image in place of the default background. This example shows the legacy layout.

The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

6.Click Save.

Restoring the Default Background to the Login Page

To restore the default background on the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Background, click the current image.

Restoring the Default Background Image to the Login Page

4.Click the delete uploaded file icon . The application deletes the current image and displays the default background image in its place.

The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

5.Click Save.

Editing the Title Text on the Login Page

To edit the title text on the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Title, click in the Title Text field.

4.Edit the information.

The application provides a title in English. You cannot localize this text.

The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

5.To keep your text changes, click OK.

6.Click Save.

Adding a New Logo to the Login Page

The maximum logo dimensions are 650 pixels high by 650 pixels wide. You can scale your logo to fit the login page.

To add a new logo in the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Logo, verify that Show is set to true.

4.Click Upload file.

5.Click the select file icon .

6.Navigate to the file of the logo to add and double-click the file name. The application displays the new logo in place of the default logo on the login page.

7.Adjust the scale of the logo.

The application saves the value with a red triangle at the left and the revert icon at the right.

8.Click Save.

Restoring the Default Logo on the Login Page

To restore the default logo in the Self Service tab:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Logo, click the current logo.

4.Click the delete uploaded file icon . The application deletes the current logo and returns the default Service Manager logo in its place.

The application marks the value is marked with a red triangle at the left and the revert icon at the right.

5.Click Save.

Adding Customized Text Above the Copyright on the Login Page

You cannot edit the Service Manager copyright statements. But you can add text that appears above them on the login page. To add text above the Service Manager copyright, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Copyright, click in the Additional Text field to open the Copyright dialog box.

4.Edit or add copyright text.

To access the other text tools, click the menu icon . You can also widen the Translation window until all text tools are visible.

5.Enter your text:

•To apply a text style, highlight the text to be styled and then click the appropriate text tool.

•To enter text in a different language, click the Language menu and choose a language.

•To add a hyperlink, highlight a word or phrase in the text and click the hyperlink tool . Enter the link in the pop-up window and click OK.

6.Click OK.

7.Optional: To test a hyperlink, in the right pane, right-click the link and choose Open in new tab. If the address is valid, the destination site opens in the new browser tab.

The application marks the value with a red triangle at the left and the revert icon at the right.

8.Click Save.

Adding an Image to the Left Bar on the Login Page

When you fill the left bar using an imported image, Service Manager anchors the image at the upper left corner and crops the image to fit the bar or enlarges the image to fill the bar. You can set the width of the left bar but not its height:

•On a 1680 x 1050 monitor, the left bar can be up to 991 pixels high.

•On a 1920 x 1080 monitor, the left bar can be up to 1021 pixels high.

First determine the dimensions of the left bar as it appears on your production servers. Then choose an image, without excessive enlargement or cropping, to fill the left bar.

To add a new background image to the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Left Bar, click Upload file.

4.Click the select file icon . 

5.Navigate to the file of the logo to add and double-click the file name. The application fills the left bar on the login page with the uploaded image.

The application marks the value with a red triangle at the left and the revert icon at the right.

6.Click Save.

Restoring the Default Left Bar on the Login Page

To restore the default image for the left bar on the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Left Bar, click the current image.

4.Click the delete uploaded file icon . The application deletes the current image and displays the default background image in its place.

The application marks the value with a red triangle at the left and the revert icon at the right.

5.Click Save.

Adding an Image to the Top Bar of the Login Page

When you fill the top bar using an imported image, Service Manager anchors the image at the upper left corner and either repeats the image to fill the bar or crops the image to fit the bar. You can set the height of the top bar but not its width.

•On a 1680 x 1050 monitor, the top bar can be up to 1680 pixels wide.

•On a 1920 x 1080 monitor, the top bar can be up to 1920 pixels wide.

If you plan to fill the top bar with a single image, such as a landscape, first determine the dimensions of the top bar as it appears on your production servers. Then, choose an image without repeats or excessive cropping to fit the top bar.

To add a new background image to the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Top Bar, click Upload file.

4.Click the select file icon .

5.Navigate to the file of the logo to add and double-click the file name. The application displays the uploaded image in the top bar on the login page.

Note that the application superimposes the title (in this instance, HEAT Service Management) over the image. In this example, the text color was darkened for better contrast against the background image. See Editing the Title Text on the Login Page.

The application marks the value with a red triangle at the left and the revert icon at the right.

6.Click Save.

Restoring the Default Top Bar on the Login Page

To restore the default background on the login page, do the following:

1.Access the Style Editor. See Accessing the Style Editor.

2.Click the Login Page tab.

3.Under Top Bar, click the current image.

4.Click the delete uploaded file icon . The application deletes the current image and displays the default background in its place.

The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

5.Click Save.