Include css styles in symbol exports

So rather than me invent something first, does anyone have any existing tricks of getting styles in a project either in the Head or resource file to export with a Symbol.

( At the moment I include them in an element off scene which is picked up globally)

use javascript to create a ‘style’ declaration in the head

var stylesheet = document.createElement('style');
stylesheet.innerHTML = "YOUR DECLARATIONS / RULES";

EDIT Don’t forget to think of cascade when doing this. Perhaps a lazy way is to add !important to the end of your decs. There is another way to add ‘rules’:

stylesheet.insertRule("rule", index)
// example
stylesheet.insertRule("header { background-color: green; }", 0)
1 Like

Thanks, I will try that because if that works it makes them accessible.

I really would like one of the next Hype versions to include a check box option to what to include or not in a symbol export. Would make this type of kludging and that of including functions a whole lot easier.

Thanks. That works.

The functions get exported too so when you import you get them so long as you include them in the symbol.


But you will find that functions only get exported if they are attached to an event action in the Symbol.

In some cases where I have functions that do not get called by an event action I found the easiest thing to do was place an action on a symbol timeline that calls the functions but place a pause action before they actually get called. This allowed me to not actually call them from the timeline but have them exported.

I have put in a request for a selection option for exporting symbols because of this.

Can you give me a condition where you would use a function without an action call? for my own piece of mind

Also one thing I just discovered (in 518) is that when you delete a symbol you’ve imported it leaves the functions behind. Then if you re-import it, it adds the same function in the resource box list. I’m assuming these won’t get exported in the final export. It’s just a reference? @Daniel @jonathan

Also depending on your function names could get messy? :smile:

EDIT nope I just changed one function and it wasn’t represented in the other duplicate. That could cause problems down the line :open_mouth:

1 Like

A couple of reasons,

Where you do not want a function to load at symbol load.

I have some functions that if I put them in the symbol load they are triggered too early, even if I order them.
Therefore I only call the first function ‘config’ which then calls the others at the end of it’s run.

I also dynamically add click actions which their function do not need to be called at load or can be added to a mouse event in the Hype UI.

ok I see.

1 Like

The same goes if you import a symbol twice ( which I guess makes sense) but you end up with two sets of the functions.
You need to remember to import once and then copy and paste where needed.