SCSSでカテゴリカラーにアクセスする

サポート
1

こんにちは、

カスタムテーマ作成の初挑戦ですので、ご容赦ください。

カテゴリ一覧ページのデザインをカスタマイズしようとしています。目指す見た目は以下の通りです：

image
image614×319 40.7 KB

左側のボーダーを削除し、「ピル」を追加するのが狙いです。

ピルを追加する SCSS は比較的簡単です：

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

しかし、以下のページで利用可能なカテゴリの色に CSS からアクセスする方法がわかりません：

image
image610×176 10.2 KB

その色を CSS から簡単に取得する方法はありますか？

2

現時点では、それを簡単に行う方法はありません。

対応策として、インライン設定ではなくこれらの色を CSS カスタムプロパティに移動させることができます。これにより、あらゆる CSS/SCSS から色を簡単に参照できるようになります。いつその作業が可能になるかはわかりませんが、タスクリストに追加しておきます。

3

それは素晴らしいですね :slight_smile:
余談ですが、私が目指すビューを実現する他の方法はありませんか？
Discourse の特定の部分をオーバーライドできるという記事を読みました。どのテンプレートファイルをオーバーライドすればよいのか、またカスタムテーマでどのように実装すればよいのか教えていただけますか？

4

現在の回避策は、components/parent-category-row テンプレートをオーバーライドすることです。
以下のように、追加の div 要素を追加しています：

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

将来テンプレートが変更される可能性があるため、テンプレートのオーバーライドは避けたいと考えています。

@awesomerobot カテゴリ色にアクセスできるビルトイン機能があると素晴らしいです :slight_smile:

5

@tjot、

::after疑似要素の境界線を使用して、目的の効果を得るCSSハックが可能です。

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;

        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }
    }
}

image
image1080×738 130 KB

スタイルは、インラインスタイルが適用されたtdの直接の子であるタイトルのh3要素に直接適用しました。そのため、テンプレートから削除された場合はCSSを調整する必要があります。

ただし、希望どおりcomponents/parent-category-rowの上書きをスキップできます。