How to style/skin Canvas Components ?

[moccamaximum]

Couldn´t find any source how to style/skin the new canvas components.

New features summary for the 2017 release of Animate CC

The provided code snippets are not very helpful.

Could anyone point me in the right direction?

I´m especially interested in setting fonts, colors for the input box component and the button component.

[Preran]

Not the exact answer, but all possibilities for HTML5 canvas in Adobe Animate are documented in this article.

Create HTML5 Canvas documents in Animate CC

[kglad]

did you ever find a way to do that?

[Joseph Labrecque]

You should be able to use the CSS Component to point to a .css file which provides all style information for skinning HTML5 Canvas components. Is this what you mean?

Refer to the class names of various components in your custom CSS:

[kglad · Accepted solution]

after posting i saw how to use that.  you can use the instance name of the component instance and style with an id (#) and you can change the components class name and style the class (.)

but there are some significant limitations.  eg, i can't see any way to make a textinput multiline.

[ClayUUID]

kglad  wrote

but there are some significant limitations.  eg, i can't see any way to make a textinput multiline.

Yes, because the textinput component is just a wrapper around an HTML input element, which does not support multiline input, full stop.

For multiline input you use a textarea element. So, you can roll your own overlay, or wait for Adobe to add a textarea component.

[kglad]

it was such a mess (trying to work around the animate limitations), i decided to just use a html form and location.href to go back and forth between the animate created website and the 'page' with the form rather than integrate the two.

edit: i changed that href stuff to hiding and showing the canvas div and showing and hiding a div containing my form.  that avoids reloading.