Construct2: How to customize the exported HTML5 index.html ?

3

Index

Tagged

Stats

26,166 visits, 61,542 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 13 Sep, 2011. Last updated 19 Feb, 2019

+ Quick "How to"

As this tutorial has been qualified of vague and complex, which is understandable, here are a few really quick "How to" about commonly asked subjects.

If you want to further customize or get explanations about what's happening I suggest you to read again the previous pages.

° Change the color of the background.

Open the index.html file of your exported project in a notepad.

At the line <body> (should be line 19 in a default exported index.html) change to :

    <body style="background-color:#000000;">

The end of the line (#000000) is the color in hexadecimal notation. Find more about colors in CSS.

Be sure to have a ';' as the last character before closing the quotes.

° Put an image as background.

Open the index.html file of your exported project in a notepad.

At the line <body> (should be line 19 in a default exported index.html) change to :

    <body style="background: url("YOUR_IMAGE_URL") repeat scroll left top #BBBBBB;">

YOUR_IMAGE_URL is the url of your image. The current index.html file's location is the default's url.

ex: If your image is hosted in the same folder as index.html, YOUR_IMAGE_URL is just the name of your file with extension (eg: "background.png").

If your image is hosted in a folder under index.html's folder, YOUR_IMAGE_URL takes this form: "images/background.png".

This current line will display a background image and repeat it horizontaly and verticaly.

There's also a default color added.

More about this was covered in the tutorial.

° Display a logo.

Open the index.html file of your exported project in a notepad.

Somewhere in between the <body></body> tags, place :

    <a href="YOUR_URL"><img src="YOUR_IMAGE_URL" /></a>

<a> makes the image clickable and sending the browser to YOUR_URL.

<img> is the image itself. YOUR_IMAGE_URL follows the same format as in the previous paragraph.

More about this was covered in the tutorial.

  • 0 Comments

Want to leave a comment? Login or Register an account!