Page tree
Skip to end of metadata
Go to start of metadata

End User Look and Feel

The Look and Feel wizard for the End User Interface provides options for customizing several areas of the knowledgebase for end users. You can adjust the look and feel of table views, record forms, the advanced search interface, and the FAQ interface.

Everything else on the End User Interface (EUI) is defined with EUI templates in the EUI Templates table. The overall look and feel of the EUI is therefore determined by a combination of settings in this Look and Feel wizard and the CSS and HTML contained in the EUI templates.

The look and feel that a specific user sees is controlled by their primary team. You can save multiple look and feel configurations, called "schemes," and apply them to different teams in the system. This allows you to, for example, give end users in different companies a unique appearance. You could also instead create a single look and feel scheme that's applied to all end users.

There are separate Look and Feel wizards for the Power User and End User Interfaces, and options are tailored to access permissions for these different user types. For more information on customizing the Power User Interface, see Power User Look and Feel.

Look and Feel Wizard: End User Interface

The Look and Feel wizard for the End User Interface contains a number of tabs for customizing the appearance of the knowledgebase for end users. Because this is a longer and more involved wizard than others, remember that your changes won't be saved until you click Finish.

To access the Look and Feel wizard for the End User Interface:

  1. Go to Setup > Look and Feel > End User Schemes
  2. Edit an existing scheme, or click New to create a new scheme.

To preview interface changes:

  1. Change an interface element on the right side of the wizard. Notice that the example on the left side refreshes in real-time when the change is made.
  2. If desired, click Preview to open a Preview window where you can see the element as it will appear with the currently selected look and feel settings. 
  3. Click Finish at the top of the Preview window to exit the preview without leaving the wizard.

Global Tab

From the Global tab, you can define basic options that influence and control other aspects of the look and feel scheme, such as the base scheme, font choices, and a global color palette to apply to various elements on subsequent tabs. You can also set the logo and the icon that appears in the address bar.

Base Scheme

The Select Base Scheme drop-down provides a list of existing schemes, which function as a starting point for a new look and feel scheme. Once you've selected a scheme, click Apply Scheme to apply its settings to the current scheme.

Custom Fonts

The Upload Custom Fonts option is an attached file field that accepts multiple fonts in .ttf format. Once fonts have been uploaded, they can be used as base fonts and are available for use in any of the Look and Feel schemes in the knowledgebase. Fonts are not fully saved until you click Finish and close the wizard.

Font files are licensed software. When uploading custom fonts, use open source fonts or only fonts for which you have an appropriate distribution license.

Base Fonts

The primary font of the look and feel uses the Base Font 1 field. Optionally, define a second and third font. Base fonts define the default font choices for the scheme. To use a custom font, start typing the name into the Base Font fields, and then select the auto-complete option when it finds the font name. The selection is confirmed with a checkmark icon.

Once defined, the primary font will correspond to the Use Primary Font option in the font display selections on other tabs of the wizard. Changing the primary font in the Base Font 1 field allows you to quickly change the font across many parts of your look and feel. If the user's browser does not have the primary font available, the system will substitute the font choices in the next Base Font fields.

Base fonts will be available in the HTML field editor when they have been applied, including custom fonts.

To ensure users can view your fonts as intended, use only the most common fonts, such as Arial, Verdana, Open Sans, etc.

Global Color Palette

The color palette lets you define up to 20 colors, either from a drop-down list or through hexadecimal color codes. These colors can then be selected when setting the appearance of elements on the other wizard tabs.

To define a color, do one of the following:

  • Choose from the predefined list of colors.
  • Enter a hexadecimal code, such as #FFFFFF.
  • Click the color icon to open the Select Color window, and then manually select a color, or define RGB or HSV values. Note that HSV and RGB are alternatives, so entering one type will automatically convert the other.

When making a Look and Feel scheme, find good color options by browsing your organization’s or client’s website. Pay close attention to the colors used in graphics, icons, logos, backgrounds, buttons, text, headings, and hyperlinks.

Body Tab

The Body tab controls the appearance of various aspects of the interface, including background color, fonts, scrollbars, hyperlinks, and status messages.

Tables Tab

The Tables tab controls elements on the table view, such as the style of action bars, the search button, and the table rows.

Forms Tab

The Forms tab controls the appearance of a variety of elements, such as record forms, error messages, input forms, labels, buttons, comments, and code snippets.

Dashboards Tab

The Dashboards tab manages the appearance of Dashboards and widgets on the legacy EUI.

Printing Tab

The Printing tab controls the display of elements selected for printing. These elements include the background color used in viewing a record for printing, the label displays, and the field displays.

Content Tab

The Content tab lets you create custom headers and footers in the legacy EUI using HTML. You can use the built-in HTML editor to enter text directly into the text box, upload HTML text created in an editor of your choice, or insert an image. In the current EUI, the header and footer are controlled by EUI templates.

You can also use HTML to adjust the look and feel of the Support Home screen for the legacy EUI.

Apply Tab

The Apply tab controls the scheme name and which teams see the Look and Feel scheme. Checking the "and their subteams" option will also apply this scheme to the users whose primary team is a subteam of any of the selected teams. Checking the "Apply changes to me now" option will apply the scheme to you immediately, without having to logout first.

By defining a different look and feel for separate teams, you can allow each of your major customers to see their own logo, provide visually impaired staff with a larger font, and apply a variety of other customizations for specific sets of users.

Best Practice Tip

When you want to modify a Look and Feel scheme, it's best to first create a new scheme by saving an existing scheme under a new name. This allows you to test your changes and then either revert or refer to the original scheme. You can still use the existing scheme as a base by clicking Apply Scheme on the Global tab.