Look and Feel End User and Power User Wizards
The Look and Feel wizard provides access to a wide range of options for changing the appearance of the knowledgebase. You can add or remove header/footer HTML and company logos, control text font, size, and color, and change the appearance of buttons, tabs, and other user interface elements. There are separate Look and Feel wizards for the Power User and End User interfaces, with options tailored to access permissions for these different group types.
- Manage End-User Schemes – the End Under wizard for instance, does not allow configuration of elements that are not visible to End User groups.
- Manage Power User Schemes – the Power User wizard allows configuration of the appearance of internal-only options.
Many of the settings allow you to preview changes as they are selected, on the left side of the look and feel options. The example will refresh in real-time whenever a change is made to that option. In addition, clicking the Preview link opens a preview window where the user can see the element as it will appear with the current selected look and feel settings.
To exit the Preview screen without leaving the Look and Feel wizard, click the Finish button at the top.
Customizing the Look and Feel
The look and feel of both the Power User interface and the End User interface is governed by the user's primary team. You can give each of your major customers, or even internal departments, a unique appearance using the look and feel wizards.
To create a new Look and Feel scheme:
- Go to Setup > Look and Feel, and click Manage End User Schemes or Manage End User Schemes.
- Click New.
To edit an existing scheme, click the Edit icon to open the wizard.
From the Global tab you can name or rename your scheme, change the logo, and define base fonts and color choices.
Choose a starting scheme
The Select Base Scheme drop-down provides a list of existing scheme settings, which you can use as a starting point for a new look and feel scheme.
Upload 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 the Primary Font and are available for use in any of the Look and Feel schemes in the knowledgebase. Fonts are not fully saved until you Finish and close the wizard. Important Note: Font files are licensed software. Be sure to use open source fonts when uploading custom fonts, or only fonts for which you have an appropriate distribution license.
To use a custom font, start typing the name into the Base Font fields, then select the auto-complete option when it finds the font name. This selection is confirmed with a check-mark icon.
Set the Base Fonts
Enter the Primary font, and optionally define a Second and Third font. Base fonts define the default font choices for the scheme.
Once defined, the Primary Font appears in the font menu for all other font display selections. Selecting "Primary font" allows you to quickly change the font across many parts of your look by changing only the value of "Base Font 1" in the Global tab.
If the user's browser does not have the Primary font available, the system will substitute the Second, then Third choice fonts if possible.
Base fonts will be available in the HTML field editor when they have been applied, including custom fonts.
Global Color Palette
The color palette lets you define up to 20 colors, either from a drop-down list or through hexadecimal color codes, which can then be selected when setting the appearance of other elements in the system.
To define a color, do one of the following:
- Choose from a predefined list of colors.
- Enter a hexadecimal code, for instance, #ffffff.
- Click the color icon to open the Select Color window, then manually select a color or define RGB or HSV values.
Change the Logo
To use a custom logo, select Use custom logo, then use the dialog to upload your image file.
This page helps you set the appearance of the Toolbar elements, including tabs, menus, font faces and sizes, colors, and borders.
The Toolbar refers to the row of tabs visible in the Power User interface that appear at the top of any administration Setup wizards. For instance, some of these tabs may be named named Fields, Layouts, or Rules. This tab also controls the appearance of drop down menus in Tables.
The examples in the left hand column show what any new settings change will look like. Click Preview to see how the changes will look in context.
The Other or Left Pane tab
The third tab in the look and feel wizard is different depending on whether you are editing end user or power rser schemes.
- End Users/Other – For end user schemes, the tab is called Other and includes the Calendar and Go button settings.
- Power Users/Left Pane – For power user schemes, the tab is called Left Pane and additionally controls the Look and Feel of power user-only tools, such as the Chat tool, Calendar, and Setup wizards.
Here, for example, you can:
- Configure the way Title Bar looks, including settings like gradients and rounded corners.
- Control the appearance of the Calendar.
Change the appearance of the Go button in the top pane.
The controls on the Body tab help you customize various aspects of the Power User Interface layout, including background, fonts, scrollbars, hyperlinks, and status messages.
This controls the appearance of tables:
This tab controls the appearance of record forms, error messages, input forms, labels, buttons, comments, and code snippets. The elements on this tab are:
- Record Body – Defines the color, border styles, and padding that surround records form while the user is viewing or editing the record.
- common area. – Defines the color and height of the record
- Form Background Color and Labels – Defines the font, color, and padding of embedded tables.
- Custom Field Labels – Defines the font, color, style, and padding of field labels.
- Form Title – Defines the font type, size, and color of table and form titles.
- Navigation Buttons – Defines the alignment, font, color, and border styles of the buttons that allow you to save, cancel, or navigate.
- Navigation Buttons Active – Defines the color of navigation buttons when you click on them.
- Navigation Buttons Hover Over – Defines the color of navigation buttons while you hover over them with your mouse.
- Form Action Buttons – Defines the font, color, and border styles of action buttons found within record forms.
- Form Action Buttons Hover Over – Defines the font and color of action buttons while you hover over them with your mouse.
- Active Form Action Buttons – Defines the font and color of action buttons when you click on them.
- Form Interlinear Space – Defines the distance between rows in record forms.
- User Input – Defines the font, color, and border styles of input boxes within record forms.
- User Input Focused – Defines the font, background, and border color of input boxes while they are selected.
- User Input Hover Over – Defines the font, background, and border color of input boxes while you hover over them with your mouse.
- Checkboxes and Radio Buttons – Defines the appearance of checkboxes and radio buttons.
- Read-only Data Fields – Defines the font, color, and border of text that can only be viewed and not edited.
- Heading Text – Defines the alignment, font, color, border styles, and padding of headers that appear within record forms.
- Append Only Entry Stamps – Defines the alignment, font style, color, border style, and padding of the stamp above Append Only fields.
- Pop-up Hints – Defines the font, color, and border styles of the pop-hints that appear in record forms.
- Input Instructions – Defines the font and background color of pop-up input instructions embedded in record forms.
- Error Messages – Defines the font and background color of error messages.
- Warnings – Defines the font and background color of warnings, which often appear as pop-ups.
- Examples – Defines the font and background color of examples found in input instructions.
- Keywords – Defines the font and background color of keywords found in input instructions.
- Wizard Left Pane Help Text – Defines the font and background styles of the help text found on the left side of wizards.
- Table Tree: Items – Defines the font and background of items in the table tree. The table tree is found under Setup > Tables and lists all tables in your knowledgebase.
- Table Tree: Selected Item – Defines the font and background of items in the table tree when they are selected.
- Table Tree: Item Hover Over – Defines the font and background of items in the table tree when you hover over them with your mouse.
- Layout Editor Background – Defines the background of the of layout editor used to design the layout of record forms.
- Layout Editor Cell – Defines the font, background, border, and padding of cells in the layout editor.
- HTML Code – Defines the font typeface and size used in HMTL code snippets and logs.
- Wizard Header Text – Defines the font and background of wizard header text.
- Wizard Header Text Hover Over – Defines the font color of wizard header text when you hover over it with your mouse.
- Dashboard Background - Defines the header and font for the background of the dashboard.
- Widget - Defines the backround appearance of widgets, including the border, box shadow, fonts and spacing.
- Widget Title - Defines the font and background color of the widget title.
This tab manages the appearance of charts and reports. The elements in this tab are:
- Report Grouping Header - Defines the font and color scheme for report header groupings.
- Chart Plot - Defines the color scheme for the chart background and plot.
- Chart Legend - Defines the color scheme for the chart legend.
- Chart Series - Defines the color scheme for the chart segments.
This 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.
The Icons tab controls icons used throughout the system, such as the Edit, Search, or Print icons.
This tab lets you add Header & Footer HTML to embed the interface in a page of your website. For End User Schemes, the Content tab controls the logo displayed in the Legacy End User Interface (EUI).
This tab controls which teams see the look and feel scheme.
By defining a different look and feel for separate teams, you can allow each of your major customers to see their own logo in the end user interface, or provide visually impaired staff with a larger font:
It is possible to specify either horizontal or vertical gradients for the main GUI elements such as:
- Action bar
- Left Pane tool tabs
- Search block
- Edit record background
- Top table header row
Gradients are specified as:
- From Top Start Color to Bottom End Color
- From Left Start Color to Right End Color
You can customize the Start and End colors.