Comments on: Creating a custom MX Accordion header skin in Flex 4

By: Tahir Azeem Alvi

Tahir Azeem Alvi — Fri, 11 Mar 2011 07:38:34 +0000

Hi peter,

can we maintain the text color for all states of Accordion Header?

currently i set the
.headerStyle{
color : ’0xFFFFFF’;
text-roll-over-color : ’0xFFFFFF’;
text-selected-color: ’0xFFFFFF’;
}

Bur on down or over state text color is black.

Thanks

By: ideveloper

ideveloper — Sun, 19 Dec 2010 09:14:31 +0000

Hi. How can I change the size or the position of the header text in your example???

By: Peter deHaan

Peter deHaan — Thu, 30 Sep 2010 04:32:19 +0000

@Priya,

You would need to create a custom skin. By default the contentBackgroundColor style does not support gradients, only solid colors.

Peter

By: Priya

Priya — Wed, 29 Sep 2010 22:32:18 +0000

could you please let me know ,how can I apply a gradient colors to the “contentbackgroundColor” property?

By: Peter deHaan

Peter deHaan — Tue, 20 Jul 2010 07:29:52 +0000

@Priya,

Not sure what you’re trying to do with skinning, but can’t you just set the headerStyleName style on the Accordion and set the color style there?

"1.0" encoding="utf-8"?>
 xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
    >
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        .headerStyles {
            chromeColor: black;
            color: white;
        }
    >
 
     id="acc1"
            headerStyleName="headerStyles"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
         id="navCon1" label="One" />
         id="navCon2" label="Two" />
         id="navCon3" label="Three" />
    >
 
>

Peter

By: Priya

Priya — Mon, 19 Jul 2010 19:13:59 +0000

i meant to say

By: Priya

Priya — Mon, 19 Jul 2010 19:13:15 +0000

Could you please direct on how we change the accordian header text color in Flex4 skinng. I tried to add
this label component and it doesn’t seem to be working.Thanks in advance.

By: Peter deHaan

Peter deHaan — Thu, 26 Nov 2009 20:05:45 +0000

@AlCapone,

Sure, I’d just create an ActionScript function which sets the headerStyleName style to whatever whichever custom style you want. Basically make 2-3+ custom selectors and specify the custom Accordion header skin you want to use:

.customAccordionHeadStyles1 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin1");
}
.customAccordionHeadStyles2 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin2");
}
.customAccordionHeadStyles3 {
    skin: ClassReference("skins.CustomAccordionHeaderSkin3");
}

And then create some ActionScript functions to set the headerStyleName to whichever CSS selector you want:

private function useSkin1():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles1");
}
private function useSkin2():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles2");
}
private function useSkin3():void {
    accordion.setStyle("headerStyleName", "customAccordionHeadStyles3");
}

You could probably clean up that code significantly, but it may help get you started.

Peter

By: AlCapone

AlCapone — Thu, 26 Nov 2009 10:30:07 +0000

i have a question…

i want to switch between 2 or more stlyes , can i use a function to change directly the css file??

thanks.

By: Daniel

Daniel — Mon, 19 Oct 2009 17:47:11 +0000

…and as usual the answer is pretty obvious on second glance: commenting out the

useBaseColor = true;

line allows level3 to show unmodified colors.

DMcQ