Click lick on Images to Expand Them
The example below walks you through how to color the Validation Message output on the Dashboard.
Rw ui steps macro | |
---|---|
|
1 | First, we need to determine the class name in order to set up the style sheet. | Determining the Class Name | ||
2 | Find the class name by right-clicking on the display output of the section you would like to color. Then click on Inspect to bring up the developer mode. | Display Output | ||
3 | The line with the class will be already selected. | Selected Class Line | ||
4 | Double-click on the line and copy the class name.
| Copy the Class Name | ||
5 | Navigate to the Style Sheet Domain. Administration > List Domains > Style Sheets #480. | Style Sheet Domain | ||
6 | Click the New Style Sheets. button. | New Style Sheet | ||
7 | There are 3 Sections on the Style Sheet Domain:
| Style Domain Sectors | ||
8 | Enter the name you would like to use for the Style Sheet in the Name field. This can be any unique name for the style sheet. | Style Sheet Name | ||
9 | Enter the color you would like to use in the Style Sheet field. There are over 140 general names that can be used as a color. A simple style you can use is "Color: Red". NoteYou can also use various other methods to color. This method is the simplest. See # 17 for a tip. | Color Names | ||
10 | Enter the class name into the CSS Selector. To select elements with a specific class, write a period (.) character, followed by the name of the class. Example: .attribute12345 | Class Name | ||
11 | Click Save. | Save Button | ||
12 | Verify your new style sheet is saved. | Verify Sheet | ||
13 | Clear the Cache by navigating to Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache. | Clear Cache | ||
14 | Refresh the page (or use F5). This clears out the residual information. | Refresh Page | ||
15 | Verify your color has been changed. | Verify Color Change | ||
16 | Inspect the element again to select a color from the color pallet tool in chrome. Since the element style is now a custom CSS. Click on the color. | Inspect Element to Select Color | ||
17 | Use the color tool(s) to change the color(s). | Color Change Tool | ||
18 | To set a new color, copy the HEX and modify the Style Sheet you just created. In the Style Sheet section, the HEX can be used instead of the color name. Example Color: #82eee4 | Set New Colors |
...