Edit the code (source / CSS) on Site Creator

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

Prerequisites

• Access Site Creator:
  1. Click here to access the management of your product on the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Add custom code

Once in Site Creator:

1. Click on Design in the left sidebar.
2. Click on More settings.
3. Click on Custom Code at the bottom:
   
4. Enter HTML, JavaScript (with its scriptor custom CSS (with its tags style) - read 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 of your site's source code:

1. Click on Settings in the left sidebar.
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 allow you to start the advanced customization of the website 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 to the file library) as the background and customize its display:

1. Go to point 3 visible on 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 to insert the commands,
4. then background-image: url("../data/files/fond01.jpg"); with the exact path & name of the image uploaded to the library, don't forget 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 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 site's links

To space out the letters significantly in clickable words (links):

1. Go to point 3 visible on 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 particularly the links ("a") and the "{" to open the space allowing 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 finish.
5. } to close the previously opened insertion space.
6. </style> to indicate that the code ends here.

Take note of these other CSS code examples to insert on your site.