Edit code (source / CSS) on Site Creator

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

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

Add Custom Code

Once in Site Creator:

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

Metadata in HEAD & BODY

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

1. Click on Adjustments in the left side menu.
2. Click on SEO & Metadata in the part Website Configuration.
3. Get 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:
   

Examples of CSS customization

These examples allow you to start the advanced customization of the website pages. However, there is a risk depending on the changes made that you will no longer be able to access the editor himself, which will force you to start over from scratch.

Customize the website wallpaper

To put the image of your choice (to load in the file library) at the bottom of the page and customize its display:

1. See point 3 on the first image at the top of this guide.
2. Insert code <style> to indicate that you want to change the CSS code,
3. then body { to indicate that you want to change the body of the page and the "{" to open the space for inserting the controls,
4. then background-image: url("../data/files/fond01.jpg"); with the precise path & name of the image loaded in the library without forgetting the comma point to be able to insert the following 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 insertion space previously opened.
8. </style> to indicate that the code ends here.

Space letters from all links on the site

To remove (many) the letters between them on the clickable words (links):

1. See point 3 on the first image at the top of this guide.
2. Insert the code (if not yet present) <style> to indicate that you want to change 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 the controls,
4. then letter-spacing:1em;by reducing the value (0.9em e.g.) without forgetting the comma point to be able to insert the next command or finish.
5. } to close the insertion space previously opened.
6. </style> to indicate that the code ends here.

Be aware of these other examples of CSS code to be inserted on your site.