Automatically create a 1px border in all exported scenes

(Carola Clavo) #6

Hi there! Saw it but couldn’t find the time to study the document. Much much appreciated, big thanks :slight_smile:


That’s the problem with adding custom styles to the HTML header. If the export doesn’t use the HTML file, if you embed the Hype project directly on a different HTML page, then the styles aren’t loaded / used.

This is one of the reasons I tend to use “iFrame” as the way to add a project to a page.

But if don’t want to use iFrame, or you can’t use iFrame, then just use inline styles to add a border to the element containing the Hype project… or use custom JavaScript (that’s the second option in the solution) to add a border… or just add four line shaped elements (as persistent symbols) to your project that look like a border. (If you simply add a box, it might block clicks, so the four separate elements prevents that problem.)

There are lots of ways to solve this problem.

(Carola Clavo) #8

The problem is that, if I use the DCM export to make banners, how can I use a second export script? Or can I?

(Mark Hunte) #9

I cannot look at it at the mo. But PM me the DCM version of you use and I will see if I can transplant my code to it.

(Carola Clavo) #10

Thank you. Definitely adding four elements per scene is not my solution since that means a crazy amount of work for something so simple as adding a black border. I just set a border to the tap-area rectangle, I hope the agency will accept this. Otherwise I’ll create a rectangle under it since the whole ad has to be clickable, not just the button. Hopefully I’ll sort it out for the time being :stuck_out_tongue:

(Mark Hunte) #11

So here is the DCM version I wrote for inserting a border.

python is not a language I am massively up on, so hence me saying this is rough and ready.
Maybe @Daniel can have a quick look and give me some pointers on anything in it that could be changed.

Any way. The arguments are normal border arguments.

Updated to version2 (05 Jan /2018) - fix for css id issues and a couple of other bugs.

Updated to version 2.0.1 (17 Jan /2018) added css box-sizing to account for any padding being added for Layouts

DCM.hype-export (4.7 KB)

When exporting my documents I can only see code in the browser
(Mark Hunte) #12

Did this work for you.?

(Carola Clavo) #13

Hi there! It worked wonders! Thank you :smiley:

I did install the script from the export options in the Hype Preferences, and now I can see the border. This solved my problem definitely. Big thank you!


Looking good to me :slight_smile:

But I’m also no Python expert – Jonathan is the mind behind the export scripts.

(Mark Hunte) #15

If there is a demand for this and @jonathan is good with the py whats the situ about these scripts being place on the export scripts page as a resource?

(Carola Clavo) #16

This would be a timesaver for anyone creating ads for networks that require always a border! If it can be shared amongst the other resources, I’m sure many would appreciate it. And thanks again!

(Carola Clavo) #17

Hello again!

I was trying to use the script with some ads and I cannot export all of them with Advanced export options. If I export the first scene directly, from File > Export as HTML5 it works. But if I choose File > Advanced export to select more than one individual scene, the resulting files will miss the border. Can I export all of the scenes with a border automatically?

By the time being as I have to set up a tap area rectangle for each ad, I’m using a border in that element :slight_smile:

(Mark Hunte) #18

I do remember testing on slices and it working the way I tested.

Can you maybe pist a small example project and a screen grab of the advance settings you are trying…

(Carola Clavo) #19

It is the same project I was working on today earlier :slight_smile:
This is how the export options look (in Spanish but you can get the idea, I hope):

This is my project:
LATAM SemanaSanta sin (260,0 KB)

(Mark Hunte) #20

Ok so a quick fix until I find where the clash is…

It seems if your scene name begin with a number there is a a bug somewhere in the exported js. that does not like it??!
This is also the case if we do a normal export and name the zip starting with a number…

So the quick fix is to rename the scenes.



(Mark Hunte) #21

Further update.

If I do a normal export on a project (Export Folder not using export script) with
<style>#300_hype_container{ border: 1px solid black;}</style> in the head manually

And the exported project is name 300 , We get the same issue.

If we do

#U300_hype_container{ border: 1px solid black;}` in the head manually

And the exported project is name U300 . All works ?.

So it seems the issue lays with how Hype exports generally to the ‘hype_generated_script.js’ script and not the export scripts.

Hi, @Daniel are @jonathan are you able to throw any light on why this would be the case.

Hmm Thinking about it, I am wondering if it is related to the same reason you should not have var names starting with numbers


CSS IDs can’t start with a number unfortunately, but there’s a funky workaround:

(Mark Hunte) #23

Ah I see. It all makes sense now. Thanks.

I will lookI think the simplest for people just not to name scenes ( or any id ) stating with a number if they have css that will need to use it but I will look at maybe incorporating that trick in the link for the purpose of the border export script.
Thanks again :smile: :+1:

(Jonathan Deutsch) #24

I would suspect the reason this was lost is that you were referencing the #index_hype_container ID, but the main container ID is named based on the export, so it could be something like #myad_hype_container and then would not match. You would need to name your export as “index” for it to work – Hype’s preview uses “index” as the export name.

Hmm, maybe this should be considered a bug in Hype then. It might also be a good idea for cases like this to give the main container a CSS class.

I’d have to think through generally if this is a feature widely desired in the export scripts. Regardless, you’re welcome to send a pull request in GitHub if you’d like me to look at the changes and possibly integrate them.

(Mark Hunte) #25

Thanks Jonathan,

The script takes care of the naming so the container name Id is always the correct one used.

I have fixed the css issue in the code using the trick Daniel suggested and will post it later… I will also look at doing the git pull ( not done one before)

Thanks again