I am not sure if there is a direct method. This is a simple trick I use normally.
<mx:TabNavigator id="tn" width="100%" height="100%"
<s:NavigatorContent label="Green" backgroundColor="green" backgroundAlpha="0"/>
<s:NavigatorContent label="Red" backgroundColor="red" backgroundAlpha="0"/>
private function tn_creationCompleteHandler(event:FlexEvent):void
for( var i:int = 0 ; i< tn.numChildren ; i++)
tn.getTabAt(i).setStyle("chromeColor", ( tn.getChildAt(i) as NavigatorContent).getStyle("backgroundColor"));
tabNavigator.getTabAt( index ) gives you the reference to the tab. you could even define a style in the css file and set it
I am trying to set it in the CSS but having no luck.
Here is the CSS:
fillColor: #FF0080; /* this is the tab widget itself, not the content */
Here is my Tab definition:
<mx:TabNavigator width="100%" height="100%" styleName="myTabStyle" />
This is not working. It makes my second tab square and grey.
Here is a screenshot of the problem:
I have tried to use "fillColors" too but same problem.
I will try to use your suggestion Subeesh, but do you see anything wrong with my CSS approach?? I cant
try chromeColor instead of fillColor
Thank you Subeesh.
I have tried everything and nothing works.
I went ahead and removed the FLEX theme we use in our appearance settings. When I remove our theme and use the default Spark theme, your example works and all the other examples work.
This leads me to believe that using the GraphiteGraphical theme is the reason I cannot change the tab colors.
How can I override the theme? This theme is really becoming a problem because it limits our programming in ActionScript. There is not much I can do to work around this. Any ideas?
If I remove the theme, much of the layout is removed. How can I re-add the layout from the theme's definition? I would need to implement custom CSS, derived from the Graphite Graphical theme, correct?
I think the moral of this story is, if youre new to FLEX, do not use pre-defined themes, even if they look cool, because you cannot override them. Atleast I have not figured out a way.
there is no need to change the theme. try this
chromeColor: #FF0080; /* this is the tab widget itself, not the content */
Thank you Subeesh! Once again, you have proven you are the CSS master of this Adobe Forum! GOOD JOB MAN! This works great!
Before I mark this as the correct answer, Do you know how to set this programmatically in AS?
Would it be:
Anyways, regardless, this is awesome!!
I have a similar problem I'm struggling with. I'm using Halo, and I have a tab navigator that I dynamically add tabs too.
At first I want all the tabs to have a normal style
fill-colors: #6486AC, #FFFFFF;
fill-alphas: 1.0, 1.0;
background-color: #FFFFFF; /*6486AC*/
As I add my tabs in ActionScript, I may want a certain tab to be Red, Yellow, Etc
fill-colors: red, #FFFFFF;
fill-alphas: 1.0, 1.0;
The probem is that I can't get the fill color to change. I have tried this.setStyle("tabStyleName", "tabStyleRed"), I have tried super.setStyle. I just can't get it to change the style. Any ideas?