Service Manager

Using the Style Editor

Use the Style Editor to customize your workspaces with different colors of backgrounds, fields, menus, buttons, and text, as well as changing the logo. When you make a change in the left pane of the Style Editor, you can view the result in the right pane. This feature enables you to experiment with different color combinations, logos, and images for your Service Manager and Self Service Mobile user interfaces, and the login page.

•Accessing the Style Editor

•Working with Colors in the Style Editor

•Configuring the Application User Interface

•Configuring the Self Service Mobile User Interface

•Configuring the Login Page

Accessing the Style Editor

To access the Style Editor, do the following:

1.From the Configuration Console, click Build > User Interface Styles > Style Editor. The application displays the Style Editor.

2.Click the tab corresponding to the item to customize:

•Application: Configures the Service Manager user interface.

•Self Service: Configures the Self Service Mobile user interface.

•Login Page: Configures the Service Manager login page.

Working with Colors in the Style Editor

•About Using Colors in the Style Editor

•Changing a Color Using the Color Picker

•Changing a Color by Entering a Value

•Changing a Color by Copying and Pasting a Color Value

About Using Colors in the Style Editor

The Style Editor identifies colors by their hexadecimal values and adds two more characters at the right to identify opacity. For example, gray has a hex value of #808080. In the Style Editor, gray is shown as #808080FF. Opacity is applied to a color that is placed above another color in the user interface.

•FF means 100 percent opacity: You see only the upper color.

•80 means 50 percent opacity: You see an even blend of the upper and lower colors.

•00 means zero opacity: You see only the lower color.

See Working with the Color Picker.

Changing a Color Using the Color Picker

To change the current color of any item, do the following:

1.Choose an item in the left pane and click its hex value link.

2.Click the eyedropper icon. The application displays the color picker. See Working with the Color Picker.

Color Picker

3.Select a color and click OK.

4.To see the color change, click away from the hex value link. The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

5.Click Save.

Changing a Color by Entering a Value

To change the current color of any item, do the following:

1.Choose an item in the left pane and click its hex value link.

2.Press Backspace to erase the current value.

3.Enter a new value.

4.To see the color change in the right pane, click away from the Hex Value link.

Changing a Component's Color

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

5.Click Save.

Changing a Color by Copying and Pasting a Color Value

If you want to apply the color from one item to another, you can copy the color value from the source item and paste it to the target item. To change the current color of any item, do the following:

1.On a source item with the color to use, select the hex value and choose Copy from the pop-up menu.

2.For the target item to change, select the hex value and choose Paste from the pop-up menu.

3.To see the color change in the right pane, click away from the hex value link. The application marks the unsaved value with a red triangle at the left and the revert icon at the right.

4.Click Save.

Configuring the User Interface

•About Customizing the User Interface

•About the Options on the Application Tab

•Customizing the Styles for a Role

•Using the Style Editor

•Adding a Vanity URL for an Organizational Unit

•Customizing a Tenant

•Adding a New Logo to the Header or Footer

•Restoring the Default Logo in the Header or Footer

About Customizing the User Interface

Use the Application tab to customize the Service Manager user interface. The settings that you configure on the Application tab affect all roles in Service Manager except for Self Service Mobile. See Configuring the Self Service Mobile User Interface.

About the Options on the Application Tab

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

Section	Parameter	Description
Common	Text	Text color of all items in the home page, including dashboard panels.
	Background	Background color of the home page.
	Image	Add a background image to customize the user experience.
	Link	Text color of any links on the home page.
	Border	The color of all borders on the home page, including borders around dashboard panels and borders under headings.
	Mouseover	Background color of text when you hover your mouse over it.
	Active	Background color of text when it is the active line in a list.
Panels	Background	Background color of all panels and dialog windows.
	Header Color	Text color of the text in all panel headers.
	Header Background	Background color of all panel headers.
Buttons	Text	Text color of buttons.
	Background	Background color of buttons.
	Highlighted Color	Background color of buttons that are highlighted.
	Highlighted Text	Text color of buttons when they are highlighted.
