How to get the published game look like preview

I like the way the Preview looks, i.e. centered in the browser and with a nice gray rounded-cornered border.

But when I export the game and upload it, it doesn't look as good. It's only centered horizontally and there's no good looking gray border.

How can I get the exported game to look as good?

Thanks.

This tutorial should help you.

It's a matter of copy/paste in the index.html file, and setting the CSS styling the way you want.

The last pages of the tut gives direct/easy ways of doing so.

OK Thanks, I guess I was hoping for more of an automatic way :-D, kind of like a project setting or export dialog setting "Center game canvas in browser window" and "Add cool gray border to game canvas". I mean, the code is already written for the preview, why not make it available in the exported game?

I export and upload a lot because I need to test on the real server (some AJAX stuff at work), that's why I'm a bit reluctant to manual work :D but if it must be done, then it must be done. It would be nice to have it automatic though.

I haven't looked closely at the SDK and ways to extend Construct 2, would it be possible for me to add those checkboxes to project settings or export dialog? (like some plugin, or add-on etc...)

Thanks!

Plugins won't allow you to modify the IDE itself, it mostly deals with the runtime.

One solution could be for you to modify directly the export.html file in the folder exporters\HTML5, though I don't recommand it much.

Also, since you host online, on export, simply copy the c2runtime file to your host, not the rest (apart from new images ofc). You could very well have your defined html file online and never touch it again.

Good idea, I'll modify the index.html once and then I won't touch it (I'll diff every now and then just in case, like when upgrading C2).

Thanks.