Using CSS to style my Flex application

Question

I'm using flash builder 4.5 to make a website. At the moment I'm trying to work on the layout of my website but I'm facing some problems. First of all my CSS looks like this.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Application{
    backgroundColor : #ffffff;
}

mx|LinkButton{
backgroundColor : #000000;
color: #666666;
}

s|Button{
backgroundColor : #666666;  
color: #666666;
}

The problem is that neither my buttons nor my linkbuttons obtain the color I have set in the above stylesheet, yet my application backgroundcolor is the color i set it to be in the above css file. So I'm sure the url for my style sheet is correct... this is it:

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

This is what my code looks like(a fragment)

<mx:LinkButton id="btnHome" width="100" height="30"
                   label="Startpagina" click="goHome(event)"/>
<mx:LinkButton id="btnProfiel" visible="{profielVisible()}" height="30"
                   label="Profiel" click="toonProfiel(event)"/>

Since I'm relatively new to the flex development the problem might be obvious but i can't put my finger on it. Any help? Is there maybe another/better way to style a flex application?

Thanks in advance.

Just take a look at the docs: you'll see that for instance LinkButton does not have a 'backgroundColor' style. — RIAstar

ShaunOReilly ShaunOReilly · Accepted Answer · 2012-01-27T07:31:06

try using chromeColor

Like this:

s|ActionBar
{
    chromeColor: #229988;
        titleAlign: center;
}

s|ActionBar #titleDisplay
{
    color: #CCCCCC; /* default color is white */
    fontSize: 40;
    fontFamily: "Comic Sans MS";
}

Using CSS to style my Flex application

1 Answers