Guia de Estilização Personalizada

Como personalizar os estilos do widget de comentários

Você pode personalizar o estilo do widget de comentários de duas maneiras:

Opção 1: Via parâmetro customCSS

Passe seu CSS personalizado como uma string para o parâmetro customCSS ao inicializar o widget:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

Opção 2: Via Painel de Administração

1. Acesse a página de Personalização do Widget no seu painel de administração
2. Role até a seção "CSS personalizado" em "Avançado"
3. Insira seu CSS personalizado
4. Clique em "Salvar"

Seu CSS personalizado será aplicado a todos os widgets de comentários no seu site.

Dicas

• Use !important para sobrescrever os estilos padrão, se necessário
• Use seletores específicos para evitar afetar outras partes do seu site
• Teste seu CSS em diferentes navegadores para compatibilidade
• O widget usa CSS padrão - nenhum pré-processador especial é necessário

A borda ao redor da caixa de comentário é composta pela própria borda da área de texto mais algumas linhas finas que o widget desenha ao seu redor. Para mudar sua cor ou o arredondamento dos cantos, defina essas variáveis CSS em vez de estilizar o textarea diretamente. As variáveis restilizam todas as partes da borda de uma vez, de modo que os cantos e as cores sempre se alinhem.

Adicione o CSS na caixa Custom CSS na página de Personalização do Widget, ou passe‑o com a opção customCSS. Você só precisa definir as variáveis que deseja alterar.

Você também pode usar o assistente Comment box border logo abaixo da caixa Custom CSS, que gera esse CSS para você.

Alterar a Cor da Borda

Cor da Borda

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5

Alterar a Cor da Borda ao Digitar

Cor da Borda ao Digitar

Copy

1

2:root {

3 --fc-input-border-color-focus: #2563eb;

4}

5

Arredondar Todos os Quatro Cantos

Por padrão o canto superior esquerdo é quadrado. Defina ambas as variáveis de raio para arredondar os quatro cantos da mesma forma:

Arredondar Todos os Quatro Cantos

Copy

1

2:root {

3 --fc-input-border-radius: 12px;

4 --fc-input-border-start-start-radius: 12px;

5}

6

Cantos Quadrados

Cantos Quadrados

Copy

1

2:root {

3 --fc-input-border-radius: 0;

4}

5

Combinar com sua Marca

Cores da Marca e Cantos

Copy

1

2:root {

3 --fc-input-border-color: #c7d2fe;

4 --fc-input-border-color-focus: #4f46e5;

5 --fc-input-border-radius: 8px;

6 --fc-input-border-start-start-radius: 8px;

7}

8

Cores Diferentes no Modo Escuro

Quando o widget está no modo escuro ele tem a classe dark, então você pode definir valores diferentes para o modo escuro:

Cores da Borda no Modo Escuro

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5.dark {

6 --fc-input-border-color: #444;

7 --fc-input-border-color-focus: #aaa;

8}

9

Por que não estilizar a área de texto diretamente?

O widget desenha parte da borda da caixa de comentário ele mesmo, ao redor da área de texto. Se você definir border-color ou border-radius apenas no textarea, essas linhas mantêm o estilo padrão e a borda parece incompatível, por exemplo, uma linha quadrada atravessando um canto arredondado. As variáveis acima alteram ambos de uma vez.