Highlight pinned topics better

Внести вклад UX
1

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.

image
image.png1159×372 36.5 KB

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?

2 лайка
2019: The Year in Review
2

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

3 лайка
3

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

Thanks for the direction :slight_smile:

4

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

image
image1401×331 45.7 KB

12 лайков
5

What would be the way to achieve the same for the pinned topics visible in the Category view (set to Category and Latest)?

image
image1424×173 19.7 KB

6

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
image1328×271 15.1 KB

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 that page.

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

image
image1466×686 75.4 KB

6 лайков
7

Thanks @dax, it’s a nice solution, although we do have a rather quick rotation of pinned topics which makes it a bit less convenient.

8

Привет, я попробовал это, но что-то пошло не так. Вот что у меня получилось…

ThreadHighlight
ThreadHighlight852×228 20.9 KB

Есть ли у кого-нибудь идея, почему заголовок темы перекрывается?

9

Это связано с тем, что мы добавляем много отступов к заголовкам, чтобы сделать их область клика больше. Вы можете немного изменить это, чтобы избежать наложения с

.topic-list .main-link a.title {
    padding: 6px 0;
}
6 лайков
10

Привет, Крис. Я пытался добавить этот код, но, похоже, ничего не изменилось…

CSS
CSS600×688 124 KB

Может быть, я что-то упускаю? Я также пробовал менять цифры, но это тоже не помогло.

11

Ссылка на ваш сайт и на эту конкретную тему была бы полезна.

1 лайк
12

Вот обсуждаемая ветка…

13

Попробуйте следующее:


.latest-topic-list-item .main-link a.title {
    padding: 6px 0;
}
4 лайка
14

@dax Похоже, это сработало, по крайней мере, на рабочем столе в представлении категорий. В мобильной версии в представлении категорий проблема всё ещё сохраняется…

photo_2019-08-19_10-36-36
photo_2019-08-19_10-36-36591×1280 74.9 KB

Также, есть ли способ заставить это работать в представлении «Последнее»? Пока что это работает только в представлении категорий.

15

Попробуйте использовать

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

Вы читали это?

Вам также нужно добавить

[data-topic-id="9582"] {
    background: #fffff0;
}
1 лайк
16

Да, но мне не очень понравилось, что выделена вся тема целиком, включая все сообщения. Я пытался выделить только заголовок темы в категории и при последнем просмотре, но не саму тему. Если другого способа нет, то я так и сделаю.

Кстати, тот мобильный код, похоже, решил проблему.