This guide explains how to customize the source code, modify the CSS, modify the HEAD or BODY part of a website created with Site Creator Infomaniak.

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

Add custom code

Once in Site Creator:

1. Click on Design in the left sidebar menu.
2. Click on More settings.
3. Click on Custom code at the bottom:
   
4. Enter HTML, JavaScript (with its tags script) or custom CSS (with its tags style) - see below for a few examples.
5. Save the changes at the bottom of the page.

Metadata in HEAD & BODY

To add JavaScript code or any other code in the HEAD or BODY part of your site's source code:

1. Click on Settings in the left sidebar menu.
2. Click on SEO & Metadata in the Website configuration section:
   
3. Scroll down to Custom Code.
4. Choose to add under the tabs HEAD or under BODY.
5. Save the changes at the bottom of the page:
   

CSS customization examples

These examples help you get started with advanced customization of the website's pages. However, there is a risk that, depending on the changes made, you may no longer be able to access the editor itself, which will force you to start over from scratch.

Customize the website's background

To set your chosen image (to be uploaded in the file library) as the page background and customize its display:

1. Go to point 3 visible in the first image at the top of this guide.
2. Insert the code <style> to indicate that you want to modify the CSS code,
3. then body { to indicate that you want to modify the body of the page and the "{" to open the space allowing you to insert the commands,
4. then background-image: url("../data/files/fond01.jpg"); with the exact path & name of the image uploaded in the library, without forgetting the semicolon to be able to insert the next command.
5. background-repeat: repeat; to repeat the inserted image.
6. background-attachment: fixed; so that the background image remains fixed even if the visitor scrolls the page down or up to read its content.
7. } to close the previously opened insertion space.
8. </style> to indicate that the code ends here.

Space out the letters of all the site's links

To space out (a lot) the letters between each other on clickable words (links):

1. Go to point 3 visible in the first image at the top of this guide.
2. Insert the code (if not already present) <style> to indicate that you want to modify the CSS code,
3. then .container div a { to indicate that you want to modify the page blocks and more specifically the links ("a") and the "{" to open the space allowing you to insert the commands,
4. then letter-spacing:1em; by decreasing the value (0.9em for example) without forgetting the semicolon to be able to insert the next command or to finish.
5. } to close the previously opened insertion space.
6. </style> to indicate that the code ends here.

Check out these other CSS code examples to insert on your site.