Customizing the UI Appearance

From ServiceNow Wiki
Home > Administer > Technical Best Practices > Planning Best Practices > Customizing the UI Appearance
Jump to: navigation, search
Technical Best Practices

1 Overview

Administrators can change the look and feel, or theme, of an instance for aesthetic reasons or to help distinguish it from other instances. For example, organizations often use multiple ServiceNow instances to separate development, testing, and production activities. To help users avoid accidentally changing the wrong instance, administrators can configure each with a visually distinct theme. Several approaches are available for defining an instance theme.

2 CSS Properties

To customize properties that control CSS styles, navigate to System Properties > CSS. Specify colors using predefined color names, RGB decimals, or RGB hexidecimals. Using a different color scheme for each instance makes it easier to determine which instance you are using. The following CSS properties are available:

  • Banner text color.
  • Banner and list caption background color.
  • Font used in forms and lists.
  • Base font size, which can be adjusted with the global font controls.
  • Button styles, including background color, border color, border width, and text color.
  • Field status indicator colors, including those for Changed, Mandatory Populated, Mandatory Unpopulated, and Read-only.
  • List cell vertical alignment.
  • Navigator menu styles, including text font size, background color, text color.
  • Header font name and size.
  • List and form caption color override.
  • Global text search background color, both for catalog results and knowledge base results.

3 UI Properties

To customize UI properties, navigate to System Properties > UI Properties. Some of the elements that can be customized with UI properties include:

  • Icons used in the activity formatter.
  • Background colors for Additional Comments and Work Notes fields.
  • Button placement on forms.

4 Menu Categories

Menu categories allow administrators to change the appearance of application menu labels. Use menu categories to make certain application menus stand out. The type of customizations you can apply to menu categories depends on the version of the UI. Menu category customizations are not supported in UI14.

To enable menu category customizations in UI15, you must first add a property with the following specifications:

  • Name: glide.ui14.navigator.use_border_color
  • Type: true | false
  • Value: true


To define a menu category:

  1. Navigate to System Definition > Menu Categories.
  2. Click New or open an existing menu category.
  3. Customize the appearance of the menu category based on your version of the UI:
    • UI15: In the Style field, define the border-color using an HTML color name, hexidecimal (hex) value, or RGB color value. For example, enter border-color: blue. In UI15, border-color is the only supported CSS style.
      The color appears as a vertical bar next to the application menu label.
    • UI11 / Classic: In the Style field, define CSS styles such as border-color, text color, and background-color. For example, enter border-color: blue; background-color: #e3f3ff; color: white.
  4. [Optional] Enter a Default order. If you create an application menu without specifying an order, the default order of the menu category is used to determine the relative position in the application navigator.
Note
Note: You may need to clear the instance cache and refresh the page after saving the menu category to see CSS or color changes.


To add an application menu to a category, use one of the following methods:

  • In the category record, add the application menu in the Application Menus related list.
  • In the application menu record, enter the category in the Category field.

5 Business Service Map Properties

To customize the business service map, navigate to BSM Map > Map Properties. Elements that can be customized with BSM map properties include:

  • How many child nodes to display when too many children exist for a parent CI.
  • Color used for the collapsed node when too many children exist for a parent CI.
  • Text style used for the collapsed node when too many children exist for a parent CI.
  • Color of:
    • Affected neighbor node
    • Node with an open change request
    • Node with an outage
    • Node with an open incident
    • Recently expanded nodes

6 Survey Question Header Colors

All of the lists and forms draw the color of their headers from the base color, allowing theming from the CSS properties. One notable exception is the survey, which has its own set CSS. It is possible to change the CSS by adding a property.

To change the color of the survey question headers:

  1. Enter sys_properties.form into the navigation filter to display a new Property form.
  2. Name the new property css.list.row.survey.background.color and enter the hexadecimal value of the desired color into the Value field.
  3. Save the property.

The survey should now use the desired color.

To change the color of the survey text color (from black to white, for example):

  1. Enter sys_properties.form into the navigation filter to display a new Property form.
  2. Name the new property css.list.row.survey.text.color and enter the hexadecimal value of the desired color into the Value field.
  3. Save the property.

7 UI Customization

Administrators can also customize the UI with scripts. For more information, see UI Scripts. For an example of a useful script for altering the look and feel of the instance, see Display Task Number as Window Title.

8 Additional Information

For more information on instance themes, see:

Was this article helpful?
Yes, I found what I needed
No, I need more assistance