Este guia explica como personalizar a aparência das caixas de subcategorias no Discourse, incluindo ajustes de estilo para tópicos em destaque, modificação do estilo “Boxes” e gerenciamento do truncamento da descrição da categoria.
Nível de usuário necessário: Administrador
As caixas de subcategorias no Discourse podem ser personalizadas para melhorar o apelo visual e a organização do seu fórum. Este guia o conduzirá por várias opções de personalização para caixas de subcategorias, incluindo estilos para tópicos em destaque, o estilo “Boxes” e o truncamento da descrição da categoria.
Personalizando caixas com tópicos em destaque
Para criar uma aparência ousada e colorida para suas caixas de subcategorias com tópicos em destaque, você pode usar CSS personalizado. Este método remove logotipos e aplica cores de fundo distintas a cada subcategoria.
Veja como fazer suas caixas de subcategorias ficarem assim:
- Acesse o painel de administração do seu site
- Navegue até Personalizar > Temas
- Crie um novo tema ou edite um existente
- Adicione o seguinte CSS ao seu tema:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
Ajuste os seletores CSS e as cores para corresponder aos nomes específicos das suas categorias e à paleta de cores desejada.
Personalizando o estilo “Boxes”
Se você estiver usando o estilo “Boxes” para subcategorias, pode personalizá-lo de forma semelhante:
No CSS do seu tema, adicione o seguinte código:
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading h3 {
color: white;
}
}
}
Novamente, modifique os seletores e as cores para se adequar à estrutura do seu fórum e às preferências de design.
Gerenciando o truncamento da descrição da categoria
Por padrão, o Discourse truncar as descrições das categorias para 4 linhas nas caixas de categoria. Você pode ajustar isso usando CSS personalizado:
Para encurtar a descrição para duas linhas, adicione este CSS ao seu tema:
.category-boxes .description {
-webkit-line-clamp: 2;
}
Ajuste o valor de -webkit-line-clamp para atingir o número desejado de linhas visíveis.
Considerações para dispositivos móveis
Ao usar o estilo “Boxes with subcategories” no desktop, esteja ciente de que os tópicos ainda podem estar visíveis em dispositivos móveis. Esse comportamento pode ser intencional no design do Discourse para manter a legibilidade em telas menores.
Se precisar ajustar o layout móvel, talvez seja necessário adicionar CSS específico para visualizações móveis ou consultar um desenvolvedor de temas do Discourse para uma solução mais personalizada.
