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

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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

Add Custom Code

Once in Site Creator:

1. Click on Design in the left-hand menu.
2. Click on More settings.
3. Click on Custom code at the bottom:
   
4. Enter custom HTML, JavaScript (with its script tags), or CSS (with its style tags) - see 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 site's source code:

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

Examples of CSS Customization

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

Customize the website background

To set your desired image (which you must upload to the file library) as the page background and customize its display:

1. Go to step 3, as shown in the first image at the top of this guide.
2. Insert the <style> code to indicate that you want to modify the CSS code,
3. then body { to indicate that you want to modify the page body, and the "{" to open the space where you can insert the commands,
4. then background-image: url("../data/files/fond01.jpg"); with the exact path and name of the image uploaded to the library, and don't forget the semicolon so you can 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 up or down 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 links on the site

To spread out (a lot) the letters between each other in the 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 where you can 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 finish.
5. } to close the previously opened insertion space.
6. </style> to indicate that the code ends here.

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