7 Replies Latest reply on Sep 23, 2010 8:46 PM by Subeesh Arakkan

    How to change backgroundColor on a non-halo themed control

    Devtron Level 3


      Hello,

       

      I have made the mistake of using a theme in my application. I am now pretty much unable to change the backgroundColor of many things.

       

      Is there a way around this? It would be REALLY great to change the backgroundColor of my DateChooser but anything I've tried wont let me.

       

      if I define it in my styles.css file, like so, I get a warning:
      mx|DateChooser{
          headerColors: #333333, #000000;
          backgroundColor: #474747;
          color: #a7a7a7;
      }

       


      * warning: The style 'backgroundColor' is only supported by type 'mx.controls.DateChooser' with the theme(s) 'halo'.    style.css

       


      If I try to override it, that does not work either, like so:

       

      private function colorPicker_change(evt:ColorPickerEvent):void {
             datechooser.setStyle("backgroundColor", evt.color);
      }

       


      How can I override the backgroundColors, without a halo theme? I dont even know what "halo theme" is or why I must need it. this is a huge problem for me

        • 1. Re: How to change backgroundColor on a non-halo themed control
          Devtron Level 3

          I am able to get these to work in my CSS:

           

          mx|DateChooser{
              content-background-color: #222222;
              header-colors: #656565, #434343;
              color: #cccccc;
              today-color: #e8e8e8;
              selection-color: #585500;
              border-color: #515151;
              font-size: 14pt;
              border-thickness-top: 0;
              selection-indicator-skin:ClassReference("mx.skins.halo.DateChooserIndicator");
          }

           

           

          but I cannot figure out how to override the  selection-indicator-skin? the selection color is correct, but the skin is not.

           

          How can I customize the skin? I cannot find the definition for mx.skins.halo.DateChooserIndicator. Any ideas?

          • 2. Re: How to change backgroundColor on a non-halo themed control
            Devtron Level 3

            I figured out how to disable the month arrow/selectors to change the months. I have no need to change months in this control, so I added the following:

             

            mx|DateChooser{
               
                content-background-color: #222222;
                header-colors: #656565, #434343;
                color: #cccccc;
                today-color: #e8e8e8;
                selection-color: #585500;
                border-color: #515151;
                font-size: 14pt;
                border-thickness-top: 0;
                selection-indicator-skin:ClassReference("mx.skins.halo.DateChooserIndicator");
                nextMonthUpSkin: ClassReference('mx.skins.Border');
                nextMonthDisabledSkin: ClassReference('mx.skins.Border');
                nextMonthDownSkin: ClassReference('mx.skins.Border');
                nextMonthOverSkin: ClassReference('mx.skins.Border');
                prevMonthUpSkin: ClassReference('mx.skins.Border');
                prevMonthDisabledSkin: ClassReference('mx.skins.Border');
                prevMonthDownSkin: ClassReference('mx.skins.Border');
                prevMonthOverSkin: ClassReference('mx.skins.Border'); 
             
            }

             

             

            what a hack!!

             

            Now my problem is, I am trying to override the selection-color value, like so:

            datechooser.setStyle("selection-color", " #C31C00"); //change to red

             

            Why doesnt this work? I dont understand. Why cant I override the selection color?

            • 3. Re: How to change backgroundColor on a non-halo themed control
              Subeesh Arakkan Level 4

              datechooser.setStyle("selectionColor", "#C31C00")

              • 4. Re: How to change backgroundColor on a non-halo themed control
                Devtron Level 3

                ^ Wow, that's really great  Subeesh!

                 


                Before I mark your response as the answer, I now have two questions before this thread ends...

                 


                1.) Is there documentation showing the styleName properties somewhere in Adobe's documentation? I was obviously using the CSS property name "selection-color" instead of "selectionColor". I am unsure where selectionColor is defined??

                 

                2.) I am able to change the selection color with your example, datechooser.setStyle("selectionColor", "#C31C00"), but how can I set multiple colors? For instance, I use green to initialize with, then I need to switch to red, BUT, I need to keep the green selections. This code example simply switches all day selections to red. It's good to see it working of course, but how can I keep the green selected days, with the red selected days?

                 

                I actually have the need to use up to 26 colors for this type of interaction...

                • 5. Re: How to change backgroundColor on a non-halo themed control
                  Subeesh Arakkan Level 4

                  Hi,

                   

                  Flex supports both the camel-case and hyphenated syntax in style sheets but in ActionScript or an MXML tag, you cannot use hyphenated style property  names, so you must use the camel-case version of the style property.

                   

                  Check this docs page for more info.

                   

                  http://livedocs.adobe.com/flex/3/html/help.html?content=styles_03.html

                   

                  I think you need to create a Custom SelectionIndicatorSkin if you want more control over the colors. Not sure though.

                  • 6. Re: How to change backgroundColor on a non-halo themed control
                    Devtron Level 3

                    Thanks Subeesh, very helpful and makes sense in regards to the CSS.

                     

                    How can you create a custom selectionIndicatorSkin? I have never "skinned" anything, ever. What is a good way to approach it?

                     

                    Here is an example that does color coding, but in the source I do not see any custom skins?

                     

                    http://flexmonkey.blogspot.com/2010/06/displaying-color-coded-events-in-flex.html

                     

                    Honestly I really cannot understand how the color coding in that example works. I see how the color is set in the Popup object, but do not understand how it interacts with it's dataProvider. I looking at it....but do you know of examples on making custom skins?

                    • 7. Re: How to change backgroundColor on a non-halo themed control
                      Subeesh Arakkan Level 4

                      answered to your other question on the same topic