Adobe Community: Message List - How to add css styling to Edge Animate elements?

Re: Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Wed, 08 Oct 2014 20:10:41 GMT

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);

Re: Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 07 Oct 2014 20:03:13 GMT

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.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Mon, 28 Jul 2014 13:16:26 GMT

Actually I do not use the panel above. I use

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

and append the css file in creationComplete.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Mon, 28 Jul 2014 07:54:09 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Thu, 29 May 2014 12:45:22 GMT

Try to use the correct style from the menu:

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sun, 02 Mar 2014 23:26:48 GMT

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.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sun, 02 Mar 2014 23:10:52 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sun, 02 Mar 2014 23:08:01 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sun, 02 Mar 2014 22:56:20 GMT

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.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sun, 02 Mar 2014 22:21:19 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Fri, 18 Oct 2013 22:51:55 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Sat, 12 Oct 2013 21:29:10 GMT

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!

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Mon, 20 May 2013 11:48:47 GMT

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.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Mon, 20 May 2013 09:52:43 GMT

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%");

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Thu, 14 Feb 2013 01:13:24 GMT

Thank you again! The placement of the $ sign is what gets me.... lol

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Wed, 13 Feb 2013 11:45:38 GMT

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Wed, 13 Feb 2013 02:11:13 GMT

...oh, and if I wanted to target the css of text inside a symbol - For instance, if I had the text "Welcome" inside a Symbol labelled "WelcomeBtn" and I wanted to change the color of the text using the WelcomeBtn.click event... how would I do that?

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 23:17:06 GMT

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.

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 22:24:39 GMT

Awesome! Thank you again, you rock!!

One other quick question... to indent the first sentence of each of a few paragraphs, does each paragraph need to be in a separate div and then apply text-indent to a parent div, or is there a way to do that in a single div containing multiple paragraphs? (I tried using text-indent on my "bio" div which contains 3 paragraphs, but it only indented the first paragraph...

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 22:11:16 GMT

Multiple would look like this:

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

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 21:30:33 GMT

Thank you sooo much Schrene for your prompt reply!

So basically, to style anything in Edge Animate, you would always use the format...

sym.$("divId").css("cssStyle", "cssStyleProperty");

So if I wanted to accomplish multiple css tasks, would it look like this...?

sym.$("bio").css("text-align","justify","text-indent","2em"); - [ie to indent the first line in every paragraph]

Re: How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 21:13:16 GMT

Your code should look like this:

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

How to add css styling to Edge Animate elements?

forums_noreply@adobe.com — Tue, 29 Jan 2013 21:05:10 GMT

I have done a complete search on this, and have tried based on the example here: http://forums.adobe.com/thread/979124?promoid=KBHBD

But I can't seem to get it to work...

I am trying to justify text created in Edge (in which I named the div "bio" in the properties panel) using this method in document.compositionReady - $("#bio").css("text-align","justify");

But it won't work.. I can't find many examples of using css to style divs in Edge so can someone help me?

ALSO - to help others who may have the same question, would you also be able to explain to noobs what the generic proper method is?

Thanks all!

Aza