3 Replies Latest reply on Jun 11, 2009 1:56 PM by Peter deHaan

    CSS reference chart for spark?

    wicket971 Level 1

      I'm running into many issues when trying to add CSS into my project due to the way spark skins now work with CSS. Is there a CSS reference chart I can use or spark?  Also why did Adobe remove the CSS design view in flash builder 4?

        • 1. Re: CSS reference chart for spark?
          tstatler

          Hi,

           

          Can you elaborate on the issues you're having with CSS? The main change between Flex 3 and Flex 4 is 'CSS namespaces'. I don't know of a reference chart, per se,but I took the following from an article in Adobe Dev Center called 'Differences between Flex 3 and Flex 4 beta'.

           

          Flex 4 beta has  also added multiple namespace support in CSS. If you are using the MXML 2009, Spark, and Halo namespaces along with Type selectors, you will need to define a set of namespaces in your CSS definitions to avoid name collisions.

                

          Here is an example of CSS that uses type selectors for both Halo and Spark components:

                

          <fx:Style>

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

              s|Button {
                  color: #FF0000;
              }

              mx|DateChooser {
                  color: #FF0000;
              }

          </fx:Style>

           

          The Halo and Spark skinning models are different enough that the existing CSS design view implementation (in Flex Builder 3) isn't the right solution for the task of skinning Spark components. The engineering team is currently investigating ideas to address this issue in FB4 for Spark components. (Btw, the CSS design mode is still available in Flash Builder 4, but only for Flex 3 SDK projects.)

           

          thanks

          Tim

          • 2. Re: CSS reference chart for spark?
            wicket971 Level 1

            For instance in Halo the CSS for my button would look like the following:

             

            .defaultButton {
                color: #333333;
                fontSize: 10;
                skinClass: ClassReference("skins.defaultButtonSkin");
                textRollOverColor: #FFFFFF;
                textSelectedColor: #FFFFFF;
                fontWeight: bold;
            }

             

            The text would turn white when the button is rolled over.

             

             

            This does not work in Flash Builder 4 on the button component. So I'm trying to find out the new properties available for writing spark CSS.

            • 3. Re: CSS reference chart for spark?
              Peter deHaan Level 4

              wicket,

               

              Sorry, are you trying to style a HALO Button control or a SPARK Button control in Flash Builder 4?

               

              I *believe* the default Spark skin for the Halo Button control should still support those text styles.

              For the Spark Button component's default skin, you'd need to tweak it a bit to add the roll over color and selected color styles. For example, I would copy the default Spark Button skin from \frameworks\projects\flex4\src\spark\skins\default\ButtonSkin.mxml and change the SimpleText at the bottom to specify the label color style in the down/over states:

              <s:SimpleText id="labelElement"
                           textAlign="center"
                           fontWeight="bold"
                           verticalAlign="middle"
                           lineBreak="toFit"
                           truncation="1"
                           color.over="#FFFFFF"
                           color.down="yellow"
                           horizontalCenter="0" verticalCenter="1"
                           left="7" right="7" top="5" bottom="5" />


              Peter