Em quase toda diretoria existe alguém que entende um pouco de CSS. Essa pessoa fez o site da própria empresa, fez um curso de web ou simplesmente gosta de mexer nessas coisas. Mais cedo ou mais tarde, ela olha o site do clube e diz: "Eu arrumaria esse espaçamento em duas linhas, se o sistema deixasse."
O CSS personalizado deixa. Bem usado, ele é aquele acabamento final de dez por cento que faz o site do clube parecer seu. Mal usado, vira um emaranhado de regras que ninguém mais entende, que quebra na primeira vez que a plataforma muda e que se transforma em um problema de transição na próxima assembleia geral.
Este guia mostra quando o site de um clube realmente precisa de CSS personalizado, o que tentar antes, o que uma funcionalidade segura de CSS personalizado deve permitir e recusar (com os motivos) e os hábitos que mantêm uma folha de estilo útil depois que quem a escreveu seguiu em frente.
O que é CSS, em um parágrafo
CSS é a linguagem que controla a aparência de uma página da web: cores, tamanhos, espaçamentos, bordas, fontes e layout. O conteúdo da página diz "aqui tem um título, aqui tem uma foto, aqui tem uma lista de patrocinadores"; o CSS diz "os títulos são verde-escuros e em negrito, as fotos têm cantos arredondados, os logos dos patrocinadores ficam em uma fileira com espaço entre eles". Uma caixa de CSS personalizado permite adicionar suas próprias regras por cima das que a plataforma já usa.
Tente primeiro as configurações nativas
Quase tudo o que os clubes tentam fazer com CSS pode ser feito sem escrever uma linha de código. Antes que alguém abra uma folha de estilo, confira se as configurações nativas (o tema, o editor de navegação e os estilos de seção no editor de páginas) já resolvem:
- Cores. As cores do clube como paleta do site, aplicadas a botões, títulos e links em todas as páginas.
- Fontes e títulos. A escolha das fontes, o tamanho e o peso dos títulos, e títulos que se ajustam entre o tamanho do celular e o do computador.
- Formato. O arredondamento dos cantos de cartões e botões, e os estilos dos botões.
- Layouts de cabeçalho e rodapé. Onde o logo fica, como o menu é organizado, o fundo do cabeçalho e um rodapé com uma faixa de patrocinadores.
- Estilos de seção. Um banner de destaque, uma faixa na cor da marca, uma coluna estreita de leitura, duas colunas ou uma imagem de largura total, aplicados a uma seção de cada vez.
As configurações nativas têm duas grandes vantagens sobre o CSS: o próximo voluntário consegue ver e alterar essas configurações sem ler código, e elas continuam funcionando quando a plataforma é atualizada. Se uma configuração resolve, use a configuração. Nosso guia sobre como criar o logo do clube trata das decisões de marca que devem vir antes de tudo isso.
Bons motivos para usar CSS personalizado
O CSS personalizado vale a pena para ajustes pequenos e específicos, para os quais o tema nunca teria uma configuração:
- Apertar ou soltar o espaçamento em um tipo de seção que parece apertado ou vazio demais.
- Dar às fotos cantos arredondados, uma borda ou uma sombra discreta para combinar com o estilo do material impresso do clube.
- Ajustar uma única seção, como uma faixa de patrocinadores, uma tabela de resultados ou uma citação, sem afetar o resto da página.
- Pequenos ajustes para telas menores usando uma media query, para uma seção que fica melhor no celular com um tamanho um pouco diferente.
- Uma transição suave ou um efeito ao passar o mouse em cartões ou botões.
Repare no padrão: todos esses usos são pequenos e estéticos. Uma folha de estilo feita de regras assim é fácil de ler e fácil de apagar.
Maus motivos para usar CSS personalizado
Alguns usos do CSS criam mais problemas do que resolvem:
- Esconder conteúdo que você prefere não manter. Se uma seção está desatualizada, atualize ou remova. Conteúdo escondido continua sendo enviado a cada visitante e continua sendo lido pelos mecanismos de busca.
- Refazer o layout. Se você está reescrevendo a organização da página inteira, está brigando com a plataforma. Use seções e barras laterais, ou peça ajuda.
- Truques de cor com pouco contraste. Texto cinza-claro sobre fundo branco fica elegante em um protótipo e ilegível em um celular sob o sol. O guia de site de clube acessível explica por que o contraste importa para os seus sócios.
- Copiar uma folha de estilo grande de outro lugar. Uma folha de estilo escrita para outro site foi feita para a estrutura daquele site. A maior parte não vai fazer nada, e uma parte vai fazer algo estranho.
O que uma funcionalidade segura de CSS personalizado permite e o que ele recusa
Uma caixa de CSS personalizado é poderosa justamente porque o navegador confia nela. É também por isso que uma plataforma que hospeda centenas de sites de clubes precisa impor limites. Veja onde o ClubHelix traça a linha, e por quê.
O que você pode fazer. Estilizar layout, espaçamento, tamanhos, bordas, cores, fundos, tipografia, transformações, transições e animações. Usar media queries, feature queries, container queries e keyframes. Ler as variáveis de cor e de fonte do seu próprio tema, para que suas regras acompanhem o tema quando ele mudar.
O que é recusado, e por quê:
- Carregar qualquer coisa de outro site. Importar outra folha de estilo, carregar uma fonte da web ou puxar uma imagem de outro lugar é recusado. Tudo o que é carregado de outro site permite que esse site veja os seus visitantes e pode mudar sem que você saiba. Imagens no seu CSS só podem vir dos seus próprios uploads.
- Sobreposições fixas e grudadas. Posicionar algo para que fique por cima da página é recusado, e a ordem de empilhamento é limitada a um número pequeno. Uma sobreposição é a forma como uma página acaba coberta por uma caixa que não deveria estar ali, seja por acidente, seja por algo pior.
- Estilizar fora do seu site. Toda regra é limitada automaticamente ao seu site público. Regras voltadas para a janela inteira do navegador, como a raiz ou o corpo da página, são recusadas com uma mensagem em vez de serem reescritas em silêncio, porque elas nunca poderiam fazer o que você pretendia. As telas do painel nunca são afetadas, então um erro jamais vai impedir você de entrar para corrigi-lo.
- Definir novas variáveis. Você pode ler as variáveis do tema, mas não declarar as suas, porque uma variável pode ser usada para contrabandear um valor que as regras recusariam.
- Selecionar campos de formulário pelo conteúdo. Existe um truque conhecido de CSS que consegue ler o que alguém digita em um formulário, um caractere por vez, usando seletores de atributo. Esses seletores são recusados em campos de formulário.
Tudo é verificado duas vezes: quando você salva e de novo a cada vez que uma página é exibida. Se uma regra for removida, o editor informa qual foi e por quê, e mantém o restante.
Como funciona no ClubHelix
O CSS personalizado faz parte do plano Pro. Há dois lugares para colocá-lo:
- No site inteiro, em Tema → CSS personalizado: uma folha de estilo de até 20 KB para todo o site público.
- Por seção, no painel Layout e estilo de qualquer seção da coluna principal de uma página: até 2 KB, aplicados só àquela seção.
O CSS personalizado vale apenas para o seu site público. Se a sua organização passar para um plano inferior, o CSS fica guardado, mas não aparece, e volta quando você retornar ao Pro. A página de temas e identidade visual mostra tudo o que o tema faz sem código, e o editor visual de páginas é onde ficam os estilos de seção e o CSS por seção.
Mantenha a folha de estilo fácil de passar adiante
Uma folha de estilo dura mais do que quem a escreveu. Estes hábitos evitam que ela vire a única parte do site que ninguém tem coragem de mexer:
- Mantenha curta. Se a folha de estilo do site inteiro está passando de uma ou duas telas, pergunte se o tema ou um estilo de seção poderia fazer parte do trabalho.
- Uma função por regra. Uma regra que ajusta uma única coisa é fácil de entender e fácil de apagar.
- Anote o porquê. Deixe uma nota curta no documento de transição da diretoria: para que serve cada regra e em qual página ela atua. O checklist de transição da diretoria é um bom lugar para isso.
- Confira no celular. A maioria dos visitantes vai ver suas regras em uma tela pequena. Olhe lá primeiro.
- Confira o contraste. Se uma regra muda cores, verifique se o texto continua fácil de ler.
- Remova o que não precisa mais. Regras antigas para seções que já não existem são inofensivas, até deixarem de ser.
Perguntas frequentes
Precisamos saber CSS para ter um site de clube bonito?
Não. Cores, fontes, botões, layouts de cabeçalho e rodapé e estilos de seção são todos configurados sem código. O CSS personalizado serve para pequenos ajustes depois disso, e muitos clubes nunca o usam.
Por que parte do meu CSS foi removida quando salvei?
Porque ela pedia algo que as regras recusam, como carregar um arquivo de outro site, fixar uma sobreposição por cima da página ou estilizar fora do seu site. O editor lista cada regra removida e o motivo, e mantém todo o resto.
O CSS personalizado pode quebrar as telas do painel?
Não. O CSS personalizado vale apenas para o seu site público, então você sempre consegue entrar para corrigir um erro.
O que acontece com o nosso CSS se mudarmos de plano?
Ele fica guardado, mas não aparece abaixo do plano Pro. Volte para o Pro e ele aparece de novo, sem alterações.
Podemos usar uma fonte própria?
Não pelo CSS personalizado: carregar fontes de outros sites é recusado. Escolha entre as vinte fontes que o editor de temas entrega a todos os visitantes ou, no plano Pro, envie os arquivos de fonte WOFF2 do seu clube no tema. Nosso guia sobre fontes e identidade visual do site do clube mostra como escolher uma combinação e conferir a licença de uma fonte.
Quer que o site do seu clube tenha a cara do seu clube, com ou sem código? Comece grátis com o ClubHelix e configure o seu tema ainda hoje.
