Request Brochure

Blog & News

Removing the Default Flex Blue (and other style tips)

happy boy working at computer smiling

Flex gives you a great deal of control when skinning your applications, but some of the options are less apparent than others. Although styling individual components of an application is easy accomplished through CSS file inclusion, there are global methods too.

The Pre-Loader

If your project is ambitious, you’ll probably want to design your own pre-loader to replace the default Flex one. If you aren’t that interested in re-skinning the default, however, you can simply turn that default Flex-blue pre-loader off. In your application MXML declaration, add usePreloader=”false”, like so:

Getting Rid of the Default Flex Blue

You know it when you see it – a Flash app starts to load and you see that familiar blue (#869ca7, or this color, in case you were wondering). Tracking down all the places it crops up can be a pain, but setting the default background color in your Flex Compiler options is an easy way. Right-click on a project, then choose Properties. Select compiler options and you’ll see the screen shown here. Simply add -default-background-color 0x######, where ###### is the html color code you want to use. Now Flex will generate the html template files with your color instead of the dreadful blue.

Changing the Skin Globally

You’ll also notice in the screen shot above that I have another option highlighted: -theme ‘myflexskin.css’. Using this option you can set the global (per project) use of that particular CSS file, versus having to include it individually in each MXML file.