Este guia explica como fazer alterações de CSS em seu site Discourse, incluindo uma introdução ao CSS, onde adicionar CSS no Discourse e como encontrar os seletores corretos usando ferramentas de inspeção do navegador.
Nível de usuário necessário: Administrador
Resumo
Este guia abrange:
- Uma breve introdução ao CSS e conceitos-chave
- Como adicionar CSS ao seu site Discourse usando componentes de tema
- Usando ferramentas de inspeção do navegador para encontrar os seletores CSS corretos
Entendendo os conceitos básicos de CSS
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). Aqui estão três conceitos-chave para entender:
- Estrutura: Uma regra CSS consiste em um seletor, propriedade e valor.
p {
color: red;
}
- Seletor:
p(seleciona todas as tagspHTML) - Propriedade:
color - Valor:
red
- Cascade (Cascata): A última regra aplicada tem precedência. Por exemplo:
p {
color: red;
}
p {
color: green;
}
Os parágrafos ficarão verdes porque é a última regra aplicada.
- Especificidade: Regras mais específicas substituem as menos específicas. Por exemplo:
div p {
color: green;
}
p {
color: red;
}
Os parágrafos dentro de divs permanecerão verdes porque div p é mais específico que p.
Adicionando CSS ao seu site Discourse
Para adicionar CSS ao seu site Discourse:
-
Vá para
Aparência > Temas e componentesna barra lateral ou siga este URL para o seu site:https://yoursite.com/admin/customize/components
-
Clique em Instalar e
Criar Novo, respectivamente.
-
Nomeie seu componente de tema e clique em Criar
-
Escolha em quais temas aplicar o componente
-
Clique em Editar Código
-
Adicione seu CSS na aba CSS
-
Clique em “Salvar” para aplicar suas alterações.
Se você tiver vários temas selecionáveis pelo usuário, certifique-se de adicionar seus componentes de tema a todos os temas relevantes.
Encontrando os seletores CSS corretos
Use as ferramentas de inspeção do navegador para encontrar os seletores CSS corretos:
-
Clique com o botão direito no elemento que você deseja modificar.
-
Selecione “Inspecionar” no menu de contexto.
-
No painel de ferramentas do desenvolvedor, localize os seletores de elementos.
-
Clique nos seletores respectivos e adicione sua regra CSS.
-
Copie a regra, cole-a na seção CSS do seu componente de tema e remova outras regras.
Para seletores mais específicos, pode ser necessário copiar o seletor usado nos estilos existentes do Discourse e modificá-lo em seu componente de tema.
Aqui está um vídeo demonstrando os passos acima:
Se suas alterações não forem aplicadas, verifique se:
- O componente de tema está ativado em seus temas.
- Sua regra CSS é específica o suficiente para substituir os estilos existentes.
