9 Replies Latest reply on Mar 2, 2014 3:34 PM by resdesign

    CSS question

    GraphicsGeezer Level 1

      As a complete Edge newbie, I've watched all the videos and have completed a couple of animations. I was wondering how you can style repeating elements, such as headline text, that are used throughout.

       

      The answers I have found on this forum might as well have been written in ancient Sanskrit for all the sense I can make of them.  I use Dreamweaver all the time and have no trouble getting CSS rules to work there but there doesn't seem to be ANY css inside Edge despite the fact that it claims to use CSS to create animations.

       

      Is there any way anyone can explain to a person of limited intelligence without using geek terminology just how I could style an element using CSS?

        • 1. Re: CSS question
          heathrowe Most Valuable Participant

          Yes it can be a little Sanskrit at times .

           

          The entire Properties Panel and the Timeline IS using css to get and transition elements, for you without having to delve into code. If you mouse-over any element value in the Properties panel you will see the css equivelent in a tooltip.

           

          Your knowledge of Dw css is all good, but there is an extra 'layer' to apply within Edge Animate.

           

          Primarily, Edge Animate leverages jquery + css notation to get and set element properties. See here for css() details http://api.jquery.com/css/

           

          An example of a get css property of an element would look like this:

           

               var myElement = sym.$("Rectangle");

               var myBackgroundColor =  myElement .css( "background-color" );

           

               alert (myBackgroundColor);

           

          So all the above does, is GET the css proprty of myElement and spits it out to an alert box. Obviously you will want to do more with it but thats the general notation of getting a css property.

           

          To set the css property of an element would look like this

           

               var myElement = sym.$("Rectangle");

               myElement .css( "background-color", "red");   // you should see some similarities with traditonal css notation here

           

          So in the above example, though element 'Rectangle' may in fact be black in color within Edge Animate; line 2 resets it to red.

           

          One caveat with the above notation - this way of writing it only affects a single css property .css(" property " , " property value ").

          To affect multiple css properties, then the notation would look like this

               

                myElement .css({

                "background-color": "yellow",
                "font-weight": "bolder"
              });

           

          The difference is paired items is separated by :, and new property entries is delimited by a comma , 

              

                myElement .css({

                  "property" : "property value",

                  "property" : "property value"

             });

           

           

          hth

          Darrell

          1 person found this helpful
          • 2. Re: CSS question
            resdesign Adobe Community Professional & MVP

            You can use css styling this way for example:

             

             

            sym.$('txtElement').css({

                 'color': 'red',

                 'font-weight': 'bold'

            });

             

            on a shape

             

            sym.$('Rectangle').css({

                 'background-color': 'blue'

            });

             

            If these elements are in a symbol, make sure the scope is right.

             

            sym.getSymbol('name').

            sym.$('txtElement').css({

                 'color': 'red',

                 'font-weight': 'bold'

            });

             

            If you want to add style to a text you can also use html with the text

             

            sym.$('txtElement').html('use html tags here');

            1 person found this helpful
            • 3. Re: CSS question
              resdesign Adobe Community Professional & MVP

              Seems like we posted at the same time Darrell!

              • 4. Re: CSS question
                GraphicsGeezer Level 1

                Thanks to both of you. Redesign, you told me in another post to put the code into the actions panel. Since actions need triggers to I used "inFocus". I was then able to apply a css property like your code. It actually worked when I proofed the page!

                 

                Now what I want to do is style a selector, like H1, so that all H1 text turns blue, for example.

                 

                How would I do that?

                • 5. Re: CSS question
                  resdesign Adobe Community Professional & MVP

                  Youy could use this:

                  sym.$('txtElement').html('<h1>You title text here</h1>');

                   


                  • 6. Re: CSS question
                    GraphicsGeezer Level 1

                    Yes, but how would I designate the text as 'h1'?

                    • 7. Re: CSS question
                      resdesign Adobe Community Professional & MVP

                      tags.jpg

                      1 person found this helpful
                      • 8. Re: CSS question
                        GraphicsGeezer Level 1

                        Oh, that's terrific! Looked everywhere but didn't see that! You've been very helpful and very quick. Really appreciate the effort from both of you!

                        • 9. Re: CSS question
                          resdesign Adobe Community Professional & MVP

                          My pleasure and good luck on your project!