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

1
  • 68 favourites

Index

Stats

20,018 visits, 48,023 views

Translations

This tutorial hasn't been translated.

Tools

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.

+ 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!