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 Likes
2

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

3 Likes
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 Likes
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 Likes
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

Hi, I tried this but something seems to be wrong. This is the result I get…

ThreadHighlight
ThreadHighlight852×228 20.9 KB

Any idea why the thread title is being covered up?

9

It’s because we add a lot of padding to titles to give them a big click target. You can adjust this a little bit to avoid the overlap with

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

Hi Kris. I did try to add that code in and it didn’t seem to do anything different…

CSS
CSS.png600×688 124 KB

Is there maybe something I am missing? I tried changing the numbers too, but that didn’t seem to do anything.

11

A link to your site and to that particular topic would be useful.

1 Like
12

Here is the thread in question…

13

Try with:


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

@dax that seems to have worked, at least for desktop on categories view. On categories view on mobile it is still doing it…

photo_2019-08-19_10-36-36
photo_2019-08-19_10-36-36.jpg591×1280 74.9 KB

Also, is there anyway to get it to work on latest view? So far it is just working on category view.

15

Try with

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

Have you read here?

You need to add also

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

Yes, but I didn’t particularly like the entire thread being highlighted, including all the posts. I was trying to only make the topic title highlighted under category and latest view, but not the thread itself. If there is no other way then I will do that.

By the way, that mobile code seems to have fixed the problem there.