Adjusting the inline styles created with the hype div container

I am constantly changing the inline styles with a text editor and so I am wondering is there a way to export the hype animation basically I am changing this:

<div id="myAnimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="my.....

to this:

<div id="myAnimation_hype_container" class="HYPE_document" style="margin:auto; position:absolute; top:0; width:100%; overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="my.....

is there anyway I can do this rather than post export?

Here's one way to do that: (12.2 KB)

It clears the styles of the current element and replaces them with an array of your own styles:

// runs after the scene has been loaded. This code goes in the 'head' of your Hype document: 
function myCallback(hypeDocument, element, event) {
  function clearAndApplyStyles(elementId, styles) {
    var element = document.getElementById(elementId);

    if (!element) {
      console.error("Element with ID '" + elementId + "' not found.");

    // Clear all inline styles

    // Apply new styles
    for (var key in styles) {
      if (styles.hasOwnProperty(key)) {[key] = styles[key];

  var styles = {
    margin: "auto",
    position: "absolute",
    top: "0",
    width: "100%",
    overflow: "hidden",

  // Comment out this first line after testing: 
  clearAndApplyStyles("index_hype_container", styles);
  clearAndApplyStyles("myAnimation_hype_container", styles);

// Add Hype event listener
if (!window.HYPE_eventListeners) {
  window.HYPE_eventListeners = [];

window.HYPE_eventListeners.push({ type: "HypeDocumentLoad", callback: myCallback });

cool method of doing it.. but I am guessing we don't have any direct control... but still cool method... thanks

You could also run the clearAndApplyStyles function 'On Scene Load' and it will adjust the Hype id's inline styles as well

Just wondering why you cannot simply put this in the head.



 margin: auto!important;
    position: absolute!important;
    top: 0;
    width: 100%!important;
    overflow: hidden!important;



Or in a css file.

This will not reflect in the Hype IDE but will on preview and export.

1 Like

A better way! You can also place this in the inner HTML of a rectangle if you can't add more code to the page where your Hype doc is embedded.

1 Like

As in the css in a Rectangle innerHTML

Good idea. Works

I like the css in a hidden Rectangle a lot.

It can also allow you to see live edits to css in the IDE when using class names.


(see Bug : css style for id's # not showing in Hypes IDE for why IDs don't work for live IDE at the mo)


Love it either! Using it in most of my projects!

1 Like