I've been working on some Hype projects, that I need to embed in a Wordpress site. I'm using the Hype Wordpress-plugin so I am exporting to .oam.
I am using innerHTML to set up som input-tags, but the css of the Wordpress-site is allowed through and it is interfering with the inline style I've put in my input-tags.
How can this be, if I'm using "Protect from external styles"?
In the plugin options i'm using a div-container around my animation. If i instead use the iframe-option, my input-tags are protected, BUT instead some of my javascript suddenly doesnt work.
Hype sets CSS on most elements you create to ensure that what you see in Hype is what you usually get (WYSIWYUG?). But it doesn't cover all element types -- so input fields which you have custom-coded are going to inherit any other CSS on the page (or in your WP theme).
To get your 'head' JavaScript on the same page as your embedded Hype document, you could either place it in your 'header' theme file, or use a plugin like Code Embed – WordPress plugin | WordPress.org to embed code only on a single page. (To use that plugin, first enable 'custom fields' on the post editor view). Otherwise, you would need to use the 'iframe' method of embedding to make sure that JS is also included on the page.
If there's a specific change the your Wordpress theme is making to your input fields, you could write your own CSS with !important to override those styles.
