7 Replies Latest reply on Dec 15, 2008 12:39 PM by KamStewart

    Unable to color Accordion buttons

    Handycam Level 1
      Perhaps I'm missing something, but I've tried everything and my Accordion control buttons are always white, with varying shades of transparency (that is, white overlaying the control's backgroundColor)

      Here is the CSS I am using for it:
        • 1. Re: Unable to color Accordion buttons
          ntsiii Level 3
          According to my playing with the Flex Style Explorer, this should be no problem.
          http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

          Perhaps you have some unexpected interaction, like a "Button" style or something. remove all but the minimum the Style explorer shows.

          Tracy
          • 2. Re: Unable to color Accordion buttons
            theLoggerGuy Level 1
            Check out headerStyleName in the Flex help. The header has to be styled separately.
            • 3. Re: Unable to color Accordion buttons
              Handycam Level 1
              Even in the style explorer, which is what I used to get that CSS, I can't change the color of the accordion button backgrounds. That's the buttons, where the text goes for each part of the accordion. Let's say I need black buttons with white text? I can't seem to make this happen... seems odd...
              • 4. Re: Unable to color Accordion buttons
                m_hartnett Level 3
                Try this. The accordianHeader is where ther colors are defined.
                Accordion {
                headerHeight: 22;
                borderStyle: solid;
                backgroundColor:#e7eae4;
                backgroundAlpha: 1;
                focusAlpha: 1;
                borderColor: #8e8e8e;
                color: #000000;
                textRollOverColor: #000000;
                headerStyleName: "accordionHeader";
                }

                .accordionHeader {
                textAlign: left;
                fontSize: 11;
                highlightAlphas: 0, 0.1;
                fillAlphas: 0.64, 1, 1, 1;
                fillColors: #cccccc, #cccccc, #bdfcbd, #bdfcbd;
                selectedFillColors: #42854e, #42854e;
                themeColor: #42854e;
                }
                • 5. Re: Unable to color Accordion buttons
                  Handycam Level 1
                  Ah, didn't realize so much could be put into the headerStyle property. Thanks.

                  Any idea why there doesn't seem to be a "selectedColor" property?

                  That is, if you want the text color on the selected (active) header to be a different color.
                  • 6. Unable to color Accordion buttons
                    m_hartnett Level 3
                    There is a selectedFillColors in the header section which will change the selected color. The one I posted defines the same color twice to give me a solid color. I dont believe that the selectedFillColors of the Accordian will be applied.
                    • 7. Re: Unable to color Accordion buttons
                      KamStewart
                      @Tracy - The reason you didn't see the bug Handycam referenced is because you were viewing the outdated Flex 2 Style Explorer. The Flex 3 Style Explorer exhibits the bug. To see the error try:
                      http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

                      Unfortunately, the Flex 3 version still outputs Flex 2 version css. Wingobaxter provided the correct markup, but even still there is an outstanding bug in the component. You can't access the color of the text color for the selected pane header.

                      Note that 'selectedFillColors' sets the gradient for the selected pane header, but 'textSelectedColor' sets the color of text on mouseDown. I also don't believe you can directly access the mouseDown gradient colors as these are generated dynamically, but there is ‘focusAlpha’.

                      There are two issues: one is confusion over semantics of the button states. As noted above 'selected' is used for both mouseDown (text) and active pane (FillColors).
                      MouseDown colors are only modified through 'focusAlpha'.


                      I think the root of this mess was caused in part because they subclassed button, instead of the ToggleButtonBar, which has a

                      .mytoggleButtonBarSelectedButtonStyle {color: #ff6600;


                      I can find no corresponding style property for the Accordion. I'm working to right now to modify my own version to give me access the text color. Anyone know how?