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

Index

Stats

13,330 visits, 34,012 views

Translations

This tutorial hasn't been translated.

Tools

+ 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

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