Si vous possédez des connaissances en codage et que vous souhaitez personnaliser votre site au-delà des ajustements disponibles dans le panneau Styles du site, vous pouvez ajouter du code CSS via l’Éditeur CSS.
Le CSS ne devrait être utilisé que pour modifier les polices de caractères, couleurs et arrière-plans. Toute autre modification CSS risquerait de nuire à votre site.
Remarque : le CSS personnalisé n’est pas transféré lorsque vous changez de template. Si vous retournez au template précédent, le CSS ajouté y sera toujours présent.
Regarder une vidéo
Avant de commencer
- Référez-vous à nos recommandations sur les éléments à modifier ou non avec le CSS dans FAQ sur le code personnalisé.
Remarque : le code personnalisé (y compris le CSS) n’est pas pris en charge par notre service d’assistance. Nous ne sommes en mesure de vous aider ni pour sa configuration ni pour son dépannage. En outre, si vous utilisez une solution basée sur un code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design adaptatif (et plus particulièrement son affichage sur les appareils mobiles) ainsi que son fonctionnement sur l’ensemble des templates. Les personnalisations CSS peuvent également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :
- Découvrez les recommandations pour l'utilisation de code personnalisé.
- Lisez notre guide général sur les personnalisations basées sur du code.
- Rendez-vous sur le forum Squarespace, notre espace d’échange entre clients et développeurs.
- Trouvez un expert Squarespace qui vous aidera à créer du code personnalisé pour votre site.
Ajouter un code CSS
Pour ajouter un code CSS :
- Dans le Menu principal, cliquez sur Design, puis sur CSS personnalisé.
- Pour ouvrir l’éditeur dans une fenêtre extensible, cliquez sur Ouvrir dans une fenêtre. La fenêtre se fermera si vous quittez le panneau CSS personnalisé.
- Ajoutez votre code.
- Lorsque vous avez terminé, cliquez sur Enregistrer pour publier vos modifications.
Des numéros de ligne s’affichent à gauche pour vous aider à repérer les différents morceaux de code. Les erreurs de syntaxe s’affichent en bas, en rouge.
Remarque : le système de vérification de la syntaxe de l’éditeur CSS Squarespace est un analyseur. Contrairement aux systèmes qui procèdent à une validation selon un ensemble de règles, l’analyseur teste ce qui va réellement fonctionner dans différents navigateurs. Même si votre code ne présente aucune erreur dans le validateur CSS, l’analyseur signalera toute ligne susceptible de ne pas fonctionner comme prévu. Si une erreur de syntaxe est relevée, vérifiez si le CSS est saisi et formaté correctement et s’il ne manque rien.
Charger des fichiers (facultatif)
Utilisez la zone de chargement pour charger des ressources comme les images personnalisées ou les fichiers de police :
- Cliquez sur Gérer les fichiers personnalisés sous l’éditeur CSS.
- Cliquez sur Ajouter des images ou des polices ou faites glisser des fichiers dans cette zone pour charger votre fichier.
Astuce : si la zone de chargement des fichiers ne s’ouvre pas, autorisez les fenêtres pop-up dans votre navigateur.
Types de fichiers acceptés
Les formats d'images et de polices de caractères admis dans la section Fichiers Personnalisés sont les suivants :
- .jpg
- .png
- .gif
- .ttf
- .otf
- .woff
Les fichiers au format .svg ne sont pas admis.
Utiliser les fichiers personnalisés
Pour utiliser les fichiers :
- Entrez votre code à l’endroit où vous souhaitez indiquer l’URL du fichier.
- Placez le curseur à l’endroit où vous souhaitez intégrer l’URL dans le code.
- Cliquez sur le fichier.
L’éditeur CSS collera automatiquement l’URL directe de ce fichier pour que vous puissiez l’indiquer dans votre code.
Fichiers personnalisés et protocole SSL
En fonction du statut d'activation du protocole SSL, l'URL du fichier sera considérée comme sécurisée ou non. Si vous modifiez les paramètres SSL d'un site, nous vous recommandons de mettre à jour l'URL du fichier de manière à ce qu'elle y corresponde. Par exemple, si vous décidez d'activer le protocole SSL :
- Ouvrez l'Éditeur CSS.
- Cliquez sur Gérer les fichiers personnalisés.
- Cliquez sur le fichier.
- Faites débuter l'URL par https.
- Cliquez sur Enregistrer.
