Question

I’m trying to style the Accordion headers using CSS and the headerStyleName property in Flex 4.5, but the CSS styles are not displaying. The accordion headers appear the same as the default style. Here’s my current code.

Accordion.css:

.accHeader {
    fillColors: #dbf6c6, #e1facd;
    fillAlphas: 1.0, 0.5;
}

MXML code from the component (not the main application):

...
<fx:Style source="skins/Accordion.css" />
<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion"
                      openDuration="500" headerStyleName="accHeader">
...

I’ve also tried embedding the CSS inside the style tag instead of linking to an external CSS file, but the results are the same.

Also, if I change a different CSS property, such as color, the change is correctly displayed.

I know about the chromeColor property as well, but it is the not the look I’m trying to achieve. I’m also not completely set on using CSS, so if there another better way to achieve a customizable Accordion header, I’m all for it. I was initially going to make a skin, but stopped when I didn’t see the correct host component in the New MXML Skin dialog.

Any information to point me in the right direction would be very much appreciated. Thank you for your time!

Answer 1

Sweet victory!

I was able to successfully skin the Accordion header using flexlib and creating a custom skin based on the AccordionHeaderSkin.mxml found in the source of the Flex 4.5 SDK. I made a CanvasButtonAccordionHeader for the header renderer and set the skin for that to the new custom skin.

Here’s the code for the AccordionHeaderSkin.mxml (not my final style, but a working editable skin):

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
         minWidth="21" minHeight="21" alpha.disabled="0.5">

<fx:Script>
    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
</fx:Script>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
    <s:State name="selectedUp" />
    <s:State name="selectedOver" />
    <s:State name="selectedDown" />
    <s:State name="selectedDisabled" />
</s:states>

<!-- layer 3: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0x000000" 
                             color.over="0xBBBDBD" 
                             color.down="0xAAAAAA" 
                             alpha="0.85" />
            <s:GradientEntry color="0xD8D8D8" 
                             color.over="0x9FA0A1" 
                             color.down="0x929496" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 4: fill lowlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="270">
            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 5: fill highlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.0"
                             alpha="0.33" 
                             alpha.over="0.22" 
                             alpha.down="0.12"/>
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48"
                             alpha="0.33"
                             alpha.over="0.22"
                             alpha.down="0.12" />
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48001"
                             alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 6: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
    <s:stroke>
        <s:LinearGradientStroke rotation="90">
            <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
            <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.07" />
    </s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.07" />
    </s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.25" />
    </s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.09" />
    </s:fill>
</s:Rect>

<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
    <s:stroke>
        <s:SolidColorStroke color="0x696969" 
                            alpha="1" 
                            alpha.over="1" 
                            alpha.down="1" />
    </s:stroke>
</s:Rect>

Then here’s the renderer (AccordionHeader.mxml):

<?xml version="1.0" encoding="utf-8"?>
<CanvasButtonAccordionHeader xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            xmlns="flexlib.containers.accordionClasses.*" skin="AccordionHeaderSkin" height="25">

    <s:Group height="25">

    </s:Group>

</CanvasButtonAccordionHeader>

And here’s my Accordion:

<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion" openDuration="500" headerRenderer="AccordionHeader">