You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:
To add styles you can select the general class, as well as specific banners by category-id:
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.
If you actually don’t want a background color, you should state none or transparent.
If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in
Mas, em qualquer caso: se você sentir que usei parte do seu trabalho e eu deixei de dar os créditos, por favor, me avise e eu atualizarei o primeiro post
Sim, por favor, adoraria receber pelo menos algum tipo de crédito. Mas depende de você. Fora isso, parece bom e vou recomendar este componente de tema na minha postagem, pois isso facilita para novos usuários.
@ Nolo
Existe uma maneira no TC, ou com CSS no tema, de alinhar o texto do Título à esquerda, assim como no seu segundo exemplo).
Além disso, existe uma maneira (se não usar uma imagem de banner) de redimensionar o cabeçalho para a espessura de uma linha de texto.
E, se sim, você pode redimensionar o texto para que não seja tão grande?
Sim, claro, você pode estilizar os banners usando estas classes:
Se você quiser sobrescrever declarações existentes na classe geral, você precisará usar a propriedade !important. Por exemplo, para os estilos que você mencionou:
Isso ocorre porque os estilos são realmente declarados nos banners específicos. Acho que poderia melhorar isso no componente, mas por enquanto você precisaria sobrescrever com important.
Muito obrigado por este componente!! Estou desenvolvendo um fórum político e poder aplicar esse tipo de separação é fundamental.
Embora já seja uma grande melhoria para o meu fórum, faria uma diferença enorme se os cabeçalhos pudessem ser referenciados por URL, pois isso permitiria criar botões no topo do fórum a partir dos quais o usuário poderia navegar facilmente na mesma página. Seria uma funcionalidade extremamente ágil se o fórum (esperançosamente) ficar muito maior. Isso é possível atualmente?
Obrigado pela sugestão @lisandro_iaffar. Embora este componente esteja realmente apenas fornecendo uma solução leve que não altera os modelos HTML. Se você quiser referenciar as seções, precisará usar uma abordagem como a oferecida por GitHub - discourse/discourse-minimal-category-boxes.
Estou animado para experimentar isso, pois criei muitas categorias e poder organizá-las em grupos será uma grande ajuda.
Saberei quando experimentar, isso também poderia ser uma forma de deixar categorias antigas e menos usadas fora da página principal, certo? Elas ainda estariam disponíveis na nova barra lateral.
Sim, claro Na verdade, eu quase sempre faço seleções de categorias em diferentes elementos da página (barra lateral, cabeçalho, barra de navegação, página de categoria,..) É como a estrutura do site de um website. É importante que esteja bem organizado, mas não precisa determinar a sua apresentação de UI.
Olá @manuel, gostaria de saber se este componente maravilhoso ainda funciona após as atualizações do speech, instalei e não funcionou para mim, agradeço desde já.
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?
Na verdade, eu quase sempre faço seleções de categorias em diferentes elementos da página (barra lateral, cabeçalho, barra de navegação, página de categoria,..) É como a estrutura do site de um website. É importante que esteja bem organizado, mas não precisa determinar a sua apresentação de UI.
