更好地突出置顶主题

[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)]

这是因为我们在标题上添加了大量内边距，以提供较大的点击区域。你可以通过以下方式稍作调整，以避免重叠：

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

[Sentinelrv]

你好，Kris。我尝试添加了那段代码，但似乎没有任何变化……

是不是我漏掉了什么？我也尝试过修改数字，但似乎也没有任何效果。

[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

你读过这里吗？

是的，但我不太喜欢整个线程（包括所有帖子）都被高亮显示。我原本只想让主题标题在分类和最新查看中高亮，而不是整个线程。如果没有其他办法，那我只能这样做了。

顺便一提，那段移动端的代码似乎已经解决了那里的问题。