Flex components styling

Flex applications are known by their default theme. Changing default colors and fonts of Flex applications is called styling. Everything you can do with HTML, you can do also with Flex, because main responsibility for styling is on CSS (Cascading Style Sheets). You can create your CSS file directly typing code in your MXML file using Style tag or using external CSS file.

In Flex Builder, best practice is to create ‘assets’ folder within your project and create new CSS file, let’s say ‘mystyle.css’. Then you make reference line to include that file with Style tag, source property:

source="/assets/mystyle.css"

If you want easier way for styling your components, try Flex Style Explorer . This free online tool will help you achieve visually awesome results in no time. When you are finished playing, copy CSS code and paste it in previously created mystyle.css file. You can even run the Flex Style Explorer inside of Flex Builder or download SWF and run it from desktop. Great!

Now let’s take a look at example simple navigation . We have ViewStack and LinkBar components. Using Flex Style Explorer I altered LinkBar appearance, which is also possible for every Flex component.

Here is CSS code:

/* CSS file */
LinkBar {
borderStyle: outset;
borderColor: #999999;
horizontalGap: 12;
separatorWidth: 2;
letterSpacing: 1;
cornerRadius: 0;
backgroundAlpha: 1;
backgroundColor: #0099cc;
separatorColor: #333333;
rollOverColor: #006699;
textRollOverColor: #cccccc;
textSelectedColor: #ffffff;
disabledColor: #ffffff;
fontSize: 10;
fontWeight: bold;
dropShadowEnabled: true;
shadowDistance: 4;
shadowDirection: right;
}

download style

.