Automatically create a 1px border in all exported scenes

Wow I understand adding a border automatically can get really tricky! Maybe it can be fulfilled some other way? But I don’t have the knowledge or experience using Hype to accomplish this.

In online ads, adding a solid 1px border is a mandatory request almost all the time.

Lol.
This issue is not really related to adding a border more it has just been highlighted by it. The issue could arise in other workflows.

I fixed this “bug” in the way the id is handled via the export script if the id starts with a number and will post that later today.

The quick fix if you need it before then is just to rename your scene names to start with a letter.

1 Like

And it worked, of course! I learnt you couldn’t name an id with a number, but just forgot after quite some time not using that knowledge.

1 Like

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

DCM.hype-export border_v2 py.zip (4.7 KB)

Please re download from the original post in this thread

1 Like

This script works perfectly fine with the project I was doing. All of the scenes have their borders as needed. Thank you.

1 Like

Hello! I’m testing this development to create many sizes with a few designs and it works really beautifully. But now, the export is missing the right and lower borders in the preview and export.

Is it something in the export script to tweak?

This is the preview in the HTML5 validator, for example. I can see the same problem in Hype preview.

Can you post a small example and I will try and see whats going on

Sure! This is the project I was using.
Test_adaptable_v2.hype.zip (2,1 MB)

I do not have that validator but when I use response layout design mode in Safari. I see that the border is there. But I think the scene is being adjusted by the layout code you are using that seems to be making it larger. The border is there and if you drag the scene over you will see the is some size slack in the scene

Hi there!

It is the Google validator. You can also try it here: https://h5validator.appspot.com/dcm/asset

I also use the Safari response mode and the problem persists as well for me. Strange?

When in the design mode. Try and drag the scene to the left and up. You will see the border…

When I look at it using the validator.

If I set the viewport size to 336x280

The scenes container goes to to 2px width & 2px height larger

Maybe I’m missing something, in the Hype app I can’t see the border. Only when it’s actually exported and then I preview the HTML file in a browser. All of them are missing the right and lower borders (tried a few browsers already).

Thank you for taking the time to make a video :smiley: There is no way I can do that! It takes me to the link in the ad. I’ll try to restart the computer and check it again later.

I managed to do it! So the border is there but can’t see it. It was exported nicely in past occasions, so I really don’t know what is different now except that is a flexible design.

It definitely is to do with responsive…

I will keep digging…

I asked h_classen whom is the script author but the script is not the reason for this, after asking him.
Interesting! :slight_smile:

yep, thats what I found…

what about
box-sizing : border-box
as style for the hype-container¿

3 Likes

You are the Man that seems to fix it.

I will update the above Export script

Thanks Hans

1 Like