Setting styles for the Viewer

This page describes an older version, please read about the latest version at:
http://resources.arcgis.com/en/help/flex-viewer/concepts/

You can easily change the basic style settings of the Flex Viewer by modifying the main configuration file. If you are compiling the source, there are additional styling options for full flexibility.

Changing colors and transparency

You can the color schema and transparency of the Viewer by modifying the main configuration. The style settings should be set within the <style> tag using the two tags below in the main configuration file. Example:

<style>
    <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>
    <alpha>0.8</alpha>
</style>

<colors>

Color set that defines the Viewer's appearance. Values for this tag are a set of five or six colors that changes the look and feel of the application and widget dialogs. Color values are based on RGB in hexadecimal format for the Web.

1. Text color
2. Background color
3. Rollover color
4. Selection color
5. Title and subtitle text color
6. Application background color [optional] - the default is white (0xFFFFFF).

Tip:

Start with one of the color examples below.

<alpha>

The transparency level for the Viewer UI components. The value for this tag is between 0.0 (fully transparent) and 1.0 (completely opaque).

Tip:

Alpha values between 0.6 and 1.0 are recommended.

Below are some example style color values for the Viewer application:

Description	Text color	Background color	Rollover color	Selection color	Title color
Black Gold (gold and white text on black background)	0xFFFFFF (white)	0x333333	0x101010	0x000000 (black)	0xFFD700 (gold)
<style> <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Cobalt Blue (pale blue text on cobalt blue background)	0xCEE7F4	0x39628C	0x355D89	0x294867	0xCEE7F4
<style> <colors>0xCEE7F4,0x39628C,0x355D89,0x294867,0xCEE7F4</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Desert Sand (dark text on beige background)	0x4C2600	0xFFEDB8	0xB2AD81	0x6F6750	0x4C2600
<style> <colors>0x4C2600,0xFFEDB8,0xB2AD81,0x6F6750,0x4C2600</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Graphite Gray (light grey text on dark grey background)	0xCCCCCC	0x777777	0x555555	0x333333	0xCCCCCC
<style> <colors>0xCCCCCC,0x777777,0x555555,0x333333,0xCCCCCC</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Sage Green (dark text on sage green background)	0x333333 (white)	0xAFCFAF	0xFFFFAB	0xEAEA9D	0x333333
<style> <colors>0x333333,0xAFCFAF,0xFFFFAB,0xEAEA9D,0x333333</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Sky Blue (dark text on light blue background)	0x444444	0xEBF4FF	0xEBF4FF	0xDEEBFF	0x444444
<style> <colors>0x444444,0xEBF4FF,0xEBF4FF,0xDEEBFF,0x444444</colors> <alpha>0.8</alpha> </style>

Description	Text color	Background color	Rollover color	Selection color	Title color
Plain (black text on white background)	0x000000 (black)	0xFFFFFF (white)	0xEFEFEF	0xFFFFFF (white)	0x000000 (black)
<style> <colors>0x000000,0xFFFFFF,0xEFEFEF,0xFFFFFF,0x000000</colors> <alpha>1</alpha> </style>

Developers compiling with the source code

Another approach for setting styles in the Viewer application is to edit the defaults.css file in Flash Builder. This is the case if you want to change the look and feel of the scroll bars etc.