...
The example below will walk through how to change the color of the text, background color, and border color of the work item action button complete.
...
| Rw ui steps macro |
|---|
Determine the ID name in order to set up the style sheet. |
|
...
 Image AddedID Name |
|
...
Find the ID name by right-clicking on the button you would like to start to color. Click on Inspect to bring up the developer mode. |
|
...
 Image AddedRight-Clicking On Button |
|
...
The line with the ID will be already selected. |
|
...
 Image AddedID Line |
|
...
Double click on the line and copy the ID name. |
|
...
 Image AddedCopying ID Name |
|
...
Navigate to the style sheet domain. Administration > List Domains > Style Sheets #480 |
|
...
 Image AddedStyle Sheets Domain |
|
...
Create a New Style Sheet. |
|
...
 Image AddedCreating A New Sheet |
|
...
There are 3 Sections on the Style Sheet Domain: Name Style Sheet CSS Selector
|
|
...
 Image AddedStyle Sheet Sections |
|
...
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 AddedName Style Sheet |
|
...
In the Style Sheet section: Enter the color you would like to use for the text. There are over 140 general names that can be used as a color. A simple style Color: Red. You can also use various other methods to color. This method is the simplest. See # 17 for a tip. Enter the color for the Border Color. A simple style Border-Color: Blue Enter the color for the Background Color. A simple style Background-Color: Green
|
|
...
 Image AddedSet Color |
|
...
In the CSS Selector enter the ID name. To select elements with a specific ID, write a pound (#) character, followed by the name of the ID. Example: #workitem_actions_button_Complete |
|
...
 Image AddedCSS Selector |
|
...
...
 Image AddedSave Button |
|
...
Verify your new Style Sheet is saved. |
|
...
 Image AddedVerify Sheet Is Saved |
|
...
Clear the Cache. Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache |
|
...
 Image AddedClear Cache |
|
...
Refresh the page (or use F5) to clear any residuals. |
|
...
 Image AddedRefresh Page |
|
...
Verify you’re the color of the text / border / background has been changed. |
|
...
 Image AddedVerify Button Style Change |
|
