Gestão do site

CSS personalizado

CSS personalizado (Pro): adicione seu próprio CSS ao site público, para o site inteiro em Tema ou por seção no editor de páginas. Ele é verificado ao salvar e em cada visualização de página: @import, fontes, imagens externas, position: fixed, texto adicionado com content e seletores de atributo em campos de formulário são removidos, com o motivo exibido. Nunca se aplica ao painel; se você sair do Pro, ele fica guardado, mas não aparece.

Traduzido automaticamente. Esta página de ajuda foi traduzida automaticamente do inglês, então algumas palavras podem não ser exatas.

O CSS personalizado permite que um clube no plano Pro dê os próprios toques finais ao site público: uma tabela de jogos mais compacta, um cartão com uma sombra mais suave, um título com um pouco mais de espaçamento entre as letras. Há dois lugares para escrevê-lo: uma folha de estilo de todo o site, para o site inteiro, e um campo CSS personalizado em cada seção de página, para estilizar só aquela seção.

Tudo o que você escreve é verificado antes de ser salvo e verificado de novo toda vez que uma página é exibida. Qualquer coisa que possa prejudicar os seus visitantes ou quebrar a página é removida, e você fica sabendo o que foi removido e por quê.

Quem pode usar

O CSS de todo o site pode ser alterado pelos administradores da sua organização. Moderadores podem abrir a página, mas não editá-la.
O CSS da seção pode ser escrito por qualquer pessoa que possa editar aquela página.
O CSS personalizado aparece no seu site só enquanto a sua organização estiver no plano Pro. Em um plano inferior, você ainda vê a página, com um aviso sobre o plano.

O que há na página

Abra Tema na barra lateral do painel e siga o link CSS personalizado ao lado do tema ativo. A página tem uma caixa de texto grande para a sua folha de estilo, um contador de tamanho (o limite é 20 KB) e dois botões:

Verificar lê o seu CSS e lista o que seria removido, sem salvar.
Salvar salva. O seu site público mostra a alteração na hora.

Para uma única seção, abra a página no editor de páginas, expanda Layout e estilo na seção e use a caixa CSS personalizado no fim (o limite é 2 KB por seção). Ela lista o que será removido enquanto você digita.

Passo a passo

Estilizar o site inteiro

Vá para Tema e clique em CSS personalizado.
Digite o seu CSS. Escreva os seletores como faria normalmente, por exemplo .card { border-radius: 12px }.
Clique em Verificar para ver se algo será removido.
Clique em Salvar e depois em Ver seu site para ver o resultado.

Estilizar uma seção

Abra a página no editor de páginas e expanda Layout e estilo na seção.
Em CSS personalizado, escreva regras para elementos dentro da seção, como .stat { font-size: 2rem }.
Para estilizar a própria seção, comece o seletor com &, por exemplo &:hover { opacity: .9 }.
Salve a página normalmente.

Referência de campos

Campo / controle	O que faz
CSS de todo o site	A sua folha de estilo para o site público inteiro, com até 20 KB
Verificar	Lista o que seria removido, sem salvar
Salvar	Salva a folha de estilo e a mostra no seu site na hora
CSS personalizado (seção)	Uma folha de estilo só para uma seção, com até 2 KB
`&`	No início de um seletor, significa "esta seção" (ou "o site inteiro" na caixa de todo o site)

O que você pode usar. Layout (flex, grid, gap, largura, altura, proporção), espaçamento (margin, padding), bordas, cantos arredondados e sombras, cores e fundos, tipografia, transformações, transições e animações com @keyframes, além de @media, @supports e @container. As cores do seu tema estão disponíveis como variáveis, como var(--color-primary).

O que é removido, e por quê:

@import e @font-face: o CSS personalizado não pode carregar outros arquivos. Adicione fontes no editor de tema.
url() apontando para qualquer lugar que não sejam as suas próprias imagens enviadas, e imagens em qualquer propriedade que não seja background ou background-image.
position: fixed e position: sticky, e um z-index acima de 10: eles podem cobrir a página inteira, inclusive o menu.
content: com texto: palavras adicionadas por CSS podem enganar os visitantes, e os leitores de tela as ignoram.
Seletores de atributo em campos de formulário (por exemplo input[value]): essa é uma forma conhecida de ler o que alguém digita.
Propriedades personalizadas (--anything: …): defina cores e fontes no editor de tema.
@layer, @page, @charset, @namespace, @property, propriedades com prefixo de navegador e qualquer coisa que o verificador não consiga ler.

O que é recusado de cara. Um seletor que mira :root, html ou body, ou que começa com *, não é salvo de forma alguma, e você fica sabendo por quê. O seu CSS já vale só para o seu site, então esses seletores não fariam o que você espera.

Dicas e perguntas frequentes

Isso muda o painel? Não. O CSS personalizado aparece só no seu site público, nunca neste painel, para que ninguém seja enganado por uma tela do painel com outro estilo.
O que acontece se sairmos do Pro? O seu CSS é mantido, mas deixa de aparecer no site. Ele volta assim que vocês estiverem no Pro de novo.
O que acontece quando trocamos de tema? Nada: o CSS personalizado pertence à sua organização, não a um tema, então ele continua valendo.
Por que a minha regra sumiu depois de salvar? Ela usava algo da lista de "removidos" acima. Clique em Verificar para ver o motivo de cada parte.
O CSS da minha seção ficou diferente depois de salvar. Ele é guardado em uma linha só, com & na frente de cada seletor e sem o que foi removido. As regras mantidas significam exatamente o que você escreveu.
Posso usar uma imagem? Sim, como background ou background-image, se for uma imagem que você enviou para o seu próprio site (o endereço começa com /api/media/). Os visitantes só a veem se a própria imagem for pública: uma imagem arquivada em uma página em rascunho continua privada, então o fundo fica vazio até essa página ser publicada.
Para cores, fontes e botões, use o editor de Tema; para o seu logo, veja Identidade visual.