Créer, modifier et ajouter des fichiers CSS

Les feuilles de style en cascade ( CSS ) contrôlent la présentation visuelle des pages de votre site en sélectionnant et en stylisant des éléments de page. Utilisez le gestionnaire de conception pour créer de nouveaux fichiers CSS, modifier des fichiers existants et les joindre à des modèles, à des pages spécifiques ou à des domaines entiers.

Pour les modifications simples apportées au design d’une page spécifique, découvrez-en davantage sur la modification du contenu d’une page dans l’éditeur de contenu. Si vous utilisez un modèle de thème, découvrez-en davantage sur la modification de vos paramètres de thème.

Créer un nouveau fichier CSS

1. Dans votre compte HubSpot, cliquez sur Plus, puis accédez à Contenu > Gestionnaire de conception. Si l'option Plus n'apparaît pas dans votre compte, accédez directement à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche , cliquez sur > Nouveau fichier fichier dans l’angle supérieur gauche.
3. Dans la boîte de dialogue, cliquez sur le menu déroulant et sélectionnez CSS + HubL. 
4. Cliquez sur Suivant.
5. Saisissez un nom pour votre fichier dans le champ Nom du fichier .
6. Pour modifier l’emplacement du fichier, cliquez sur Modifier. Dans la fenêtre contextuelle, sélectionnez un nouvel emplacement de fichier. 
7. Lorsque vous avez terminé, cliquez sur Créer.

Modifier un fichier CSS

Après avoir créé ou ouvert un fichier CSS existant, vous pouvez le modifier dans l’éditeur de code. Outre le CSS standard, l’éditeur de code prend en charge les variables et macros HubL afin de faciliter la mise à jour de votre CSS.

Pour voir la liste des sélecteurs CSS standards pour les modèles HubSpot, consultez la page Boilerplate CSS .

1. { local.navDesignManager }}
2. Dans l’outil de recherche , cliquez sur > Nouveau fichier fichier ou ouvrez un fichier CSS existant.
3. Dans l’éditeur de code, saisissez ou mettez à jour la CSS pour effectuer vos modifications. 

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.

Vérifier les erreurs

Avant de publier, vérifiez que le code ne contient pas d'erreurs HubL. Les erreurs apparaissent dans la console en bas, dans la gouttière à gauche et dans la barre de défilement à droite de l’éditeur de code.

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.

Publier un fichier CSS

Après modification du fichier CSS, cliquez sur Publier les modifications dans l’angle supérieur droit. Pour appeler cette feuille de style dans un autre modèle codé, cliquez sur le menu déroulant Actions dans l’outil de recherche et sélectionnez Copier l’URL publique. 

Joindre des feuilles de style à des ressources

Joignez des feuilles de style à vos modèles, à des pages individuelles ou à un domaine entier. Les feuilles de style sont appliquées dans un ordre spécifique en fonction de l’endroit où elles sont jointes. La liste ci-dessous reflète l’ordre dans lequel elles sont appliquées sur votre site :

1. public_common.css (obligatoire) : feuille de style principalement utilisée par l’application HubSpot, mais aussi pour certaines fonctionnalités de site.
2. En-tête HTML : balises de lien ajoutées à l’en-tête global <head> de votre site dans les paramètres de la page de contenu >.
3. Layout.css (obligatoire pour les mises en page par glisser-déposer) : fichier CSS adaptatif joint par défaut à toutes les mises en page de modèle par glisser-déposer.
4. Feuilles de style jointes (pages) : feuilles de style jointes à l’ensemble de votre site dans les paramètres de la page de contenu >.
5. Feuilles de style jointes (Blog) : feuilles de style jointes à votre blog (remplacent les feuilles globales du site) dans les paramètres du blog de contenu >.
6. Feuilles de style liées (recommandé pour les mises en page de modèle) : feuilles de style jointes dans la mise en page du modèle.
7. <head> Balisage supplémentaire dans le modèle : balises de lien ajoutées à l’en-tête d’un <head> modèle particulier.
8. Feuilles de style spécifiques à la page : feuilles de style jointes aux paramètres d’une page.
9. HTML de l’en-tête de page : balises de lien ajoutées à l’en-tête <head> d’une page particulière dans les paramètres de page.

Joindre des feuilles de style aux modèles

Les feuilles de style peuvent être jointes aux modèles de glisser-déposer dans l’inspecteur du gestionnaire de conception. Pour les modèles codés, les feuilles de style sont ajoutées directement dans l’éditeur de code.

Modèles de glisser-déposer

1. Dans votre compte HubSpot, cliquez sur Plus, puis accédez à Contenu > Gestionnaire de conception. Si l'option Plus n'apparaît pas dans votre compte, accédez directement à Contenu > Gestionnaire de conception.
2. Dans l’outil de recherche, cliquez sur le nom de votre fichier de modèle glisser-déposer.
3. Dans l’inspecteur, cliquez sur le menu déroulant Ajouter dans la section Feuilles de style liées et sélectionnez votre feuille de style. Pour supprimer une feuille de style, cliquez sur X.
4. Lorsque vous avez terminé, cliquez sur Publier les modifications dans l’angle supérieur droit pour appliquer vos modifications aux pages en direct en utilisant le modèle.

Modèles codés

Pour les modèles codés, les feuilles de style sont jointes directement dans l’éditeur de code à l’aide <link> de balises ou de la balise HubL dans le <head> fichier. Découvrez-en davantage sur les modèles codés dans la documentation des développeurs.

Joindre des feuilles de style à une page spécifique

Remarque : cette option n'est pas disponible pour les modèles de thème. Découvrez comment modifier vos paramètres de thème.

Pour joindre une feuille de style spécifique à une page à partir de la section Paramètres de l’éditeur de contenu :

1. Accédez à votre contenu :

   • Pages de site web : Dans votre compte HubSpot, cliquez sur Plus, puis accédez à Contenu > Pages de site web. Si l'option Plus n'apparaît pas dans votre compte, accédez directement à Contenu > Pages de site web.
   • Pages de destination : Dans votre compte HubSpot, cliquez sur Plus, puis accédez à Contenu > Pages de destination. Si l'option Plus n'apparaît pas dans votre compte, accédez directement à Contenu > Pages de destination.
2. Cliquez sur le nom de votre page.
3. Dans l'éditeur de contenu, cliquez sur le menu Paramètres et sélectionnez Avancé. 
4. Dans la boîte de dialogue, dans la section Feuilles de style , cliquez sur le menu déroulant Joindre une feuille de style et sélectionnez une feuille de style. Pour supprimer une feuille de style, cliquez sur X à côté de la feuille de style.
5. Pour désactiver les feuilles de style héritées du modèle ou du domaine, cliquez sur le menu déroulant à côté de la feuille de style et sélectionnez Désactivé.

Joindre les feuilles de style de domaine

Remarque : Les modèles de thème doivent inclure l’annotation enableDomainStylesheets: true pour utiliser des feuilles de style au niveau du domaine. Découvrez-en davantage sur les modèles de note.

Pour joindre une feuille de style à un domaine entier :

1. Dans votre compte HubSpot, cliquez sur l'icône Paramètres dans la barre de navigation principale.
2. Dans le menu latéral, cliquez sur Pages de contenu >.
3. Cliquez sur le menu déroulant pour sélectionner le domaine dont vous souhaitez mettre à jour les paramètres.
4. Dans l’onglet Modèles , dans la section Feuilles de style CSS & , cliquez sur + Ajouter une feuille de style. Pour supprimer une feuille de style, cliquez sur le X à côté de la feuille de style jointe.
5. Cliquez sur Enregistrer.

Veuillez noter : lorsque vous passez aux outils Starter ou gratuits de HubSpot, les feuilles de style attachées au niveau du domaine resteront actives jusqu'à ce que vous les supprimiez. Une fois que toutes les feuilles de style sont supprimées, vous ne pouvez plus attacher de feuilles de style au niveau du domaine. En savoir plus sur la rétrogradation d’un abonnement.