Header & Footer	Logo	Displays the default logo and enables you to substitute your own logo. See Adding a New Logo to the Header or Footer.
	Text	Text color of the header bar area.
	Background	For a gradient texture, use different colors for the Background and Background Center fields. For a solid texture, use the same color for both.
	Background Center
	Link	Color of links in the header bar.
	Link Mouseover	Background color of text when you hover your mouse over it.
Workspace Tabs	Text	Color of text in the workspace area, including inactive tab labels.
	Background	Background color of the workspace bar.
	Active	Color of the top of the active tab. The active tab itself takes the Common Background color.

Customizing the Styles for a Role

You can also customize the interface for a specific user role. See Working with Roles. Changes you make to the default role affect all roles, except for any roles that were customized individually.

To customize the style for a role, do the following:

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

2.From the Role drop-down menu, choose a role.

3.Make your changes.

4.Click Save. The drop-down menu shows this role has been customized, in this example, Administrator (customized).

To restore a role to its default style, do the following:

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

2.From the Role drop-down menu, choose a role.

3.Click the remove customization icon at the top of the Style Editor. The drop-down menu shows this role has been restored to default.

See also Changing the Logo for a Role.

Managed Service Providers

•About Using Organizational Units and Vanity URLs for Managed Service Providers

•Adding a Vanity URL for an Organizational Unit

•Customizing a Tenant

About Using Organizational Units and Vanity URLs for Managed Service Providers

Managed Service Providers (MSPs) can provide custom user interface to their customers by customizing interfaces based on Organizational Units and Roles. Thereby all customers need not have the same application look and interface instead they can all look different with custom logos and theme.

Managed Service Providers (MSPs) can also create vanity URLs to allow MSP customers to have custom URLs for their tenants.

Before you begin, you must set the alternate login URL for the MSP tenant to customize. You do this in the Service Manager Configuration Database. See the Configuration Database Guide for Ivanti Service Manager for information about using the ConfigDB, including information setting the alternate login URL.

Adding a Vanity URL for an Organizational Unit

To add a vanity URL for a tenant, do the following:

1.Log in to Service Manager.

2.Open the Org Unit workspace.

3.Select and open a tenant that does not have a parent org unit assigned to it.

4.On the Details tab, ensure that Primary MSP Tenant and MSP Tenant check boxes are selected.

5.Enter information into the Vanity URL field.

6.Click Save.

Customizing a Tenant

To customize a tenant, follow the steps below:

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

2.Select the Adjust Style for drop-down arrow, choose the tenant from the list to which you wish to customize the application, login, and Self Service pages for.

3.Select the role from the Role field to customize.

4.Customize the styles as need be and click Save. You have customized this tenant.

5.To restore a tenant role to the default configuration, do the following:

a.

From the Tenant drop-down menu, select the tenant and the role.

b.

Click the remove customization icon at the top of the Style Editor. The drop-down menu shows that the tenant role has been restored to the default settings.

Adding a New Logo to the Header or Footer

In Service Manager, logos are scaled to fit a 50-pixel vertical space in the header. Because scaling reduces image quality, the preferred logo dimensions are 50 pixels high and up to 200 pixels wide. The maximum logo dimensions are 650 pixels high by 650 pixels wide.

You cannot upload a new logo if you are using Microsoft Internet Explorer Release 9.

To add a new logo to the header or footer in Service Manager, do the following:

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

2.Click the Application tab.

3.Under Header & Footer, click the default logo.

Clicking the Default Logo

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 new logo in place of the default logo on the header in the right pane.

Adding a Logo to the Header or Footer

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 Logo in the Header or Footer

To restore the default logo to the header or footer in Service Manager, do the following:

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

2.Click the Application tab.

3.Under Header & Footer, click the current logo.

4.Click the delete uploaded file icon . The application deletes the current logo and displays the default Service Manager logo 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.

Configuring the Self Service Mobile User Interface

•About Customizing the Self Service Mobile User Interface

•About the Options on the Self Service Tab

•Adding a New Logo to the Self Service Mobile User Interface

•Restoring the Default Logo for the Self Service Mobile User Interface

About Customizing the Self Service Mobile User Interface

Use the Self Service tab to configure the Self Service Mobile user interface. See Customizing the Responsive User Interface. In the current Service Manager release, the Self Service tab affects the Self Service Mobile role.

