Este guia explica como personalizar a aparência das caixas de subcategoria no Discourse, incluindo o ajuste de estilos para tópicos em destaque, a modificação do estilo “Boxes” e o gerenciamento do truncamento de descrições de categoria.
Nível de usuário necessário: Administrador
Caixas de subcategoria no Discourse podem ser personalizadas para aprimorar o apelo visual e a organização do seu fórum. Este guia o guiará por várias opções de personalização para caixas de subcategoria, incluindo estilos para tópicos em destaque, o estilo “Boxes” e o truncamento de descrições de categoria.
Personalizando caixas com tópicos em destaque
Para criar um visual ousado e colorido para suas caixas de subcategoria 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 subcategoria ficarem assim:
- Vá para 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;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Ajuste os seletores CSS e as cores para corresponder aos nomes de suas categorias específicas e ao esquema de cores desejado.
Personalizando o estilo “Boxes”
Se você estiver usando o estilo “Boxes” para subcategorias, poderá personalizá-lo de forma semelhante:
No CSS do seu tema, adicione o seguinte código:
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
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 e às preferências de design do seu fórum.
Gerenciando o truncamento de descrições de categoria
Por padrão, o Discourse trunca as descrições de categoria em 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 .overflow {
max-height: 3em;
}
Ajuste o valor de max-height para obter 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 ser visíveis em dispositivos móveis. Esse comportamento pode ser intencional no design do Discourse para manter a legibilidade em telas menores.
Se você precisar ajustar o layout móvel, pode ser 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.