...
The example below walks you through how to color the Validation Message output on the Dashboard.
...
| Rw ui steps macro |
|---|
First, we need to determine the class name in order to set up the style sheet. |
|
...
 Image AddedDetermining the Class Name |
|
...
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. |
|
...
 Image AddedDisplay Output |
|
...
The line with the class will be already selected. |
|
...
 Image AddedSelected Class Line |
|
...
Double-click on the line and copy the class name. |
|
...
: Do not copy the data cell, only the name of the data cell. |
|
|
...
 Image AddedCopy the Class Name |
|
...
Navigate to the Style Sheet Domain. Administration > List Domains > Style Sheets #480. |
|
...
 Image AddedStyle Sheet Domain |
|
...
Click the New Style Sheets. button. |
|
...
 Image AddedNew Style Sheet |
|
...
There are 3 Sections on the Style Sheet Domain: Name Style Sheet CSS Selector
|
|
...
 Image AddedStyle Domain Sectors |
|
...
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. |
|
...
 Image AddedStyle Sheet Name |
|
...
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". |
|
...
: You can also use various other methods to color. This method is the simplest. See # 17 for a tip. |
|
...
 Image AddedColor Names |
|
...
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 |
|
...
 Image AddedClass Name |
|
...
...
 Image AddedSave Button |
|
...
Verify your new style sheet is saved. |
|
...
 Image AddedVerify Sheet |
|
...
Clear the Cache by navigating to Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache. |
|
...
 Image AddedClear Cache |
|
...
Refresh the page (or use F5). This clears out the residual information. |
|
...
 Image AddedRefresh Page |
|
...
Verify your color has been changed. |  Image ModifiedVerify Color Change |
|
...
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. |  Image ModifiedInspect Element to Select Color |
|
...
Use the color tool(s) to change the color(s). |
|
...
 Image AddedColor Change Tool |
|
...
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 |
|
...
 Image AddedSet New Colors |
|
