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

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

Pela API

cURL de exemplo da configuração

  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;
        }
      }
    }
  }
'