Question

I am trying to define my Flex 4 Skins via CSS but I my custom skin will not display. Here is what I am doing:

In my application I import my css and define the styleName in my button:

        <fx:Style source="styles.css"/>
        <s:Button label="Button" styleName="circle"/>

Here is my CSS:

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

s|Button.circle
{
    skinClass: ClassReference("skins.buttons.CircleButton");
}

My understanding is that my button should be supplied it’s skinClass via the CSS but it fails to work. If I define the skinClass directly like below it works fine:

<s:Button label="Button" skinClass="skins.buttons.CircleButton"/>

Any help would be appreciated.

Answer 1

Make sure you have your CSS file under the root Application file first. Second, I would try to do the css without the type selector, so instead of s|Button.circle, just do .circle.

EDIT

You can also try putting the style in a Style tag within the same container as your button to see if that works. Are you sure your application can find your style.css? Showing more code might help the situation.