Lista de Categorias com Banners

[manuel (Manuel Kostka)]

Este componente adiciona banners opcionais aos estilos padrão da página de categoria Apenas Categorias e Categorias com Tópicos em Destaque:

Você pode adicionar banners nas configurações do componente definindo a categoria logo abaixo do banner, uma cor de banner e o texto do título. Há também uma opção para ocultar as bordas coloridas padrão:

Para adicionar estilos, você pode selecionar a classe geral, bem como banners específicos por ID de categoria:

.category list .category-list-banner {
  &.category-5 { [estilize um banner específico] }
  &:after { [estilize os títulos] }
}

Por exemplo, você pode codificar suas categorias por cores:

Ou adicionar imagens de fundo:

Este componente apenas adiciona elementos de layout à página de categoria. Portanto, você não pode referenciar esses títulos em nenhum outro lugar do seu site. Outra observação: não há um estilo de página padrão Apenas Categorias no modo móvel. Ele sempre mostrará os tópicos em destaque também.

Créditos: O componente foi inspirado na aparência da Comunidade Cfx.re e na solução original de @godgutten para alcançar esse visual, conforme compartilhado em Como adicionar banners de categoria?

	Repositório	GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists. · GitHub
	Guia de Instalação	Como instalar um tema ou componente de tema

[tot (Борис Мальцев)]

Obrigado, Nolo! Muito legal! Seu componente melhorou nossa comunidade

[tot (Борис Мальцев)]

Nolo, encontrei outro problema ao alternar o estilo do fórum para o modo noturno. Se você puder corrigi-lo, ficará perfeito!

[manuel (Manuel Kostka)]

Isso parece ser o comportamento esperado.. O slot de cor aceita qualquer valor que possa ser usado como background-color no CSS. Portanto, ao fornecer um valor hexadecimal, a cor permanecerá a mesma em diferentes modos e temas.

Se você realmente não quiser uma cor de fundo, deve especificar none ou transparent.

Se deseja uma cor de fundo que mude conforme o modo, você precisará especificá-la usando uma variável CSS personalizada: pode usar uma das pré-definidas pelo Discourse, como var(--secondary-high). Ou definir as suas próprias, conforme explicado em

Update themes and plugins to support automatic dark mode

Previously, all colors in Discourse were stored as SCSS variables. To support automatic dark mode color scheme switching, we have converted these colors in core to custom CSS properties. You can easily see the full list in the inspector now: [image] Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. In most cases, this is a simple find and replace task: - background-color: $primary-very-low; + background-color: var…

[tot (Борис Мальцев)]

Nolo, obrigado, isso ajudou!

[godgutten]

Olá, adoro ver o que você conseguiu criar. Mas é permitido me dar crédito também e não apenas me roubar e usar parte do meu trabalho…

[manuel (Manuel Kostka)]

Fico feliz que você goste do componente! Não tenho certeza por que você me acusa de roubar seu trabalho, no entanto…?

Fazer este componente foi inspirado neste tópico:

Creating a nicer layout

Hello all, I’m new here, and wasn’t sure where to post this since this questions about CSS/HTML were outside the scope on the support category. Anyway I digress. I came across Discourse through another platform I frequently use, and moved my Forum over to Discourse. The layout that is used on the platform looks really nice and I’m trying to do something similar. Anyone an idea how to do this kind of thing? [Screenshot] just a basic HTML/CSS edit or do I need to use a plugin?

Eu indiquei o OP para sua solução, mas então fiquei interessado em como resolver isso sem codificar os templates e desconstruindo valores de uma lista de configurações dentro do SCSS. Portanto, o código do componente é essencialmente sobre esta solução:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

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

[godgutten]

@manuel

Mas, em qualquer caso: se você sentir que usei algum do seu trabalho e não dei os devidos créditos, por favor, me avise e 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.

How do I add category banners?

So now I have got it fixed for my self at least [4d34f94999cfa96f6578d9b3d6d33707] So first of all download this file discourse-misc-html-css (2).zip (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem > .category-list { &:before { content: 'FiveM'; } background-image…

[Cozdabuch (cosmo)]

@ 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?

[manuel (Manuel Kostka)]

Sim, claro, você pode estilizar os banners usando estas classes:

@manuel

Para adicionar estilos, você pode selecionar a classe geral, bem como banners específicos por category-id:

.category list .category-list-banner {
  &.category-5 { [estilizar um banner específico] }
  &:after { [estilizar os cabeçalhos]}
}

Se você quiser sobrescrever declarações existentes na classe geral, você precisará usar a propriedade !important. Por exemplo, para os estilos que você mencionou:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

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.

[lisandro_iaffar]

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?

[manuel (Manuel Kostka)]

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.

[lisandro_iaffar]

Obrigado pela sua resposta e por fornecer orientação
E obrigado novamente por este componente, ele melhorou muito o layout do meu fórum

[cogdog (Alan Levine)]

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.

[manuel (Manuel Kostka)]

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.

[Tiago_santos]

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á.

[duncanell]

como você adiciona imagens de fundo?

[Arkshine]

Olá, bem-vindo

Você pode adicionar CSS em seus temas ou em um componente de tema separado:

@manuel

Para adicionar estilos, você pode selecionar a classe geral, bem como banners específicos por ID de categoria:

.category list .category-list-banner {
  &.category-5 { [estilizar um banner específico] }
  &:after { [estilizar os títulos]}
}

Por exemplo, supondo que você queira adicionar uma imagem à categoria ID 4, você faria algo assim:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

Este é apenas um exemplo. Para mais informações, você pode consultar as propriedades CSS de background.

Links úteis também :

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

Beginner's guide to using Discourse Themes

This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …