> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Premiers pas avec les thèmes

> Faites vos premiers pas avec les thèmes sur le CMS Hub. 

Un thème est un ensemble portable et contenu de ressources de développement conçues pour fonctionner ensemble afin d'offrir une expérience flexible en matière de modification de contenu. Ces ressources peuvent comprendre des modèles, des modules, des fichiers CSS, des fichiers JavaScript, des images, etc. Les thèmes permettent aux développeurs de créer un ensemble de champs de thème, à l'image des champs de module, ce qui permet aux créateurs de contenu de contrôler les styles globaux du site web sans avoir à modifier les CSS.

Vous pouvez utiliser HubL pour accéder aux valeurs des champs du thème dans la CSS du thème. Les créateurs de contenu peuvent alors utiliser l'éditeur de thème pour modifier les champs du thème, prévisualiser ces modifications par rapport aux modèles existants dans un thème et publier leurs modifications.

<Frame>
  <img src="https://www.hubspot.com/hubfs/cms-themes-animation.gif" alt="Animation de l'interface utilisateur de modification des paramètres de thème montrant la sélection d'une couleur pour les éléments d'un thème." />
</Frame>

Ce document vous guide dans la création de votre premier thème basé sur le [boilerplate du CMS Hub](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate). Pour en savoir plus sur les thèmes, consultez la [documentation de référence relative aux thèmes](/docs/cms/start-building/building-blocks/overview).

