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.
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é.
Note: Custom code, including CSS, falls outside the scope of our support. This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:
- Découvrez les recommandations pour l'utilisation de code personnalisé.
- Lisez notre guide général sur les améliorations par services tiers.
- Rendez-vous sur Squarespace Answers, notre forum d'échange entre clients et développeurs.
- Consultez un expert Squarespace.
Ajouter un code CSS
Pour ajouter un code CSS :
- Dans le Menu Principal, cliquez sur Design, puis sur Custom CSS (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 Save (Enregistrer) pour publier vos modifications.
Line numbers display on the left to help you reference pieces of code. Syntax errors display at the bottom in red.
Note: Squarespace’s CSS Editor syntax checking system is a parser. Rather than validating against a set of rules, the parser tests what's actually going to work in different browsers. Even if your code doesn’t return an error on a CSS validator, the parser will flag it if it thinks that a line may not work the way it's intended. If you see a syntax error, revise the CSS to ensure it’s written and formatted correctly and nothing’s missing.
Télécharger des fichiers (facultatif)
Use the file upload area to upload assets for custom images or font files:
- Click Manage Custom Files under the CSS Editor.
- Click Add images or fonts or drag files into that area to upload your file.
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.
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 Manage Custom Files (Gérer les Fichiers Personnalisés).
- Cliquez sur le fichier.
- Faites débuter l'URL par https.
- Cliquez sur Save (Enregistrer).
Utiliser des fichiers téléchargés (facultatif)
Si vous avez téléchargé des fichiers image ou de police dans la zone Custom Files (Fichiers Personnalisés), vous souhaitez probablement les intégrer à votre code.
Le moyen le plus rapide pour y parvenir est de saisir votre code jusqu'au moment d'indiquer l'URL du fichier. Une fois à cette étape, laissez le curseur à l'endroit du code où vous voulez entrer l'URL puis cliquez sur le fichier. L'Éditeur CSS collera automatiquement l'URL directe de ce fichier pour que vous puissiez l'indiquer dans votre code.
Remarque : le CSS personnalisé n'est pas transféré lorsque vous changez de modèle.Si vous retournez au modèle précédent, le CSS ajouté y sera toujours présent.