...
The example below walks you through how to color the Validation Message output on the Dashboard.
...
First, we need to determine the class name in order to set up the style sheet. | Image ModifiedDetermining 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 ModifiedDisplay Output |
|
...
The line with the class will be already selected. | Image ModifiedSelected 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 ModifiedCopy the Class Name |
|
...
Navigate to the Style Sheet Domain. Administration > List Domains > Style Sheets #480. | Image ModifiedStyle Sheet Domain |
|
...
Click the New Style Sheets. button. | Image ModifiedNew Style Sheet |
|
...
There are 3 Sections on the Style Sheet Domain: Name Style Sheet CSS Selector
| Image ModifiedStyle 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 ModifiedStyle 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 ModifiedColor 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 ModifiedClass Name |
|
...
Click Save. | Image ModifiedSave Button |
|
...
Verify your new style sheet is saved. | Image ModifiedVerify Sheet |
|
...
Clear the Cache by navigating to Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache. | Image ModifiedClear Cache |
|
...
Refresh the page (or use F5). This clears out the residual information. | Image ModifiedRefresh 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 ModifiedSet New Colors |
|