How to skin an Accordion in FB4?

Question

I'm at a loss here how to skin a mx:Accordion in the Spark world. I have a typical accordion:
<mx:Accordion width="251" minHeight="300">
     <s:NavigatorContent label="Phase 1" width="100%" height="100%" skinClass="skins.NavigatorContentSkin1">
          <s:layout>
             <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
          </s:layout>
          <s:Label text="{dataList[0].sub}" styleName="subhead" />
          <s:RichText text="{dataList[0].desc}" width="100%" styleName="caption" />
     </s:NavigatorContent>
     <s:NavigatorContent label="Phase 2" width="100%" height="100%">
          <s:layout>
             <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
          </s:layout>
          <s:Label text="{dataList[1].sub}" styleName="subhead" />
          <s:RichText text="{dataList[1].desc}" width="100%" styleName="caption" />
     </s:NavigatorContent>
     <s:NavigatorContent label="Phase 3" width="100%" height="100%">
          <s:layout>
             <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
          </s:layout>
          <s:Label text="{dataList[2].sub}" styleName="subhead" />
          <s:RichText text="{dataList[2].desc}" width="100%" styleName="caption" />
     </s:NavigatorContent>
</mx:Accordion>
I loked at the existing skins and found an AccordionHeaderSkin.mxml.  I know how to apply these to Spark containers, so I tried:
mx|Accordion {
    skinClass: ClassReference("skins.AccordionHeaderSkin");
and then
mx|Accordion {
    headerStyleName: "myaccordionHeader";
myaccordionHeader {
   skinClass: ClassReference("skins.AccordionHeaderSkin")
neither did anything at all.
So next I tried
mx|Accordion {
     borderStyle: none;
     headerHeight: 32;
     textIndent: 0;
     highlightAlphas: 0.6, 0.62;
     fillAlphas: 1, 1, 1, 1;
     fillColors: #a3b2e2, #4557a2, #868EB9, #868EB9;
     selectedFillColors: #a3b2e2, #4557a2;
     backgroundColor: #F7F9DF;
     textRollOverColor: #000000;
     textSelectedColor: #000000;
     headerStyleName: "myaccordionHeader";
.myaccordionHeader {
     color: #000000;
     fontFamily: Arial;
     fontSize: 16;
And this also did nothing at all, other than the header height and the headet title size. So I tried an old tip of adding this to the compiler argument: -theme=${flexlib}/themes/Halo/halo.swc
But that apparently broke the Spark skins, AND did nothing to change colors etc.  So I removed it.
So next I focused on the navigator content, I duplicated its skin. And changed its backgroundColor style, which works, but now the navigator is empty:
So I removed that too, and am back to a plain vanilla Accordion.  Can someone please explain this?  Otherwise I will just replicate the functionality with various Spark elements.  But it seems odd, since an accordion is exactly what I need.

Answer 1

hey Steve,
you almost have it!! try this:
  <fx:Style>
    @namespace mx "library://ns.adobe.com/flex/halo";
    mx|Accordion {
      borderStyle: none;
      headerHeight: 32;
      textIndent: 0;
      highlightAlphas: 0.6, 0.62;
      fillAlphas: 1, 1, 1, 1;
      fillColors: #a3b2e2, #4557a2, #868EB9, #868EB9;
      selectedFillColors: #a3b2e2, #4557a2;
      backgroundColor: #F7F9DF;
      textRollOverColor: #000000;
      textSelectedColor: #000000;
      headerStyleName: myAccordionHeader;
    .myAccordionHeader {
      color: #000000;
      fontFamily: Arial;
      fontSize: 16;
      skin: ClassReference("skins.CustomAccordionHeaderSkin");
  </fx:Style>
- e
well I can't for all the styles applied, but the header skin should register...
Message was edited by: mewk