How do you Apply CSS Styles to a Flex Accordian?
This question comes in from Johnny, one of the folks I met at 360Flex in San Jose:
How can I apply a global styles for all my accordions and datagrids?
Johnny sent me some code to, which I would have expected would work. But, since he said it didn't I did my own research. First I headed over to scalenine.com. Scale nine is a great site all about skinning in Flex and it has plenty of sample themes. I chose one, named brownie and opened up the code.
The main style sheet included something like this:
Accordion {
backgroundColor: #3e3e3e;
headerStyleName: accordionHeader;
borderColor: #22201E;
fontSize: 10;
}
This code will define the global styles for all Accordion's in the Flex application. In the main application file, the style sheet is imported like this:
<mx:Style source="assets/css/Main.css" />
I downloaded the project files, imported it into the project into Flash Builder and tried the code against the Flex 4.1 SDK. I needed to create a libs directory and recreate the html-template directory. After that I Was able to get it to run, but the styles didn't show up.
There were a lot of warnings which said that "type CSS Selector must be qualified with a namespace." I had to add a namespace to the css file:
@namespace mx "http://www.adobe.com/2006/mxml";
And then qualify the Accordion style, like this:
mx|Accordion{
// style data
}
After that the accordion was properly styled.
You can set styles on other Flex Components using the same approach.
Do you have a question? Please ask. I can even take confidential questions over at www.asktheflexpert.com, or you can ask me "live" at a Flextras Friday Lunch Connect Session.
Be sure to come visit me at the Flextras booth at 360Flex in DC this September. Order you tickets with this link and I get Karma points from the 360|Flex folks.
Excelent post! I am new with Flex, right now i am trying with the 4.5 and your post saved me a lot of troubles!!! I did just what you told and now everything works just fine!
