CSS Personalizado

Para controlo total sobre a aparência do banner, utilize CSS Personalizado para substituir qualquer estilo.

Onde adicionar CSS personalizado

Aceda a Construtor de Banners → Avançado → CSS Personalizado e cole o seu CSS.

O CSS personalizado é injectado numa tag <style> dentro do shadow DOM do ConsentForge, pelo que afecta apenas o banner — não os estilos do seu website.

Nomes de classes do banner

Selector	Elemento
.cf-banner	Contentor raiz do banner
.cf-banner__title	Cabeçalho do banner
.cf-banner__description	Texto do corpo do banner
.cf-btn-accept	Botão Aceitar Tudo
.cf-btn-reject	Botão Rejeitar Tudo
.cf-btn-customize	Botão Personalizar / Gerir Preferências
.cf-preference-center	Sobreposição do Centro de Preferências
.cf-category	Uma linha de categoria individual no Centro de Preferências
.cf-toggle	O input do selector de consentimento

Exemplos

Botões arredondados

.cf-btn-accept,
.cf-btn-reject,
.cf-btn-customize {
  border-radius: 9999px;
}

Botões de largura total em dispositivos móveis

@media (max-width: 640px) {
  .cf-banner__actions {
    flex-direction: column;
  }
  .cf-btn-accept,
  .cf-btn-reject {
    width: 100%;
  }
}

Cor do selector personalizado

.cf-toggle:checked {
  background-color: #10B981;
}

Variáveis CSS

Para alterações de cor/tipo de letra, prefira variáveis CSS em vez de substituições de classes — são mais fáceis de manter e seguras em actualizações.