ボックスのカテゴリ背景色を変更

Don · 2022 年 9 月 12 日午後 3:45

こんにちは。

CSSと少しのテンプレート修正で可能です。

デスクトップでは、カテゴリの境界線に背景としても使用できる色変数があります。

これは--category-color変数で、境界線の色です。
Screenshot 2022-09-12 at 17.25.56

しかし、この変数は16進値であるため、透明度を設定することはできません。ただし、透明度を設定できる::before疑似要素に追加することはできます。

これをコンポーネントとして作成したので、インストールしたり、フォークして好きなように変更したりできます。

コンポーネント: 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

デスクトップ

モバイル

トピック		返信	表示
Inconsistent use of --category-color variable in Default Theme? Support	2	532	2022 年 10 月 11 日
Background color in categories page (Mobile version) Support	7	589	2020 年 7 月 8 日
Change Color of Border Boxes on Categories UX	2	737	2020 年 7 月 11 日
Adding Transparent Background Image To Categories Support	2	664	2021 年 10 月 30 日
Access category color in SCSS Support pr-welcome	4	711	2022 年 1 月 7 日

ボックスのカテゴリ背景色を変更

関連トピック