带有横幅的类别列表

[manuel (Manuel Kostka)]

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:

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]}
}

For example you could color-code your categories:

Or add background images:

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?

	Repository	GitHub - nolosb/discourse-category-list-banners: A Discourse theme component. Adds optional banners to the default category lists.
	Install Guide	How to install a theme or theme component

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

Thank Nolo Very cool! Your component has improved our community

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

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

[manuel (Manuel Kostka)]

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

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, thanks, that helped!

[godgutten]

你好，我很高兴看到你创造出来的东西。但是，你是否也应该给我一些署名，而不是仅仅剽窃我的作品……

[manuel (Manuel Kostka)]

很高兴你喜欢这个组件！我不确定你为什么指责我剽窃你的作品……？

制作这个组件的灵感来自于这个话题：

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?

我曾将发帖人引荐到你的解决方案，但随后我对此产生了兴趣，想知道如何不硬编码模板，而是通过解析 SCSS 中的设置列表来解构值。所以组件代码本质上就是关于这个解决方案的：
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

但无论如何：如果你觉得我使用了你的部分作品而我没有注明出处，请告诉我，我会更新第一篇帖子

[godgutten]

@manuel

但无论如何：如果你觉得我使用了你的某些作品而我忘记注明出处，请尽管告诉我，我会更新第一帖

是的，请务必至少给我一些署名。不过，这取决于你。除此之外，它看起来不错，我将在我的帖子里推荐这个主题组件，因为它让新用户更容易上手。

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
是否有办法在 TC 中，或者在主题中使用 CSS 将标题文本左对齐，就像你的第二个示例一样）。

另外，是否有办法（如果不使用横幅图像）将标题的大小调整为仅与一行文本的厚度相同。
如果可以，能否调整文本大小，使其不那么大？

[manuel (Manuel Kostka)]

当然可以，您可以使用这些类来设置横幅样式：

@manuel

要添加样式，您可以选择通用类，以及按类别 ID 选择的特定横幅：

.category list .category-list-banner {
  &.category-5 { [style a specific banner] }
  &:after { [style the headings]}
}

如果您想覆盖通用类上的现有声明，则需要使用 !important 属性。例如，对于您提到的样式：

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

这是因为样式实际上是在特定横幅上声明的。我想我可以在组件上改进这一点，但目前您需要使用 important 来覆盖。

[lisandro_iaffar]

非常感谢您提供的这个组件！！我正在开发一个政治论坛，能够应用这种分隔至关重要。
虽然这已经大大改善了我的论坛，但如果标题可以通过 URL 引用，那将是天壤之别，因为这将允许在论坛顶部创建按钮，用户可以轻松地在同一页面中导航。如果论坛（希望如此）变得大很多，这将是一个极其敏捷的功能。目前有可能实现吗？

[manuel (Manuel Kostka)]

感谢 @lisandro_iaffar 的建议。不过，这个组件只是提供了一个不更改 html 模板的轻量级解决方案。如果你想引用这些部分，你需要使用 GitHub - discourse/discourse-minimal-category-boxes 提供的类似方法。

[lisandro_iaffar]

感谢您的回答和提供的指导
再次感谢您提供的这个组件，它极大地改善了我的论坛布局

[cogdog (Alan Levine)]

我很高兴尝试这个，因为我创建了太多的类别，能够将它们组织成组将非常有帮助。

我尝试后就会知道，这也可以成为将旧的、使用较少的类别从主页上移除的方法，对吗？它们仍然可以通过新的侧边栏访问。

[manuel (Manuel Kostka)]

是的，当然 实际上，我几乎总是在不同的页面元素（侧边栏、页眉、导航栏、类别页面等）上选择类别。这就像一个网站的站点结构。它需要组织良好，但这并不需要决定你的 UI 呈现。

[Tiago_santos]

您好 @manuel，我想知道这个很棒的组件在经过语音更新后是否仍然有效，我安装了它但它对我不起作用，提前谢谢您。

[duncanell]

如何添加背景图片？

[Arkshine]

您好，欢迎

您可以在主题或单独的主题组件中添加 CSS：

@manuel

要添加样式，您可以选择通用类，以及按类别 ID 指定的特定横幅：

.category list .category-list-banner {
  &.category-5 { [为特定横幅设置样式] }
  &:after { [为标题设置样式]}
}

例如，假设您想为类别 ID 4 添加图片，您可以这样做：

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

这只是一个示例。有关更多信息，您可以查看 background CSS 属性。

还有一些有用的链接 :

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 …