Base de connaissances
1 000 FAQ, 500 tutoriels et vidéos explicatives. Ici, il n'y a que des solutions !
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.
Ajouter du code personnalisé
Pour accéder à Site Creator :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir HĂ©bergement (univers Web & Domaine)
- cliquer sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Site Creator dans le menu latéral gauche
- cliquer sur Personnaliser mon site
Une fois dans Site Creator:
- cliquer sur Design dans le menu latéral gauche
- cliquer sur Plus de paramètres
- cliquer sur Code personnalisé en bas
- saisir du code HTML, JavaScript (avec ses balises script) ou CSS personnalisé (avec ses balises style) - lire plus bas pour quelques exemples
- enregistrer 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:
- cliquer sur Réglages dans le menu latéral gauche
- cliquer sur SEO & Métadonnées dans la partie Configuration du site Web
- descendre jusqu'à Code personnalisé
- choisir d'ajouter sous les onglets HEAD ou sous BODY
- enregistrer 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.
⚠️ Pour de l'aide supplémentaire contacter un partenaire ou remplir un appel d'offres — lire aussi le rôle de l'hébergeur
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:
- se rendre au point 3 visible sur la première image en haut de ce guide
- insérer le code
<style>
pour indiquer que vous souhaitez modifier le code CSS - 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 - 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 background-repeat: repeat;
pour répéter l'image inséréebackground-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}
pour fermer l'espace d'insertion ouvert auparavant</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):
- se rendre au point 3 visible sur la première image en haut de ce guide
- insérer le code (si pas encore présent)
<style>
pour indiquer que vous souhaitez modifier le code CSS - 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 - 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 }
pour fermer l'espace d'insertion ouvert auparavant</style>
pour indiquer que le code se termine ici
Voir d'autres exemples de code CSS à insérer sur votre site.
Ce guide suggère des solutions pour résoudre les problèmes courants et erreurs fréquentes qui peuvent survenir lorsque vous tentez d'afficher votre site Internet en https après avoir activé un certificat SSL.
⚠️ Pour de l'aide supplémentaire contacter un partenaire ou remplir un appel d'offres — lire aussi le rôle de l'hébergeur
Le navigateur Web affiche automatiquement la version http du site lorsque vous tentez d'y accéder en https
Il est recommandé d'effectuer les actions suivantes:
- vider le cache de vos applications ou de votre site
- vérifier que les pages et les scripts du site ne contiennent pas de redirections sur la version http du site
- vérifier que le fichier .htaccess du site ne contienne pas de redirections sur la version http du site
- définir l’adresse https du site comme celle par défaut:
Le site Web s'affiche mal (images manquantes, feuilles de style non prises en charge, etc.) ou affiche un avertissement dans la barre d'adresse
Il est recommandé d'effectuer les actions suivantes:
- vider le cache de vos applications ou de votre site
- vérifier que les pages et les scripts ne pointent pas sur des ressources externes en http ; le site whynopadlock.com peut vous aider à identifier les éléments non sécurisés de votre site
"Cette page Web présente une boucle de redirection", "ERR_TOO_MANY_REDIRECTS"
Si votre navigateur Internet affiche cette erreur, il est recommandé d'effectuer les actions suivantes :
- si le site fonctionne avec une application Web comme WordPress ou Joomla, désactiver les extensions une par une pour identifier celle qui pose problème
- vérifier que les pages et les scripts du site ne contiennent pas de redirections sur la version http du site
- essayer de désactiver HSTS
- si Prestashop est utilisé, il faut activer le SSL sur toutes les pages (en savoir plus)
Un ancien certificat SSL s'affiche - vider le cache SSL
Les navigateurs Web mettent en cache les certificats SSL pour accélérer la navigation. Normalement, ce n'est pas un problème. Cependant, lorsque vous développez des pages pour votre site web ou que vous installez un nouveau certificat, l'état SSL du navigateur peut vous gêner. Par exemple, vous pourriez ne pas voir l'icône du cadenas dans la barre d'adresse du navigateur après avoir installé un nouveau certificat SSL.
La première chose à faire dans ce cas c'est de s'assurer que le domaine pointe bien sur l'adresse IP du serveur (enregistrements A et AAAA) et si c'est toujours le mauvais certificat SSL qui est retourné, vider le cache SSL:
- Chrome: se rendre dans les Paramètres et cliquer sur Paramètres. Cliquer sur Afficher les paramètres avancés. Sous Réseau, cliquer sur Modifier les paramètres du proxy. La boîte de dialogue Propriétés Internet s'affiche. Cliquer sur l'onglet Contenu. Cliquer sur Effacer l'état SSL, puis cliquer sur OK. D'autres pistes ici (cliquer ici).
- Firefox: se rendre dans Historique. Cliquer sur Effacer l'historique récent puis sélectionnez Connexions actives et cliquer sur Effacer maintenant
Perte de mise en forme CSS
Si le site Web s'affiche sans style CSS, analyser le chargement des pages avec la Console du navigateur. Des erreurs de contenu mixte (mixed content) en rapport avec vos styles .css, s'y trouvent peut-être, qu'il faudra résoudre pour qu'ils soient à nouveau chargés correctement.