<Tip>
  S'il s'agit de votre première expérience de développement avec le CMS Hub, il est recommandé de passer par là :

  [Démarrage rapide du développement CMS Hub](https://developers.hubspot.fr/docs/guides/cms/quickstart)
</Tip>

<Warning>
  ### Remarque:

  avant de commencer, vous devrez installer l'[ILC HubSpot](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
</Warning>

<Steps>
  <Step title="Démarrer un projet de thème avec boilerplate">
    Exécuter `hs create website-theme my-website-theme` pour créer un répertoire `my-website-theme` composé de fichiers provenant du [boilerplate du thème CMS](https://github.com/HubSpot/cms-theme-boilerplate).
  </Step>

  <Step title="Télécharger le boilerplate CMS sur votre compte HubSpot">
    Exécutez `hs upload my-website-theme my-website-theme`. Le modèle sera téléchargé dans le gestionnaire de conception de votre compte, dans un dossier intitulé *my-website-theme*.
  </Step>

  <Step title="Créer une page">
    Pour créer une page à partir du thème téléchargé :

    * Dans votre compte HubSpot, accédez à **Marketing** > **Site web** > **Pages de site web**.
    * Cliquez sur **Créer** dans l'angle supérieur droit, puis sélectionnez **Page de site web**.
    * Dans la boîte de dialogue, sélectionnez le **domaine** sur lequel la page sera publiée, puis saisissez un **nom de page**. Cliquez ensuite sur **Créer une page**.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/create-page-from-dashboard.gif" alt="create-page-from-dashboard" />
    </Frame>

    * Sur l'écran de sélection des modèles, les modèles de votre [thème actif](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme) apparaissent en haut de la page.
      * Si vous n'avez pas sélectionné de thème actif, passez la souris sur le **boilerplate du thème CMS** et cliquez sur **Définir comme thème actif**.
      * Si vous avez déjà défini un thème actif, sélectionnez votre nouveau thème en cliquant sur le menu déroulant du **sélecteur de thème**, puis en sélectionnant **Modifier le thème**. Ensuite, passez le curseur sur **Boilerplate du thème CMS** et cliquez sur **Définir comme thème actif**. Sur l'écran suivant, sélectionnez un **modèle**.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/theme-selector.gif" alt="theme-selector" />
    </Frame>

    Vous serez redirigé vers l'éditeur de page où vous pourrez modifier les champs du thème.
  </Step>

  <Step title="Modifier les champs de thème">
    * Dans la barre latérale gauche de l'éditeur de page, cliquez sur l'onglet **Thèmes**.
      * Dans l'onglet *Thèmes*, cliquez sur **Modifier les paramètres de thème**. C'est ici que vous pouvez modifier les paramètres de votre thème existant. La publication des modifications apportées aux paramètres du thème mettra à jour les styles sur toutes vos pages utilisant le thème mis à jour.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/edit-theme-settings.gif" alt="edit-theme-settings" />
    </Frame>
  </Step>

  <Step title="Préparez-vous à apporter des modifications locales">
    Revenez à votre terminal, puis exécutez `hs watch my-website-theme my-website-theme`. Cette [commande](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) consulte votre répertoire local et télécharge automatiquement les changements suivants vers votre compte HubSpot lors de l'enregistrement des fichiers.
  </Step>

  <Step title="Ajouter un champ de thème">
    Maintenant que nous sommes face à des modifications locales, ajoutez un nouveau champ de thème :

    * Ouvrez le fichier `fields.json` dans votre éditeur. Ce fichier contrôle les champs disponibles dans la barre latérale de l'éditeur de thème. Nous allons ajouter un nouveau [champ](/docs/cms/start-building/building-blocks/overview#fields-json) pour spécifier la hauteur du pied de page.
    * Vers le bas du fichier, localisez le groupe `footer`.
    * Copiez le code ci-dessous et collez le JSON dans le fichier au-dessus du premier élément du tableau enfant pour le groupe footer.

    ```json theme={null}
    // fields.json
          {
          "id" : "",
          "name" : "height",
          "label" : "Footer height",
          "required" : false,
          "locked" : false,
          "display" : "text",
          "step" : 1,
          "type" : "number",
          "min" : 10,
          "max" : 900,
          "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px",
          "default" : 100
          },
    ```

    * Enregistrez `fields.json` et actualisez l'aperçu du thème dans HubSpot. Votre nouveau champ devrait s'afficher dans la barre latérale de gauche.
  </Step>

  <Step title="Référencer le champ dans votre CSS">
    * Dans votre éditeur de code, ouvrez le fichier `theme-overrides.css`. Localisez ensuite le sélecteur CSS de `.footer`. Nous allons maintenant ajouter une `min-height` à ce sélecteur.

      * Pour accéder à une valeur dans un thème, utilisez l'objet `theme`. Par exemple, vous pouvez utiliser `{{ theme.footer.height }}` pour accéder à la valeur de hauteur définie dans votre champ de hauteur.
      * Remplacez la déclaration `.footer` dans theme-overrides.css par la suivante :

      ```css theme={null}
      .footer {
        background-color: {{ footer_bg_color }};
        min-height: {{theme.footer.height}}px;
      }
      ```

      * Enregistrez `theme-overrides.css` pour le télécharger sur votre compte HubSpot.
  </Step>

  <Step title="Tester les modifications">
    Revenez à l'éditeur de thème et actualisez la page pour voir votre nouveau champ apparaître sous le pied de page. Mettez à jour la valeur de la hauteur pour qu'elle soit immédiatement reflétée dans l'aperçu. Il peut être judicieux de définir une couleur d'arrière-plan pour le pied de page afin que vous puissiez voir la modification plus facilement.
  </Step>
</Steps>

## Étapes suivantes

Maintenant que vous avez créé et mis à jour votre thème, vous pouvez créer d'autres champs de thème et les personnaliser pour vos projets. Pour plus d'options de personnalisation, consultez la [présentation des thèmes](/docs/cms/start-building/building-blocks/overview). Pendant la création de votre thème, il peut être utile de consulter les bonnes pratiques en matière d'[optimisation des sites web sur le CMS Hub](/docs/cms/best-practices/testing-staging-performance/speed).

HubSpot compte plusieurs [thèmes par défaut](/docs/cms/start-building/building-blocks/themes/default-themes) qui sont proposés avec CMS Hub. Ces thèmes peuvent être consultés, clonés et mis à jour afin de savoir comment utiliser un thème dans une situation concrète.

Une fois que vous maîtrisez les thèmes, [découvrez comment créer votre premier module personnalisé](/docs/cms/start-building/building-blocks/modules/overview).