lick Click 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 |
---|
First, we need to determine the class name in order to set up the style sheet. | ![Determining the Class Name](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/class%20name.png?version=1&modificationDate=1590077258586&cacheVersion=1&api=v2&width=680) Determining 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. | ![Display Output](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Display%20output.png?version=1&modificationDate=1590077258835&cacheVersion=1&api=v2&width=680) Display Output |
The line with the class will be already selected. | ![Selected Class Line](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Class%20line.png?version=1&modificationDate=1590077259099&cacheVersion=1&api=v2&width=680) Selected Class Line |
Double-click on the line and copy the class name. Warning |
---|
Important Note: Do not copy the data cell, only the name of the data cell. |
| ![Copy the Class Name](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Class%20name%20cell.png?version=1&modificationDate=1590077259350&cacheVersion=1&api=v2&width=680) Copy the Class Name |
Navigate to the Style Sheet Domain. Administration > List Domains > Style Sheets #480. | ![Style Sheet Domain](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Style%20domain.png?version=1&modificationDate=1590077259606&cacheVersion=1&api=v2&width=680) Style Sheet Domain |
Click the New Style Sheets. button. | ![New Style Sheet](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/new%20style%20sheet.png?version=1&modificationDate=1590077259820&cacheVersion=1&api=v2&width=680) New Style Sheet |
There are 3 Sections on the Style Sheet Domain: Name Style Sheet CSS Selector
| ![Style Domain Sectors](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/3%20sections.png?version=1&modificationDate=1590077260051&cacheVersion=1&api=v2&width=680) Style 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. | ![Style Sheet Name](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Name.png?version=1&modificationDate=1590077260316&cacheVersion=1&api=v2&width=680) Style 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". Note: You can also use various other methods to color. This method is the simplest. See # 17 for a tip. | ![Color Names](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Color.png?version=1&modificationDate=1590077260582&cacheVersion=1&api=v2&width=680) Color 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 | ![Class Name](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/CSS%20Selector.png?version=1&modificationDate=1590077260797&cacheVersion=1&api=v2&width=680) Class Name |
Click Save. | ![Save Button](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Save.png?version=1&modificationDate=1590077261044&cacheVersion=1&api=v2&width=442) Save Button |
Verify your new style sheet is saved. | ![Verify Sheet](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Verify%20Save.png?version=1&modificationDate=1590077261296&cacheVersion=1&api=v2&width=680) Verify Sheet |
Clear the Cache by navigating to Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache. | ![Clear Cache](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Clear%20Cache.png?version=1&modificationDate=1590077261594&cacheVersion=1&api=v2&width=680) Clear Cache |
Refresh the page (or use F5). This clears out the residual information. | ![Refresh Page](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Refresh%20Page.png?version=1&modificationDate=1590077261819&cacheVersion=1&api=v2&width=442) Refresh Page |
Verify your color has been changed. | ![Verify Color Change](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Verify%20Color%20Change.png?version=1&modificationDate=1590077262108&cacheVersion=1&api=v2&width=476) Verify 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. | ![inspect Element to Select Color](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/Inspect%20Color.png?version=1&modificationDate=1590077262366&cacheVersion=1&api=v2&width=442) Inspect Element to Select Color |
Use the color tool(s) to change the color(s). | Image Removed 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 | ![Set New Colors](https://docupace.atlassian.net/wiki/download/thumbnails/181239839/HEX%20Color.png?version=1&modificationDate=1590077262794&cacheVersion=1&api=v2&width=680) Set New Colors |
|