Quick Tip: CSS to customize the TabbedViewNavigator and ActionBar in Flex Mobile Applications

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;
	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:


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/.