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

MarcP · 2022 年 9 月 12 日午前 8:49

カテゴリボックスのカテゴリカラーの背景を変更する方法を見つけるのに苦労しています。

目標は、メインのカテゴリカラーを継承し、背景に透明度を追加することです。

これを達成する方法を知っている人はいますか？

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

デスクトップ

モバイル

MarcP · 2022 年 9 月 12 日午後 3:55

最高です！

説明ありがとうございます。しばらくこれで遊んでみます！

Don · 2022 年 9 月 12 日午後 4:21

@MarcPさん、すみません、カテゴリボックスのためにこれを求めていたことに完全に気づきませんでした。カテゴリボックスでも動作するようにデスクトップCSSを更新しました。

MarcP · 2022 年 9 月 12 日午後 4:31

ありがとうございます。箱を機能させる方法をすでに考えていました。思ったよりも複雑でした。大変感謝しています！

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

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

関連トピック