Edit the code (source / CSS) on Site Creator

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

Adding Custom Code

To access Site Creator:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge
2. Click on the icon at the top right of the interface (or navigate through the left sidebar menu)
3. Choose Hosting (Web & Domain universe)
4. Click on the name of the relevant item in the displayed table
5. Click on Site Creator in the left sidebar menu
6. Click on Customize my site

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 script tags), or custom CSS (with its style tags) - read below for some examples
5. Save the changes at the bottom of the page

Metadata in HEAD & BODY

To add JavaScript code or any other code to the HEAD or BODY section of your website'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 HEAD or under BODY tabs
5. Save the changes at the bottom of the page
   

Examples of CSS Customization

These examples allow you to start advanced customization of website pages. However, there is a risk depending on the modifications made of not being able to access the editor itself, which will force you to start over from scratch.

Customize the Website Background

To set the image of your choice (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 page body and "{" to open the space for inserting commands
4. Then background-image: url("../data/files/fond01.jpg"); with the precise path & name of the image loaded in the library, without forgetting the semicolon to insert the next command
5. background-repeat: repeat; to repeat the inserted image
6. background-attachment: fixed; to make the background image fixed even if the visitor scrolls the page up or down to read its content
7. } to close the space opened previously for insertion
8. </style> to indicate that the code ends here

Space Out the Letters of All Site Links

To spread (a lot) the letters apart 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 blocks of the page and more specifically the links ("a") and "{" to open the space for inserting commands
4. Then letter-spacing:1em; by decreasing the value (e.g., 0.9em) without forgetting the semicolon to insert the next command or terminate
5. } to close the space opened previously for insertion
6. </style> to indicate that the code ends here

See other examples of CSS code to insert on your site.