更改分类背景颜色为框

MarcP · 2022 年9 月 12 日 08:49

我一直在努力寻找如何更改类别框的类别颜色背景：

目标是继承主类别颜色并为背景添加透明度：

有人知道我该如何实现这一点吗？

Don · 2022 年9 月 12 日 15:45

你好，

这可以通过 CSS 和一些模板修改来实现。

在桌面端，分类边框有一个颜色变量，你也可以用它作为背景。

这个变量是 --category-color，它是边框颜色。
Screenshot 2022-09-12 at 17.25.56

但是因为这个变量是十六进制值，所以你无法使其透明。不过，你可以将其添加到 ::before 伪元素中，在那里你也可以设置不透明度。

我将其制作成了一个组件，你可以安装它，或者 fork 并修改你想要的内容。

组件：GitHub - VaperinaDEV/discourse-category-background-color

桌面 CSS 看起来像这样：

github.com/VaperinaDEV/discourse-category-background-color

desktop/desktop.scss

main

@import "category-background-mixin";

.categories-list {

  // Category Lists
  .category-list {
    tbody {
      border-top: none;
      tr {
        position: relative;
        border-bottom: none;
        .category {
          &:before {
            @include category-before-style;
          }
        }
      }
    }
  }

This file has been truncated. show original

在移动端，模板中缺少这个颜色变量，所以你必须在这里添加样式：

github.com/VaperinaDEV/discourse-category-background-color

javascripts/discourse/templates/mobile/components/parent-category-row.hbs

22c37769c


      
          {{#unless this.isHidden}}
            <PluginOutlet @name="category-list-above-each-category" @args={{hash category=this.category}} />
            <div data-category-id={{this.category.id}} data-notification-level={{this.category.notificationLevelString}} style={{unless noCategoryStyle (concat (border-color category.color) (category-color-variable category.color))}} class="category-list-item category {{if this.isMuted "muted"}}">
              <table class="topic-list">
                <tbody>
                  <tr>
                    <th class="main-link">
                      <CategoryTitleLink @category={{this.category}} />
                    </th>
                  </tr>
                  {{#if this.category.description_excerpt}}
                    <tr class="category-description">
                      <td colspan="3">

之后，你可以使用 --category-color 变量，并执行与桌面端类似的操作：

github.com/VaperinaDEV/discourse-category-background-color

mobile/mobile.scss

main

@import "category-background-mixin";

.categories-list {
  
  // Category Lists
  .category-list {
    .category-list-item.category {
      position: relative;
      z-index: 0;
      &:before {
        @include category-before-style;
      }
    }
  }
  
  // Category Boxes
  .category-boxes-with-topics,
  .category-boxes {
    .category-box {
      position: relative;

This file has been truncated. show original

桌面端

移动端

MarcP · 2022 年9 月 12 日 15:55

你太棒了！

感谢你的解释，我将用它来玩一会儿！

Don · 2022 年9 月 12 日 16:21

嘿 @MarcP，抱歉我完全错过了你想要这个用于分类框。我已更新桌面 CSS 以便也能与分类框配合使用。

MarcP · 2022 年9 月 12 日 16:31

啊，谢谢，我已经在琢磨如何让这些框工作了！这比我想象的要复杂。非常感谢！

话题		回复	浏览量
Inconsistent use of --category-color variable in Default Theme? Support	2	531	2022 年10 月 11 日
Background color in categories page (Mobile version) Support	7	580	2020 年7 月 8 日
Change Color of Border Boxes on Categories UX	2	737	2020 年7 月 11 日
Adding Transparent Background Image To Categories Support	2	661	2021 年10 月 30 日
Access category color in SCSS Support pr-welcome	4	709	2022 年1 月 7 日

更改分类背景颜色为框

相关话题