Using Highlighter Styles
The term Grid Highlighter has been deprecated because it does not adequately describe newly added functions. |
Administrators can create custom styles for grids, forms, or controls. You can use these styles to highlight changes to individual records as they are listed in the grid when certain conditions apply, or to emphasize certain fields within a form. For example, you can have all unlicensed products appear in a list in a bold font with a red background. After creating a style, you apply it to a control on a form or grid.
Styles include text font, size, style, alignment, and color, as well as backgrounds and borders. These styles can be applied to grids, forms, controls, fields, and labels. See the styles under Creating a Style.
The styles created in Highlighter Styles follow standard CSS guidelines. See http://www.w3schools.com/css/ for more information on CSS syntax.
Certain styles are included with HEAT by default. In older versions (before Release 2014.3), these styles could not be modified. These older styles will eventually be deprecated. Going forward, you can create your own styles as needed.
1. | Within the Configuration Console Settings menu, go to Build > User Interface Styles > Highlighter Styles. The list of styles appears, if any. |
2. | Click Add New .... The New Style page appears. |
3. | Under the Dynamic Style Definition pane, the following default fields appear: |
Field | Description |
---|---|
Name |
A unique name that only contains alphanumeric characters. Spaces and special characters are not permitted. |
Description |
The purpose of the style. |
4. | Drag and drop items from the Style Properties pane onto the Dynamic Style Definition pane, then enter standard CSS syntax to define each style. |
Style | Description |
background-color |
The grid cell background. Use standard CSS syntax, such as purple or #533b75. Choose from the pop-up window. |
border-style |
The type of border. See http://www.tizag.com/cssT/border.php for examples of each border style.
|
border-color | The color of the field border. Choose from the pop-up window. |
color |
The color of the text. Choose from the pop-up window. |
font-family | The text font family. Choose from the drop-down list. |
font-size |
The text font size. Enter the font size according to standard CSS guidelines, or choose from the drop-down list. |
font-style |
The text font style, either normal or italic. |
font-weight | The text font weight, such as bold or normal or a number value. Note: 400 is the same as normal and 700 is the same as bold. |
padding | The amount of padding around the field. Enter the padding according to standard CSS guidelines. |
text-align |
How the text is aligned. Choose from the drop-down list:
|
SelectorFormat |
Defines a specific selector to which to apply the attributes. For example:
shrinks the font when you mouse over a link. |
The Preview section shows the results of your custom grid style.
5. | Click Save. The style appears on the page. You might need to Refresh to see the style. |
After creating the style, you can apply it to any form, grid, or control, by choosing the style from a drop-down list.