- Kevin Schmidt

If you are building Flex Mobile applications on of the first things you will end up wanting to change is the default look of the TabbedViewNavigator and ActionBar! This can be done through skinning but for simple changes it can be done much quicker with CSS. The CSS below illustrates how to do this.

@namespace s "library://ns.adobe.com/flex/spark";

s|TabbedViewNavigator #tabBar {
	chromeColor:#028bba;
}

s|ActionBar
{
	chromeColor: #028bba;
	fontSize: 28;
	fontWeight: bold;
}

Save the file as a CSS file and include it in the Flex Mobile application using MXML

<fx:Style source="file_name.css" />

This is the CSS that I used for mapi and ends up looking like this:

All the CSS properties for both the TabbedViewNavigator and ActionBar can be found here:

TabbedViewNavigator
ActionBar

A general article on Styling and Themes can be found here: Styles and themes

——-
Original article at http://www.underprise.com/2011/09/22/quick-tip-css-to-customize-the-tabbedviewnavigator-and-actionbar-in-flex-mobile-applications/.