Les CSS (Cascading Style Sheets, en anglais) sont des fichiers codés qui sélectionnent des éléments d'une page pour en contrôler la présentation. Le code HTML du modèle personnalisé est en quelque sorte le squelette du site web, tandis que le code CSS en est la peau.
Cet article explique comment créer, publier et joindre un fichier CSS dans HubSpot. Pour apporter des modifications simples au design d'une page particulière, cliquez ici.
Après avoir créé ou ouvert un fichier CSS existant, vous pouvez le modifier dans l'éditeur de code. Outre le code CSS standard, l'éditeur de code prend en charge les variables et les macros de HubL afin de faciliter la mise à jour du fichier CSS. Pour afficher la façon dont votre HubL apparaîtra, cliquez sur le bouton Afficher le résultat en haut de l'éditeur. Un panneau s'ouvrira à droite avec l'aperçu du rendu.
Pour voir la liste des sélecteurs CSS standard pour les modèles HubSpot, consultez la page Boilerplate CSS.
Avant de publier, vérifiez que le code ne contient pas d'erreurs HubL. Dans un fichier codé ou un module personnalisé, les erreurs ou avertissements HubL sont indiqués à trois endroits :
Les erreurs empêchant la publication sont affichées en rouge, tandis que les avertissements généraux sont indiqués en jaune. En bas de l'éditeur de code, cliquez sur Afficher les détails pour afficher davantage d'informations concernant les erreurs dans la console d'erreur et sur Masquer les détails pour réduire la console d'erreur.
La console d'erreur contient des liens vers les différents avertissements ou erreurs HubL dans le code ou le module personnalisé. Sur la gauche de l'éditeur de code, passez le curseur de la souris sur les indicateurs d'erreur rouges pour afficher l'erreur ou l'avertissement dans le code. Lorsque vous cliquez sur l'erreur, le curseur fait défiler l'ensemble des erreurs et avertissements de cette la ligne. Lorsque vous cliquez sur une note de la barre de défilement, vous accédez directement à cette partie du fichier.
Vous pouvez également cliquer sur un numéro de ligne dans l'éditeur de code pour que l'URL du fichier soit mise à jour en conséquence. Cela vous permet de partager un lien vers votre code, avec accès direct à la partie du fichier sur laquelle vous travaillez.
Après modification du fichier, cliquez sur Publier les modifications dans l'angle supérieur droit. Pour utiliser cette feuille de style dans un autre modèle codé, copiez l'URL de la feuille en cliquant sur Actions > Copier l'URL publique dans le menu latéral de gauche.
Dans HubSpot, il existe différentes façons de joindre des feuilles de style à votre contenu. Les feuilles de style jointes sont liées sur votre site dans l'ordre suivant :
* Obligatoire
** Obligatoire pour les mises en page de type glisser-déposer
***Méthode de liaison de feuille de style recommandée pour les mises en page du modèle
Pour joindre des feuilles de style à un modèle, ouvrir le modèle dans le gestionnaire de conception. Dans le menu latéral de droite, sous Options de l'en-tête et du corps, sélectionnez un fichier dans le menu déroulant Ajouter à côté des Feuilles de style liées.
Vous pouvez modifier ou supprimer une feuille de style qui est déjà liée en la survolant avec la souris et en cliquant sur Modifier pour lui apporter des modifications ou sur X pour la supprimer.
Après avoir ajouté une feuille de style, cliquez sur Publier les modifications dans l'angle supérieur droit de l'écran pour appliquer les modifications aux pages en direct en utilisant le modèle.
Pour ajouter ou supprimer une feuille de style spécifique à une page dans la section Paramètres de l'éditeur de la page :
Vous pouvez également désactiver les feuilles de style héritées par la page du modèle ou du domaine. Ces feuilles de style ne sont alors pas appliquées à la page :
Pour ajouter ou supprimer une feuille de style de tous les contenus d'un domaine :