Modifier le code (source / CSS) sur Site Creator

Ce guide explique comment personnaliser le code source, modifier le CSS, modifier la partie HEAD ou BODY d'un site Web réalisé avec Site Creator Infomaniak.

Prérequis

• Accédez à Site Creator:
  1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  2. Cliquez directement sur le nom attribué au produit concerné.
  3. Cliquez sur Personnaliser mon site:
     

Ajouter du code personnalisé

Une fois dans Site Creator:

1. Cliquez sur Design dans le menu latéral gauche.
2. Cliquez sur Plus de paramètres.
3. Cliquez sur Code personnalisé en bas:
   
4. Saisissez du code HTML, JavaScript (avec ses balises script) ou CSS personnalisé (avec ses balises style) - lire plus bas pour quelques exemples.
5. Enregistrez les modifications en bas de page.

Métadonnées dans HEAD & BODY

Pour ajouter du code JavaScript ou n'importe quel autre code dans la partie HEAD ou BODY du code source de votre site:

1. Cliquez sur Réglages dans le menu latéral gauche.
2. Cliquez sur SEO & Métadonnées dans la partie Configuration du site Web.
3. Descendez jusqu'à Code personnalisé.
4. Choisissez d'ajouter sous les onglets HEAD ou sous BODY.
5. Enregistrez les modifications en bas de page:
   

Exemples de personnalisation CSS

Ces exemples permettent de démarrer la personnalisation avancée des pages du site Web. Un risque existe toutefois en fonction des modifications apportées de ne plus pouvoir accéder à l'éditeur lui-même ce ce qui vous obligera à le recommencer de zéro.

Personnaliser le fond d'écran du site Web

Pour mettre l'image de votre choix (à charger dans la bibliothèque de fichiers) en fond de page et personnaliser son affichage:

1. Rendez-vous au point 3 visible sur la première image en haut de ce guide.
2. Insérez le code <style> pour indiquer que vous souhaitez modifier le code CSS,
3. puis body { pour indiquer que vous voulez modifier le corps de la page et le "{" pour ouvrir l'espace permettant d'insérer les commandes,
4. puis background-image: url("../data/files/fond01.jpg"); avec le chemin & nom précis de l'image chargée dans la bibliothèque sans oublier le point virgule pour pouvoir insérer la commande suivante.
5. background-repeat: repeat; pour répéter l'image insérée.
6. background-attachment: fixed; pour que l'image de fond reste fixe même si le visiteur fait défiler la page vers le bas ou le haut pour lire son contenu.
7. } pour fermer l'espace d'insertion ouvert auparavant.
8. </style> pour indiquer que le code se termine ici.

Espacer les lettres de tous les liens du site

Pour écarter (beaucoup) les lettres entre elles sur les mots cliquables (liens):

1. Rendez-vous au point 3 visible sur la première image en haut de ce guide.
2. Insérez le code (si pas encore présent) <style> pour indiquer que vous souhaitez modifier le code CSS,
3. puis .container div a { pour indiquer que vous voulez modifier les blocs de la page et plus particulièrement les liens ("a") et le "{" pour ouvrir l'espace permettant d'insérer les commandes,
4. puis letter-spacing:1em; en diminuant la valeur (0.9em p.ex) sans oublier le point virgule pour pouvoir insérer la commande suivante ou terminer.
5. } pour fermer l'espace d'insertion ouvert auparavant.
6. </style> pour indiquer que le code se termine ici.

Prenez connaissance de ces autres exemples de code CSS à insérer sur votre site.