4 Replies Latest reply on Apr 30, 2009 5:35 AM by flashharry!

    Difference with embedded CSS vs loading runtime CSS

    flashharry! Level 1

      Hi,

       

      Move from embedded CSS to runtime CSS, but having some subtle differences.

       

      Picture 3.png

      note the numeric stepper handles have default colors, this is with embedded css and what the client wants

       

      Picture 1.png

      This one is runtime css note the handles are black.

       

      I had this in both before embedded and runtime CSS

       

      NumericStepper {

         fillAlphas: 0.6, 0.4, 0.75, 0.65;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

         themeColor: #92de78;

      }

       

      I added this to the runtime css and entered the style name for the numeric stepper but still no luck

      .numericStepper {

              fillAlphas: 0.6, 0.4, 0.75, 0.65;

              fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

              themeColor: #92de78;

      }

       

       

      Any ideas complete css below. BTW my alerts are not using the runtime css as well yet embedded css works fine  

       

       

      @font-face {

      src:url("auth_module/poetica.swf");

      font-family: "Poetica Std";

      }

      Application {

         backgroundImage: Embed(source="/images/bkg.gif");

         backgroundSize: "100%";

      }

      NumericStepper {

         fillAlphas: 0.6, 0.4, 0.75, 0.65;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

         themeColor: #92de78;

      }

              .numericStepper {

              fillAlphas: 0.6, 0.4, 0.75, 0.65;

              fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

              themeColor: #92de78;

              }

      Alert{

      color : #000000;

      title-style-name : "alertTitle";

      button-style-name :"alertButtonStyle";

      header-height:21;

      border-thickness: 1;

      drop-shadow-enabled: true;

      drop-shadow-color :#CCCCCC;

      shadowDirection:right;

      shadowDistance:7;

      background-color: #ffffff;

      corner-radius :6;

      border-style :solid;

      header-colors : #DDDDDD, #ffffff;

      footer-colors : #DDDDDD, #ffffff;

      border-color : #333333;

      }

      .alertButtonStyle {

      color : #000000;

      }

      .alertTitle{

      font-family :Verdana;

      font-size :10;

      font-weight :bold;

      text-align :left;

      color :#000000;

      }

      .selectedBox {

      headerColors:#336633,#447744;

      borderColor:#447744;

      titleStyleName: "selectedHeaders";

      }

      .legendBox {

      border-thickness: 2;

      border-style:solid;

      border-color: #93C789;

      }

      .legendMask {

      stroke-color: #333333;

      stroke-width:2;

      shadow-color: #333333;

      }

      .legendTitle {

      font-size :12;

      font-weight :bold;

      }

      .accordionHeaders {

      font-family: "Poetica Std";

      font-size:14pt;

      color:#FFCC00;

      }

      .copyrighttext {

      font-family: "Poetica Std";

      font-size:14pt;

      }

      TextInput {

         color: #0b333c;

      }

      List {

         color: #0b333c;

      }

      CheckBox {

         themeColor: #92DE78;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

         color: #0b333c;

      }

      .piecharBackground {

      backgroundImage: Embed(source="/images/bkg.gif");

         backgroundSize: "100%";

         color: #93C789;

      }

      DataGrid {

         color: #0b333c;

         rollOverColor: #92de78;

         selectionColor: #93C789;

         textRollOverColor: #cc3333;

         headerColors: #000000, #333333;

         headerStyleName: "mydataGridHeaderStyle";

      }

       

      .mydataGridHeaderStyle {

         color: #92de78;

      }

      ApplicationControlBar {

         highlightAlphas: 0.4, 0;

         fillAlphas: 1, 1;

         cornerRadius: 0;

         fillColors: #000000, #333333;

         backgroundColor: #000000;

         color: #93C789;

      }

      CheckBox {

      color: #93C789;

      }

       

      Accordion {

         fillAlphas: 1, 1, 1, 1;

         fillColors: #000000, #333333, #000000, #333333;

         selectedFillColors: #000000, #333333;

         themeColor: #92de78;

         textRollOverColor: #cc3333;

         headerStyleName: "myaccordionHeader";

         borderColor: #93C789;

         backgroundImage: Embed(source="/images/bkg.gif");

         backgroundSize: "100%";

         color: #92de78;

      }

       

      .myaccordionHeader {

         color: #92de78;

      }

      TabNavigator {

      tabStyleName: "myTabs";

      selectedTabTextStyleName: "mySelectedTabs";

      dropShadowEnabled: true;

      backgroundColor: #2e2e2e;

      borderColor: #93C789;

      }

       

      .mySelectedTabs {

      color: #92de78;

      }

      .backGroundPanel {

              backgroundImage: Embed(source="/images/bkg.gif");

         background-size:"100%";

         color: #93C789;

         textRollOverColor: #92de78;

         dropShadowColor: #92DE78;

              }

      Button {

         fillAlphas: 1, 1, 1, 1;

         fillColors: #000000, #333333, #333333, #000000;

         color: #92de78;

         textRollOverColor: #cc3333;

         borderColor: #93C789;

         themeColor: #92de78;

      }

      RadioButton {

         themeColor: #92DE78;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

         color: #0b333c;

      }

      CheckBox {

         themeColor: #92DE78;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

      }

      ComboBox {

         themeColor: #92DE78;

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

         color: #000000;

      }

      DateChooser {

         headerColors: #000000, #333333;

         themeColor: #92DE78;

         headerStyleName: "mydateChooserHeaderStyle";

         fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;

      }

      VScrollBar {

         trackColors: #333333, #666666;

         themeColor: #000000;

         borderColor: #000000;

      }

      Panel {

         borderColor: #000000;

         borderAlpha: 1;

         titleStyleName: "mypanelTitle";

         dropShadowColor: #000000;

         roundedBottomCorners: true;

         headerColors: #333333, #000000;

         

      }

      .selectedHeaders{

      color :#000000;

      font-weight:bold;

       

      }

      .windowStyles {

                  color: #92de78;

              }

              TitleWindow {

              color: #92de78;

              closeButtonSkin: Embed("/images/del_24.png");

                  /* Set values from defaults.css to null. */

                  closeButtonDisabledSkin: Embed("/images/del_24.png");

                  closeButtonDownSkin:Embed("/images/del_24.png");

                  closeButtonOverSkin:Embed("/images/del_24.png");

                  closeButtonUpSkin: Embed("/images/del_24.png");

              }

        • 1. Re: Difference with embedded CSS vs loading runtime CSS
          m_hartnett Level 3

          The problem is in the definition of your Button css.

          Since the numericStepper controls are extended from a Button the button css is being used.

           

          Not really sure how you would resolve this.

          Perhaps there is some style object associated with the stepper buttons.

          • 2. Re: Difference with embedded CSS vs loading runtime CSS
            flashharry! Level 1

            I understand what you are saying but why would the embedded CSS work 

            and the runtime one not?

            I would have thought placing the numeric stepper css after the button 

            directive it would fix the issue but does not.

             

            emm.....

            • 3. Re: Difference with embedded CSS vs loading runtime CSS
              m_hartnett Level 3

              The documentation says that a NumericStepper is composed of a TextInput and 2 buttons so I do understand why the buttons are getting styled the way they are.

               

              I added a Button and a NumericStepper to a text application using Embedded Styles and it did produce the Button style effect.  I took the Button out and of course the Numeric buttons were rendered as the default Flex style of off grey / white.

               

              Some of the Flex objects have additional style properties that allow you to style the individual components of the object however the NumericStepper does not seem to have that option.

               

              I think the only way around it would be to get the children of the stepper and style them individually

               

              var btn:Button = numericStepper.getChildAt(1) as Button;

              btn.setStyle("fillColors",["#ffcccc","#cccccc"]

               

              and do the same thing for child 2

               

              or extend the NumericStepper and override the style to be what you would like.

               

               

               

              • 4. Re: Difference with embedded CSS vs loading runtime CSS
                flashharry! Level 1

                The more I dug into this it was not so much the difference between runtime and embedded css but between Flex2 and Flex3

                 

                This was an app originally created in Flex2, I'm in the process of updating, localizing, creating external css etc. Turns out Flex3 Numeric stepper handles the button css differently.

                 

                In the end I extended the Numeric Stepper (suggested)  with its on style name for the buttons.

                 

                Thanks

                flash.....