How to add css styling to Edge Animate elements?

Your code should look like this:

sym.$("bio").css("text-align","justify");

Multiple would look like this:

sym.$("pic").css({ "background": "url(images/toy-A.jpg) no-repeat","opacity" : "0.6"});

The text lines in a text box are seperated by a <br> and not a <p> tag so there is no way to target paragraphs.

So I think your best bet is to use seperate text boxes for each paragraph.

sym.getSymbol("WelcomeBtn").$("Welcome").css("color","blue");

Just following on from this question actually, as I'm having some issues changing the css gradient of another element. If I just want to change the standard background colour, it works fine. Here is my syntax at the moment:

sym.$("Q1_Ellipse_1837Copy4").css("background-image": "-webkit-linear-gradient(270deg,rgba(226,124,124,1.00)0%,rgba(198,15,15,1.00)50%,rbga(135 ,25,25.1.00)100%");

Here is the code for FF:

sym.$(""").css("background-image", "-moz-linear-gradient(top, #8f8f8f, #ffffff)");

There is an error in your code: You need to replace : by ;

sym.$("Q1_Ellipse_1837Copy4").css("background-image"; "-webkit-linear-gradient(270deg,rgba(226,124,124,1.00)0%,rgba(198,15, 15,1.00)50%,rbga(135,25,25.1.00)100%");

or you can use the css with style format {}

sym.$("Q1_Ellipse_1837Copy4").css({

"background-image": "-webkit-linear-gradient(270deg,rgba(226,124,124,1.00)0%,rgba(198,15, 15,1.00)50%,rbga(135,25,25.1.00)100%"

});

But it does not work in Chrome, though it works with the gradient panel in Edge.  It works in FF.

I will try to do some research on it.

Really helpful thread, thank you all!

Just another question (I know really basic but I am rather new to Animate):

_where_ does the code go?

Because for a single element you have to choose an action (eg. "on click") befor you can add code ...

Thanks for help!

Hi, TEAMniel-

You can stick the code into your initialization function for your symbol (creationComplete) or the composition's compositionReady function.

Hope that helps,

-Elaine

What and where is the "symbol (creationComplete) or the composition's compositionReady function" ??

CompositionRead is found when you select the {} next to Stage in the elements panel or on the left (same {}).

creationComplete of a symbol is found at the top of the elements panel while inside the symbol at the top level when you click the {} brakets.

Thanks. BTW how did you know that? Did you just read some part of the non-existant documentation that I missed?

Been working with Animate for 2 years since the beginning.

Check out my tutorials on edgeHero.com, particularly this one:

http://www.edgehero.com/tutorials/scope

Yes, I've bookmarked your page. Meantime, I edited another response to your question as I'd figured out how to apply a css rule to a single item. Now I want to know how would I designate items like headlines on various symbols as 'h1' for example, and where would I put the style rule that set the properties for all h1 text?

Thanks-- very helpful so far.

Try to use the correct style from the menu:

And how can I to define wich style is h1, h2, h3 with UI of Edge?

Actually I do not use the panel above. I use

sym.$('Text').html('<h1>Title here</h1>');

and append the css file in creationComplete.

Is there a way to use a similar method to check a css value as opposed to changing a css value. Something like:

var opacity = sym.$("bio").css("opacity");

Then I would be able to create an if statement checking if the opacity (driven by keyframes) is a certain value.

Absolutely. If you set an alert or use the console, it will return the value.

Try this:

var opacity = sym.$("bio").css("opacity");

alert(opacity);