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

# Introdução aos temas

> Introdução aos temas no HubSpot CMS. 

Um tema é um pacote independente e portátil de ativos de desenvolvedor, projetado para trabalhar em conjunto, a fim de permitir uma experiência flexível de edição de conteúdo. Esses ativos podem incluir modelos, módulos, arquivos CSS, arquivos JavaScript, imagens e muito mais. Os temas permitem que os desenvolvedores criem um conjunto de campos de tema, semelhantes a campos de módulo, nos quais os criadores de conteúdo podem controlar estilos globais de site sem precisar editar o CSS.

Você pode usar o HubL para acessar os valores dos campos de tema em todo o CSS do tema. Os criadores de conteúdo podem usar o editor de temas para modificar os campos de tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.

<Frame>
  <img src="https://www.hubspot.com/hubfs/cms-themes-animation.gif" alt="As configurações do tema editam a animação da interface do usuário, mostrando a seleção de uma cor para elementos de um tema." />
</Frame>

Este documento explica como criar seu primeiro tema de acordo com o[ HubSpot CMS Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate). Para obter mais informações sobre temas, consulte a[ documentação de referência para temas.](/cms/start-building/building-blocks/overview)

<Tip>
  Se esta é a sua primeira experiência com o desenvolvimento do CMS Hub, recomendamos o seguinte:

  [Início rápido no desenvolvimento do CMS Hub](https://br.developers.hubspot.com/docs/guides/cms/quickstart)
</Tip>

<Warning>
  ### Observação:

  Antes de começar, você precisará instalar a [CLI da HubSpot](/developer-tooling/local-development/hubspot-cli/install-the-cli).
</Warning>

<Steps>
  <Step title="Iniciar um projeto de temas do boilerplate">
    Execute `hs create website-theme my-website-theme` para criar um diretório `my-website-theme` preenchido com arquivos do [Boilerplate do tema do CMS](https://github.com/HubSpot/cms-theme-boilerplate).
  </Step>

  <Step title="Carregar o CMS Boilerplate na sua conta da HubSpot">
    Execute `hs upload my-website-theme my-website-theme`. Isso fará o upload do boilerplate para o gerenciador de design da sua conta, em uma pasta intitulada *my-website-theme*.
  </Step>

  <Step title="Criar uma página">
    Para criar uma página do tema carregado:

    * Na sua conta da HubSpot, acesse **Marketing** > **Site** > \*\*Páginas do site. \*\*
    * No canto superior direito, clique em **Criar**, em seguida, selecione **Página do site**.
    * Na caixa de diálogo, selecione o **domínio** no qual a página será publicada e insira um **nome de página**. Em seguida, clique em **Criar página**.

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

    * Na tela de seleção de modelos, os modelos do seu[ tema ativo](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme) serão exibidos na parte superior da página.
      * Se você não selecionou um tema ativo, passe o cursor do mouse sobre o **Boilerplate de temas do CMS** e clique em\*\* Definir como tema ativo\*\*.
      * Se já tiver definido um tema ativo, selecione o novo tema, clicando no menu suspenso do **Seletor de temas** e selecionando **Alterar tema**. Em seguida, passe o cursor do mouse sobre o **Boilerplate de temas do CMS** e clique em **Definir como tema ativo**. Na próxima tela, selecione um **modelo**.

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

    Você será encaminhado ao editor de páginas, onde poderá editar os campos de tema.
  </Step>

  <Step title="Editar campos de tema">
    * Na barra lateral esquerda do editor de páginas, clique na guia **Temas**.
      * Na guia *Temas*, clique em **Editar configurações do tema**. Aqui, você pode modificar as configurações de tema existentes. Publicar as alterações nas configurações do tema atualizará os estilos em suas páginas usando esse tema que foi atualizado.

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

  <Step title="Preparar para fazer alterações locais">
    Retorne ao terminal e execute `hs watch my-website-theme my-website-theme`. Esse [comando](/developer-tooling/local-development/hubspot-cli/install-the-cli) monitora o diretório local e carrega automaticamente as seguintes alterações nos arquivos salvos na sua conta da HubSpot.
  </Step>

  <Step title="Adicionar um campo do tema">
    Agora que estamos ouvindo as alterações locais, adicione um novo campo de tema:

    * Abra o arquivo `fields.json` no editor.  Este arquivo controla os campos disponíveis na barra lateral do editor de temas. Vamos adicionar um novo [campo](/cms/start-building/building-blocks/overview#fields-json) para especificar a altura do rodapé.
    * Perto da parte inferior do arquivo, localize o grupo `footer`.
    * Copie o código abaixo e cole o JSON no arquivo acima do primeiro item na matriz secundária do grupo de rodapé.

    ```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
          },
    ```

    * Salve `fields.json` e atualize o visualizador de tema no HubSpot. O novo campo deve ser exibido na barra lateral esquerda.
  </Step>

  <Step title="Referenciar o campo no CSS">
    * No editor de código, abra o arquivo `theme-overrides.css`. Em seguida, localize o seletor css para `.footer`. Agora vamos adicionar um `min-height` a este seletor.

      * Para acessar um valor em um tema, use o objeto `theme`. Por exemplo, você usaria `{{ theme.footer.height }}` para acessar o valor de altura definido em nosso campo de altura.
      * Substitua a declaração `.footer` no theme-overrides.css pelo seguinte:

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

      * Salve `theme-overrides.css` para carregá-lo na sua conta da HubSpot.
  </Step>

  <Step title="Alterações do teste">
    Retorne ao editor de temas e atualize a página para ver o novo campo exibido no rodapé. Atualize o valor da altura para que ele seja refletido imediatamente na visualização. Pode ser útil definir uma cor de fundo para o rodapé, para que você possa ver a alteração com mais facilidade.
  </Step>
</Steps>

## Próximas etapas

Agora que você criou e atualizou o seu tema, crie mais campos de tema e personalize-os para os seus projetos. Para obter mais opções de personalização, confira a [visão geral dos temas](/cms/start-building/building-blocks/overview). Ao criar seu tema, pode ser útil visualizar as práticas recomendadas para [otimizar sites no HubSpot CMS](/cms/best-practices/testing-staging-performance/speed).

O HubSpot tem vários [temas padrão](/cms/start-building/building-blocks/themes/default-themes) fornecidos com o CMS Hub. Esses temas estão disponíveis para visualização, clonagem e atualização, para que você saiba como usar um tema em um cenário do mundo real.

Depois de mexer com os temas, [saiba como criar seu primeiro módulo personalizado](/cms/start-building/building-blocks/modules/overview).