Replacing Colors Using a Color Picker
There are a number of different color settings in a skin that affect different parts of a page. To change settings, you select colors in the skin editor, apply the colors to skin properties, and preview your changes.
To replace the color of a skin property using a color picker
1. As system administrator: Administration Dashboard > User Interface > Skin Administration.
2. To modify a skin, click the Tools icon 
and then click Edit. 3. Click Colors.
4. Click the skin property for which you want to replace the color.
The skin property is highlighted with a red box.
5. In the Picker panel, click the color to be used as a replacement.
The selected color appears in the horizontal bar at the bottom of the Picker panel, and the hexadecimal value appears in the # field at the top.
Tip:
If you know the hexadecimal value of the replacement color, you can type it directly in the # field.
6. To save a color to the Scratchpad panel, click the down arrow directly beneath the Picker panel.
Tip:
If you want lighter and darker shades of a particular color for use in foregrounds and backgrounds, save the color in the Scratchpad panel and, in the vertical bar on the right edge of the Picker panel, click above or below the original color. Save multiple colors to the Scratchpad.
7. To set the color for a skin property, click 
from either the Picker panel or the Scratchpad panel. 8. At the bottom of the page, click Preview.
The preview demonstrates how your changes have affected the skin.
9. Close the Preview window.
10. Click Save.
Example:
Assume you have created the Carbon Sailing skin as described in
Creating and Modifying a New Skin and want to change the colors used for buttons.
1. As system administrator: Administration Dashboard > User Interface > Skin Administration.
2. To modify a skin, click
and then click
Edit.
3. Click Colors.
4. Click the button - button text skin property.
5. In the Color field of the Picker panel, replace the default color (BUTTON if the parent skin is Pearls) by typing FFFFFF.
6. Click
from the
Picker panel.
The check box in the Inherited column is cleared, indicating this skin property is no longer inherited from the parent skin.
7. Click the button-bg - button background skin property.
8. In the Picker panel, replace the default color by typing 9EB6C7.
9. Click
from the
Picker panel.
10. In a similar way, replace the remaining button color properties with the following values:
The following table lists the values to supply for each skin property:
Property | Value |
button-border - button border | 668899 |
button-border-light - button border | BBDDEE |
button-hover - button text | FFFFFF |
button-hover-bg - button background | 4C7499 |
button-hover-border - button border | 395874 |
button-hover-border-light - button border | ABC9D8 |
button-disabled - disabled button text | C5C7C7 |
button-disabled-bg - disabled button background | FFFFFF |
button-disabled-border - disabled button border | C5C7C7 |
11. At the bottom of the page, click Preview.
The following table displays the preview results for the modified button properties:
Default button: | |
New color: | |
New hover color: | |
Final button: | |
12. Click Save.
