Need help styling a TabNavigator in Flex.

Question

I have a tab navigator control and I would like to make all of the tabs a certain color, say blue...

How can this be done?

I have tried through the following CSS:

TabNavigator
{
    tabStyleName: "tabs";
}
.tabs {
    backgroundColor:#6588b9;
}

but it only seems to work with the selected tab...

I then tried to do it programtically:

for(var i:int=0; i<num_of_tabs; i++)
    tn.getTabAt(i).setStyle("backgroundColor","blue");

Yet the same thing happens (only the selected tabs shows the blue background)

What can I do so that all the tabs are blue? Am I going to have to look into skinning?

Thanks.

Answer 1

I've got a project with styled tabs (I assume you mean the tabs themselves, and not the content). I'm sure there's other ways, but this is what I seem to have ended up with:

.myTabStyle {
    tabStyleName: "myTabs"
}
.myTabs {
    backgroundColor: #ff0000;
    fillColor: #000000;  /* this is the tab widget itself, not the content */
}
<mx:TabNavigator ... styleName="myTabStyle" .. >

There's several places in Flex where you have to use CSS styles to refer to other styles to drill into the widget you want (another example is setting the titlebar style on a TitleWindow).

I hope this helps.

By the way, I've seen occasional "tearing" on Mac & Windows, FireFox, IE, Safari, Flash 9 and 10 with large fonts & colored tabs--I'm not sure if this something I'm doing, something about the larger fonts, or the colored tabs themselves--but just a heads-up. This only happens when building with the Flex 3 SDK (never saw it with Flex 2).

Answer 2

I'm using Flex 3.3 and setting fillColor seems to have no effect.

Any idea?