...
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 ModifiedID 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 ModifiedRight-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 ModifiedCopying ID Name |
|
...
Navigate to the style sheet domain. Administration > List Domains > Style Sheets #480 | Image ModifiedStyle Sheets Domain |
|
...
Create a New Style Sheet. | Image ModifiedCreating 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 ModifiedName 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 ModifiedSet 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 ModifiedCSS Selector |
|
...
Save. | Image ModifiedSave 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 ModifiedClear Cache |
|
...
Refresh the page (or use F5) to clear any residuals. | Image ModifiedRefresh Page |
|
...
Verify you’re the color of the text / border / background has been changed. | Image ModifiedVerify Button Style Change |
|