# 我怎样更改某个话题的背景？

**URL:** <https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047>\
**Category:** Development\
**Created:** [2022年十月27日 04:45 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047 "2022-10-27T04:45:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月27日 04:45 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/1 "2022-10-27T04:45:07Z")

</div>

继续讨论 [主题背景颜色更改](https://meta.discourse.org/t/background-of-topic-color-change/123535/2) 中的内容：

你好，我该如何更改某个主题的背景？

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月27日 07:13 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/2 "2022-10-27T07:13:51Z")

</div>

或者，我不会编码。自定义特定子类别主题背景的 CSS 代码是什么？

感谢您的回复！

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2022年十月28日 21:37 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/3 "2022-10-28T21:37:21Z")

</div>

```css
.category-support .topic-post {
    background: red;
}

```

显示：

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/b/d/fbd6185c7268f2f3d1009b292133e5af88d1c556.png)

分类特定的类位于 `<body>` 标签中。

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/b/d/7bd33c86753762a40c208fb2da7dea453b89f943.png)

* * *

如果你只想突出显示第一个帖子：

```css
.category-support .topic-post:first-child {
    background: red;
}

```

* * *

如果你想更改主题列表中特定分类主题的背景，那么你链接的主题就是实现此目的的方法。

```css
.category-support.topic-list-item {
    background: red;
}

```

显示：

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97a9d08ea4be15f5f6449c8036c414504160da88.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 05:43 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/4 "2022-10-29T05:43:03Z")

</div>

非常感谢你 👍  
我一定会试试！

> [@Canapin](#):
>
> ```plaintext
> .category-support .topic-post {
> background: red;
> }
> 
> ```

我可以用图片代替颜色吗？

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 05:51 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/5 "2022-10-29T05:51:43Z")

</div>

> [@Canapin](#):
>
> ```plaintext
> .category-support .topic-post {
> background: red;
> }
> 
> ```

另一个问题：自定义特定 **子类别** 背景的代码是什么？  
谢谢。

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2022年十月29日 06:30 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/6 "2022-10-29T06:30:32Z")

</div>

> [@Aizada\_M](#):
>
> 我能用图片代替颜色吗？

您好，

您也可以使用类别设置来为类别设置背景图片。

 ![Screenshot 2022-10-29 at 8.13.25](https://global.discourse-cdn.com/meta/original/4X/8/3/a/83ab97027d99db973bc55233703550cd2d9058b2.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 06:43 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/7 "2022-10-29T06:43:00Z")

</div>

是的，它奏效了 👍。但当我将页面设为公开时，背景仍然是白色的 👇

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/9/cd92c455d1903ef1907bb3de7d6d8d25e54d44c4.png)

> 公开页面的功能非常有限。  
> 例如，不会显示 YouTube 视频预览（只显示视频横幅）。您无法制作图片轮播（所有图片都会按顺序堆叠在页面下方）。  
> 基于以上情况，我有以下问题：我是否可以自行改进公开页面的功能，或者是否有现成的代码可以改进公开页面？  
> 也许我应该就此问题另外发帖 🤔

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2022年十月29日 08:29 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/8 "2022-10-29T08:29:41Z")

</div>

您需要单独设置已发布页面，而不是主题本身，但每个已发布页面都有自己的 ID，因此可以通过一些 CSS 进行调整。例如：

