Widget OAM : no access to css in resources folder

Simple pb, the css file is not working with widget on a WP page.

Works well with the direct url : wp-content/uploads/hypeanimations/Folder/index.html

If someone have the solution ?
Thanks in advance.

When you embed the OAM as a ‘div’ it won’t include any content from the ‘head’ of your .html page. So you would need to toggle the ‘div’ to instead be ‘iframe’ on the Hype animations dashboard page within Wordpress and click ‘update’.

The ‘container around animation’ has an option for either iframe or div – you want ‘iframe’

An alternative is to include your CSS within the inner HTML of a rectangle:

  1. Create a rectangle (off the scene)
  2. Select Edit > Edit Inner HTML
  3. Insert your CSS code:

There used to be be a recommendation to set this CSS as ‘scoped’ if placed within the ‘body’, but that’s not longer the case: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

Thanks Daniel,

I read and try that answer in the forum but not working for me in this case.
It add scrolling bars, black background and break the css I add directly in WP…

In this example, I want text inside a rectangle.
I add padding around with an external css (not directly in the rectangle using the little pen) so I can update multiples occurrences at once.

With the OAM, without css I lose not only the padding but I lose the height and width of the rectangle as well : 30 px padding inside and 30px width and 30px height.
Stangely, if I add 30px of padding in WP I don’t recover the 2x30px width and 2x30px height…

So in editor, hype calculates and displays the sizes with padding but just in editor…

It sounds like you have CSS which is broadly affecting the Wordpress website, when you really just want it to affect your Hype document. Is that right?

I think I understand what you’re saying. Why are you unable to set your embedded document to use the ‘iframe’ method? This would ensure that your setup in Hype (with any external CSS references) matches what you see when embedding in Wordpress. Here’s what you would need to do: