Utiliser l'Éditeur CSS

Ajoutez du code CSS personnalisé pour personnaliser les polices, les couleurs et les arrière-plans au-delà des options intégrées de Squarespace.

Si vous possédez des connaissances en codage et que vous souhaitez personnaliser votre site au-delà des ajustements disponibles dans le panneau Design, 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

Restrictions

• Référez-vous à nos recommandations sur les éléments à modifier ou non avec le CSS dans FAQ sur le code personnalisé.
• Dans la version 7.0, 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.
• Le système de vérification de la syntaxe de l’éditeur CSS Squarespace est un analyseur qui 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.

Remarque : le code personnalisé (y compris le CSS) n’est pas pris en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour sa configuration ni pour son dépannage. En outre, si vous utilisez une solution basée sur du 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 bonnes pratiques pour ajouter un code personnalisé.
• Lisez notre guide général sur les personnalisations basées sur du code.
• Rendez-vous sur Squarespace Forum, notre forum d’échange entre clients et développeurs.
• Trouvez un expert Squarespace qui vous aidera à créer du code personnalisé pour votre site.
• Découvrez nos forfaits Premium et Enterprise et développez une solution davantage personnalisée pour votre activité.

Ajouter un code CSS

Pour ajouter du code CSS :

1. Ouvrez le panneau Design et cliquez sur CSS personnalisé.
2. 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é.
3. Ajoutez votre code.
4. 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.

Charger des fichiers (facultatif)

Utilisez la zone de chargement pour charger des ressources comme les images personnalisées ou les fichiers de police :

1. Cliquez sur Gérer les fichiers personnalisés sous l’éditeur CSS.
2. 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 :

1. Entrez votre code à l’endroit où vous souhaitez indiquer l’URL du fichier.
2. Placez le curseur à l’endroit où vous souhaitez intégrer l’URL dans le code.
3. 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 :

1. Ouvrez l'Éditeur CSS.
2. Cliquez sur Gérer les fichiers personnalisés.
3. Cliquez sur le fichier.
4. Faites débuter l'URL par https.
5. Cliquez sur Enregistrer.