Destaque melhor os tópicos fixados

Contribuir Experiência do Usuário
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 curtidas
2019: The Year in Review
2

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

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

Olá, tentei isso, mas algo parece estar errado. Este é o resultado que obtenho…

ThreadHighlight
ThreadHighlight852×228 20.9 KB

Alguma ideia do por que o título do tópico está sendo coberto?

9

Isso ocorre porque adicionamos bastante espaçamento interno aos títulos para proporcionar uma área de clique maior. Você pode ajustar isso um pouco para evitar a sobreposição com

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

Oi, Kris. Tentei adicionar esse código, mas não pareceu fazer nenhuma diferença…

CSS
CSS600×688 124 KB

Será que estou esquecendo de algo? Tentei mudar os números também, mas não pareceu fazer nada.

11

Um link para seu site e para aquele tópico específico seria útil.

1 curtida
12

Aqui está o tópico em questão…

13

Tente com:


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

@dax parece que funcionou, pelo menos no desktop na visualização de categorias. Na visualização de categorias no celular, ainda está acontecendo…

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

Além disso, há alguma maneira de fazer funcionar na visualização mais recente? Até agora, está funcionando apenas na visualização de categorias.

15

Tente com

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

Você leu aqui?

Você também precisa adicionar

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

Sim, mas não gostei muito de todo o tópico ficar destacado, incluindo todas as mensagens. Eu estava tentando destacar apenas o título do tópico na categoria e na visualização mais recente, mas não o próprio tópico. Se não houver outra maneira, farei isso.

Aliás, aquele código para dispositivos móveis parece ter resolvido o problema ali.