Accordion Header Color and selected color in Flex4

MXML File

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Style source="/CssStyle/AccoridianLayout.css"/>
<fx:Script>
<![CDATA[

import boxie_skins.panel_acc;

import mx.collections.ArrayCollection;
[Bindable] public var ddltxt:ArrayCollection = new ArrayCollection([
{Label:"Delhi", data:'1'},
{Label:"Mumbai", data:2},
{Label:"Tamilnadu", data:3},
{Label:"Karantaka", data:4},
{Label:"AndhraPardesh", data:5},
{Label:"Utter Pradesh", data:6}
]);
[Bindable] public var cardtype:ArrayCollection = new ArrayCollection([
{Label:"", data:06},
{Label:"Visa", data:7},
{Label:"Master Card", data:8},
{Label:"American Express", data:9},
{Label:"Discover", data:10},
{Label:"Dinner Club", data:11}
]);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:BorderContainer width="100%" height="100%" borderVisible="false" borderColor="#ffffff" backgroundColor="#838C8C">

<s:layout>
<s:HorizontalLayout horizontalAlign="center" />
</s:layout>

<s:Panel  cornerRadius="5" borderColor="#ffffff" width="45%" borderVisible="false" title="Product Catalog" styleName="paneltitle">
<s:VGroup width="100%" height="100%">
<mx:Accordion id="accordion" width="99%" height="98%" left="5" top="5" bottom="20" borderColor="#AAB3B3" headerStyleName="header">
<s:NavigatorContent label="General Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Name" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Address" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="City" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="State" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{ddltxt}" labelField="Label" prompt="Choose a state..." width="180">

</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Zip" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Email" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%" paddingTop="80" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=1;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Shipping Information" styleName="paneltitle" >
<s:Group>
<s:VGroup width="100%" height="100%"  paddingTop="20" paddingLeft="25">
<s:RadioButton label="US Mail (3-7 business days)"/>
<s:RadioButton label="UPS (2 bussiness days)"/>
<s:RadioButton label="FedEx (Overnight Priority)" selected="true"/>
<s:HGroup width="100%" paddingTop="200" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=2;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Payment Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Card Type" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{cardtype}" width="130" labelField="Label"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="credit Card" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Holder Name" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Month" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="50" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[1,2,3,4,5,6,7,8,9,10,11,12]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Year" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="70" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[2004,2005,2006,2007,2008,2009,2010]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
</mx:Accordion>
<s:Label text="Order Summary" styleName="order"/>
<s:Label text="Order Total:                           $129.99" styleName="txtsmall"/>
<s:Label text="Shipping and Handling:           $5.99" styleName="txtsmall"/>
<s:Label text="Grand Total:         $135.98" styleName="grand"/>
</s:VGroup>
</s:Panel>
</s:BorderContainer>
</s:Application>

CSS File

/* CSS file */

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

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

@namespace spark "mx.skins.spark.*";

.paneltitle

{

}

.txt

{

text-align:right;

font-size:12px;

font-family:arial;

font-weight:normal;

}

s|Panel

{

font-size:11px;

font-family:arial;

color:#2B333C;

font-weight:bold;

}

.header {

skin: ClassReference("boxie_skins.AccordianTabskin");

}

.order

{

padding-left:5px;

padding-top:10px;

font-size:16;

font-weight:bold;

font-family:arial;

color:#333333;

}

.grand

{

color:#FF6600;

font-size:16;

padding-left:5px;

padding-top:10px;

}

.txtsmall

{

color:#0B333C;

padding-left:5px;

}

Skin File

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->

<s:SparkSkin name="CustomAccordionHeaderSkin"

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

minWidth="21" minHeight="21"

alpha.disabled="0.5">

<!-- 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" rotation="360">

<s:fill>

<s:SolidColor color="white"  

 color.selectedUp="#E6FFDC"

 color.selectedOver="#E6FFDC"

 color.selectedDown="#E6FFDC" />

</s:fill>

</s:Rect>

<!-- layer 4: fill lowlight -->

<s:Rect left="1" right="1" bottom="1" height="9">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0x000000" alpha="0.0099" />

<s:GradientEntry color="0x000000" alpha="0.0627" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 5: fill highlight -->

<s:Rect left="1" right="1" top="1" height="9">

<s:fill>

<s:SolidColor color="0xFFFFFF"

 alpha="0.33"

 alpha.over="0.22"

 alpha.down="0.12" />

</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="#AAB3B3" color.over="#67E634"

/>

</s:stroke>

</s:Rect>

</s:SparkSkin>

Posted in: Flex4