To restore the Self Service Mobile user interface to its default configuration, click the remove customization icon at the top of the Style Editor.

To change the theme:

1. Under Select Theme, click CDL and select Light from the drop-down list.

2. If you want to revert the theme setting, select the revert icon .
3. Click Save.

About the Options on the Self Service Tab

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

Section	Parameter	Description
Common	Text	Text color of all items in the home page, including dashboard panels.
	Background	Background color of the home page.
	Link	Text color of any links on the home page.
	Border	Color of all borders on the home page, including borders around dashboard panels and borders under headings.
	Mouseover	Background color of text when you hover your mouse over it.
	Active	Background color of text when it is the active line in a list.
Panels	Background	Background color of all panels and dialog windows.
	Header Color	Text color of the text in all panel headers.
	Header Background	Background color of all panel headers.
Buttons	Text	Text color of buttons.
	Background	Background color of buttons, such as in the chat area.
	Highlighted Color	Background color of a selected button.
	Highlighted Text	Text color of a selected button.
Header (and Loading Screen)	Logo	Displays the default logo and enables you to substitute your own logo. See Adding a New Logo to the Self Service Mobile User Interface.
	Text	Color of the Menu icon and IT Support Portal.
	Background	Color of the header background.
Accent (Header)	Visible	The accent is a horizontal line at the bottom of the header. True means visible. False means not visible.
	Width	Width of the accent line, from 0 to 38 pixels. The accent paints over the header.
	Color	Color of the accent line.
User Panel Info	Text	Color of the menu button and IT Support Portal.
	Background	Color of the user panel background.
Accent (User Panel)	Visible	The accent is a horizontal line at the bottom of the user panel. True means visible. False means not visible.
	Width	Width of the accent line. The first 200 pixels paints over the user panel. Additional pixels paint over the navigation menu.
	Color	Color of the accent line.
Navigation Menu	Text	Color of the text in the navigation menu.
	Background	Color of the background in the navigation menu.
	Mouseover	Background color of text when you hover your mouse over it.
	Active	Background color of text when it is the active line in the menu.

If the user panel and navigation menu are not visible in the right pane, click the menu icon to display them.

Adding a New Logo to the Self Service Mobile User Interface

In the Self Service Mobile user interface, logos are scaled to fit a 27-pixel vertical space in the header. Because scaling reduces image quality, the preferred logo dimensions are 27 pixels high and up to 200 pixels wide. The maximum logo dimensions are 650 pixels high by 650 pixels wide.

The settings you make under Header also affect the Self Service Mobile user interface loading screen.

Self Service Mobile User Interface Loading Screen

To add a new logo to the Self Service Mobile user interface, do the following:

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

2.Click the Self Service tab.

3.Under Header, 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 new logo in place of the default logo and on the header in the right pane.

Self Service Mobile User Interface Logo

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 Logo for the Self Service Mobile User Interface

To restore the default logo for the Self Service Mobile user interface, do the following:

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

2.Click the Self Service tab.

3.Under Header, click the current logo.

4.Click the delete uploaded file icon . The application deletes the current logo and displays the default Service Manager logo 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.

Configuring the Login Page

•Configuring the Login Page

•About the Options on the Login Page Tab

•Adding a Background Image to the Login Page

•Restoring the Default Background to the Login Page

•Editing the Title Text on the Login Page

•Adding a New Logo to the Login Page

•Restoring the Default Logo on the Login Page

•Adding Customized Text Above the Copyright on the Login Page

•Adding an Image to the Left Bar on the Login Page

•Restoring the Default Left Bar on the Login Page

•Adding an Image to the Top Bar of the Login Page

•Restoring the Default Top Bar on the Login Page

About Configuring 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
	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. NOTE: 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.

Background Image on the Login Page

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. This example shows the cloud layout.

Changing the 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 view a hyperlink, in the right pane, mouse-over the link to see the address in a pop-up message at the bottom of your screen.

Viewing a Hyperlink

8.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.

9.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.

Uploaded Image for the Left Bar 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 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.

Uploaded Image for the Top Bar on the Login Page

Note that the application superimposes the title (in this instance, Ivanti 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.