# 带有横幅的类别列表

**URL:** https://meta.discourse.org/t/category-list-with-banners/201280
**Category:** Theme component
**Tags:** unmaintained
**Created:** [2021年八月21日 19:11 UTC](https://meta.discourse.org/t/category-list-with-banners/201280 "2021-08-21T19:11:39Z")
**Posts on this page:** 1
**Showing post:** 20

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024年二月24日 01:00 UTC](https://meta.discourse.org/t/category-list-with-banners/201280/20 "2024-02-24T01:00:05Z")

</div>

您好，欢迎 👋

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

> [@manuel](#):
>
> 要添加样式，您可以选择通用类，以及按类别 ID 指定的特定横幅：
> 
> ```plaintext
> .category list .category-list-banner {
> &.category-5 { [为特定横幅设置样式] }
> &:after { [为标题设置样式]}
> }
> 
> ```

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

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

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/c/8/1c8a45e10a6c1a2e27a98ad97ef4e4d4d53cd93c.jpeg)

这只是一个示例。有关更多信息，您可以查看 [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) CSS 属性。

还有一些有用的链接 👍 :

> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark 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. person_raising_hand 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](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> 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 …

---

_[View the full topic](https://meta.discourse.org/t/category-list-with-banners/201280)._