2 Replies Latest reply on May 26, 2011 7:32 AM by Freydaklin

    Styling Spark components

    Freydaklin

      Hello, this might look like a dumb question but I've spent days trying to get this done...

       

      I'd like to know how to change the rollover color of a spark button.

      Now, this is what I already have:

      s|Button
      {
          chromeColor: #AAC0FF;
      }


      s|Button:over
      {
          color: #00FF00;
          chromeColor: #FFFFFF;
      }


      s|Button:down
      {
          chromeColor: #
      FFFFFF;
      }

       

      No big deal, but when I move my cursor over the button it's grey and not white. I'd love to know how to remove that annoying greyish color layer from my button, and *if* possible, using CSS only.

      I've seen tutorials where people actually define their own button, inheriting the basic button properties, but isn't that a bit an extreme approach to change the rollover color of a button?

       

      Another thing that has been driving me mad is to change the background color of the title of an Alert box:

      .alertTitle
      {
          backgroundColor: #AAC0FF;
      }

       

      mx|Alert
      {
          cornerRadius: 0;
          titleStyleName: "alertTitle";
      }

       

      That won't do the job either. The title bar remains grey, while I can change the background of the alert box (only the zone in which the alert message appears).

      From what I've seen in the Adobe documentation, the titleStyleName refers to a "Panel" style. And the Panel should support the property backgroundColor!

       

      I've seen a lot of different approaches on the net, but none of these seemed to work, or were really too complex to make me give it up.

       

      Thanks for any suggestions!

        • 1. Re: Styling Spark components
          bbrewer_007

          Freydaklin,

           

          The chromeColor style will not do what you need. The purpose of the chromeColor is to easily apply a tint to UIComponents. You are applying a white tint to a grey color, which results in grey. You will have to create your own skin to achieve something more.

           

          Is there a reason you don't want to create a custom skin? It will give you much more control over the look / feel of your button.

           

          Another option would be to create a custom component that extends spark.components.Button and adds a style that you could use to change the exact color of your button. This would give you what you are looking for, but be much more work than creating a skin.

           

          Hope that helps.

          • 2. Re: Styling Spark components
            Freydaklin Level 1

            Hello,

             

            Thank you for replying to my old unanswered question!

            The reason why I tried to avoid creating a new skin is because it's quite some work (yet another file to be added to one of my packages), just for changing a button's color...

            Note that I was relatively new to Flex when I wrote this topic. About 4 years ago!

            However, in the meanwhile, I figured out that's just the way Spark components seem to work, and if I don't like their look, I must create a new skin.

            It would be so much easier if you could just change a property like "backgroundColor" and maybe set another property "chromeEffect" to false, but anyway, Flex != HTML/CSS, and I think what Adobe calls CSS in Flex is far from being something close to CSS as defined by the W3C... :-)

             

            Thanks again for your attention and information.