```scss
.published-page {
  &.testing-published-page.topic-276.foo { /*这是我的页面 ID，由 topic-title+topic-ID+category-slug 组成*/
    background-color: #c4ddc4;

    .published-page-header {
      background-color: #facccc;
    }

    blockquote {
      background-color: #facccc;
      border: 5px solid #fb7878;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 08:56 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/10 "2022-10-29T08:56:10Z")

</div>

感谢您，我非常感谢您的回答。  
是否可以使已发布的页面自动继承原始帖子的设计？

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 08:59 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/11 "2022-10-29T08:59:49Z")

</div>

感谢您的回复！  
我想起了这个功能。此功能为特定类别中的所有主题设置背景。我能否在帖子编辑器中为特定帖子编写背景代码，而不自定义整个部分的背景？

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 09:04 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/12 "2022-10-29T09:04:06Z")

</div>

> [@JammyDodger](#):
>
> `*这是我的页面ID，由主题标题+主题ID+类别缩略名组成*`

你能给我一个更具体、更接近的文本示例吗？否则我无法操作。

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/3/8/438dda6b6358a9dc24f7cb29799f17eea59941bc.png)

**主题标题 =** kody-css-dlya-nastrojki-oformleniya-temy  
**类别缩略名 =** staff  
**主题 ID =**![image](https://global.discourse-cdn.com/meta/original/4X/1/4/b/14bb51467e54c1668f7d0c87c317c26a81570b86.png)

这是我已发布的页面 👇

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/7/5/f75118232fe2780dc938241c414e68dc83add94c.png)

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2022年十月29日 17:16 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/13 "2022-10-29T17:16:21Z")

</div>

您是否在浏览器检查器中查找了页面的详细信息？

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 17:23 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/14 "2022-10-29T17:23:35Z")

</div>

不，因为我不明白。  
你的意思是这样的：👇？

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/1/5/315cad62ea42be122c80b12a6e04d3e1a91701d2.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月29日 17:26 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/15 "2022-10-29T17:26:24Z")

</div>

> [@Aizada\_M](#):
>
> **主题 ID =**![image](https://global.discourse-cdn.com/meta/original/4X/1/4/b/14bb51467e54c1668f7d0c87c317c26a81570b86.png)

我从浏览器中获取了 ID 👆  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/b/9/eb9e97c48f5026ac6f41a6c9ec6f652fa8ec7cbd.png)

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2022年十月29日 18:07 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/16 "2022-10-29T18:07:31Z")

</div>

我的 CSS 技能仅限于代码片段和调整，所以我不是教基础知识的最佳人选。🙂

我们有一些可能有用的指南？

> [@Designer's Guide to getting started with themes in Discourse](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002):
>
> So you’re interested in in designing your own theme for Discourse? You’ve arrived at the right topic smile This guide will be more focused on the SCSS/CSS aspects of working with themes in Discourse. If you are also knowledgeable in JS/EmberJs/Handlebars you can go even deeper by looking into this guide. I will describe to you my personal method’s of designing and theming in Discourse. As with most things, there are LOTS of ways to go about implementing your own designs. I enjoy using the …

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月30日 09:52 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/17 "2022-10-30T09:52:52Z")

</div>

> [@JammyDodger](#):
>
> 我恐怕我的 CSS 技能仍然仅限于片段和调整，所以我不是教甚至基础知识的最佳人选。 🙂

我能再问一个问题吗？恐怕除了你之外没有人会回答我。如何制作一个类似的按钮闪烁（闪光）效果？  
 ![Button-whatsapp gif](https://global.discourse-cdn.com/meta/original/4X/c/d/7/cd7035a305b601aeadd32d9be1ef3002893b2f6f.gif)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月30日 10:51 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/18 "2022-10-30T10:51:14Z")

</div>

这是我的按钮代码

```plaintext
[data-theme-button2] {
    display: flex;
    justify-content: end;
    a {
        padding: 10px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 1px solid #004E7D;
        color: #004E7D;
        font-weight: 600;
    }
}

```

---

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [2022年十月30日 10:58 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/19 "2022-10-30T10:58:21Z")

</div>

> [@Aizada\_M](#):
>
> 如何制作类似的按钮闪烁（耀斑）效果？

您可以在此处获得 Discourse 特定的帮助，但您需要到其他地方获取 CSS 技巧。我只使用 Google 和 [https://css-tricks.com/](https://css-tricks.com/)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2022年十月30日 13:58 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/20 "2022-10-30T13:58:21Z")

</div>

你好。感谢你的信息 🙌  
我认为聘请专家比理解编码对我来说更好。我需要解决按钮代码的问题。此时，我需要解决按钮代码的问题。

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2022年十月30日 15:43 UTC](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047/21 "2022-10-30T15:43:36Z")

</div>

如果您需要聘请某人进行 CSS 修改或更多工作，您可以在 #Marketplace 发布信息和/或给我发私人消息。

[下一頁](https://meta.discourse.org/t/how-can-i-change-the-background-of-a-certain-topic/243047.md?page=2)
