ピン留めされたトピックをより目立たせる

[Json_Blob (Jason Costanza)]

Hello

I run a discourse forum for my cycling team. And I find that pinned topics don’t really stand out much. I naturally find myself looking for some seperation or divider, bold titles on the threads, highlighting… something.

Currently aside from the little pin icon, they look exactly like standard topics which I find a little lack-luster.

Note the top two topics are pinned, but they’re listed just like everything else. I’d love to see simply a good, heavy divider between pinned topics and everything else but I’m open to other ideas. I just feel like right now they blend in to the mix and don’t call attention to themselves at all once they’re “read”.

Thoughts?

[codinghorror (Jeff Atwood)]

You can certainly apply whatever CSS you like to make that so via admin, customize.

[Json_Blob (Jason Costanza)]

Ah ok, i’ll have to do some homework then on CSS because it’s not my strength.

Thanks for the direction

[dax (Daniela)]

To highlight pinned topics on the latest page just add in your /admin/customize/themes:

.topic-list-item.pinned {
    background: #ffffc9;
}

You can of course customize with CSS the pinned topics as you prefer once you know the class to use

[loginerror (Maciej Kuźmicz)]

カテゴリ表示（カテゴリと最新に設定）で表示されるピン留めトピックを同様に実現するにはどうすればよいでしょうか？

[dax (Daniela)]

There is no status class (.pinned) in this case. To target a pinned topic you need to use the id, eg

[data-topic-id="8"] {
    background: #ffffc9;
}

The CSS above target the topic globally everywhere, on /latest, on /categories and on topic, see:

To target only the categories + latest page you need to add the appropriate class

.navigation-categories.categories-list [data-topic-id="8"] {
    background: #ffffc9;
}

In this way the topic will be highlighted only on that page.

PS: to find the topic ID the simplest way is to open the dev console on your browser with F12:

[loginerror (Maciej Kuźmicz)]

@dax さん、ありがとうございます。なかなか良い解決策ですね。ただ、ピン留めされたトピックの更新が比較的早いため、少し不便に感じられる部分もあります。

[Sentinelrv]

@dax

カテゴリーと最新ページのみにターゲットを絞るには、適切なクラスを追加する必要があります。

.navigation-categories.categories-list [data-topic-id="8"] {
    background: #ffffc9;
}

こんにちは、これを試してみたのですが、何か問題があるようです。私が得た結果は以下の通りです…

スレッドのタイトルが隠されてしまう理由について、何か心当たりはありますか？

[awesomerobot (Kris)]

タイトルに多くのパディングを追加して、クリック領域を大きくしているためです。この値を少し調整して、以下の CSS でオーバーラップを回避できます。

.topic-list .main-link a.title {
    padding: 6px 0;
}

[Sentinelrv]

こんにちは、クリスさん。そのコードを追加しようと試みたのですが、特に変化が見られませんでした…

もしかして、何か見落としているのでしょうか？数値を変更してみましたが、それもうまくいきませんでした。

[dax (Daniela)]

そのサイトおよび特定のトピックへのリンクがあると便利です。

[Sentinelrv]

問題のトピックはこちら…

DONATE to the Peercoin Exchange Listing Fund - Let’s Expand Access to Peercoin!

[dax (Daniela)]

以下をお試しください：

.latest-topic-list-item .main-link a.title {
    padding: 6px 0;
}

[Sentinelrv]

@dax それで少なくともデスクトップのカテゴリ表示ではうまくいったようです。ただし、モバイルのカテゴリ表示ではまだそのようになっています…

また、最新の表示でも動作させることは可能でしょうか？現状ではカテゴリ表示でのみ機能しています。

[dax (Daniela)]

以下でお試しください

.mobile-view .topic-list .main-link a.title {
    padding: 3px 0;
}

@Sentinelrv

また、最新ビューでも動作させる方法はありますか？現時点ではカテゴリビューでのみ動作しています。

こちらをご覧になりましたか？

Highlight pinned topics better

There is no status class (.pinned) in this case. To target a pinned topic you need to use the id, eg [data-topic-id="8"] { background: #ffffc9; } The CSS above target the topic globally everywhere, on /latest, on /categories and on topic, see: [image] [image] [image] To target only the categories + latest page you need to add the appropriate class .navigation-categories.categories-list [data-topic-id="8"] { background: #ffffc9; } In this way the topic will be highlighted only on…

以下も追加する必要があります

[data-topic-id="9582"] {
    background: #fffff0;
}

[Sentinelrv]

@dax

こちらをお読みになりましたか？

はい、読みましたが、すべての投稿を含むスレッド全体がハイライトされるのはあまり好ましくありませんでした。カテゴリと最新の表示ではトピックタイトルのみをハイライトし、スレッド自体はハイライトしたくなかったのです。他に方法がないのであれば、そうします。

ところで、そのモバイル用のコードで問題が解決したようです。