> ## Documentation Index
> Fetch the complete documentation index at: https://base39-release-notes-06-mar.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Estilos customizados

> Configuração de estilos customizados para o Portal do Cliente

## O que é um tema?

Um tema é um conjunto de arquivos que define a aparência do seu site. Um tema inclui arquivos de modelo, arquivos de estilo, arquivos de funções e possivelmente arquivos de imagem e JavaScript. Você pode usar um dos temas padrão do Ghost ou criar seu próprio tema personalizado.

[API de tema](https://docs.base39.com.br/development/api-reference/endpoint/post-v1-themes-theme)

### Customização de estilos

Através da API de tema é possível customizar os estilos do Portal Cliente.
Para configurar um estilo customizado é necessário informar um Cascading Style Sheets (CSS) respeitando as estruturas de classes, ids e tags do sistema.

Atenção: Recomendamos não utilizar seletores para classes para evitar conflitos com o CSS padrão do sistema. As classes geradas por nossa arquitetura podem sofrer alterações a qualquer momento.

O seletor `data-stylesid` faz parte da nossa arquitetura e através dele você pode estar customizando os estilos do sistema.

Para saber mais sobre customização utilizando CSS acesse \[Guia CSS] [https://developer.mozilla.org/pt-BR/docs/Web/CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)

<Tabs>
  <Tab title="Pela API">
    <Accordion title="cURL de exemplo da configuração">
      ```bash
        curl --location 'https://api.base39.io/v1/tenants/branding/themes/<SEU_DOMINO>' \
        --header 'Authorization: Bearer <SUA_API_KEY>' \
        --header 'accept: application/json' \
        --header 'content-type: application/json' \
        --data '
        {
          "customStyles": {
            header { background-color: #008000 !important}

            [data-stylesid="product-card"]:nth-of-type(1) {
              background-color: #ff7b07;
            }

            [data-stylesid="product-pending-card"]  {
              background-color: #ff12e0;

              [data-stylesid="contrast-data"] {
                color: #efefef;
                font-weight: bold;
                font-size: 1.5rem;
                background-color: #fff;

                h5 {
                  color: #000 !important;
                }

                p {
                  color: #ffe60e;
                }
              }

              [data-stylesid="tag"] {
                background-color: #008000;
                border: 1px solid #ffe60e;
              }
            }
          }
        }
      '
      ```
    </Accordion>
  </Tab>
</Tabs>