Json_Blob
20 Novembro , 2018 02:14
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.
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 Curtiram
You can certainly apply whatever CSS you like to make that so via admin, customize.
3 Curtiram
Json_Blob
20 Novembro , 2018 06:20
3
Ah ok, i’ll have to do some homework then on CSS because it’s not my strength.
Thanks for the direction
dax
20 Novembro , 2018 10:27
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
12 Curtiram
loginerror
17 Abril , 2019 12:41
5
What would be the way to achieve the same for the pinned topics visible in the Category view (set to Category and Latest)?
dax
17 Abril , 2019 14:15
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:
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:
6 Curtiram
loginerror
17 Abril , 2019 14:26
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.
dax:
Para direcionar apenas as categorias + a página mais recente, você precisa adicionar a classe apropriada
.navigation-categories.categories-list [data-topic-id="8"] {
background: #ffffc9;
}
Olá, tentei isso, mas algo parece estar errado. Este é o resultado que obtenho…
Alguma ideia do por que o título do tópico está sendo coberto?
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 Curtiram
Oi, Kris. Tentei adicionar esse código, mas não pareceu fazer nenhuma diferença…
Será que estou esquecendo de algo? Tentei mudar os números também, mas não pareceu fazer nada.
dax
9 Agosto , 2019 09:31
11
Um link para seu site e para aquele tópico específico seria útil.
1 Curtiu
Aqui está o tópico em questão…
Exchange Expansion Many of you in the community have been asking for a while now what we have been doing to get Peercoin listed on more exchanges. Lack of access to more exchanges with high trading volume has been one of Peercoin’s biggest problem...
Reading time: 3 mins 🕑
Likes: 24 ❤
dax
12 Agosto , 2019 10:40
13
Tente com:
.latest-topic-list-item .main-link a.title {
padding: 6px 0;
}
4 Curtiram
@dax parece que funcionou, pelo menos no desktop na visualização de categorias. Na visualização de categorias no celular, ainda está acontecendo…
Além disso, há alguma maneira de fazer funcionar na visualização mais recente? Até agora, está funcionando apenas na visualização de categorias.
dax
19 Agosto , 2019 16:59
15
Tente com
.mobile-view .topic-list .main-link a.title {
padding: 3px 0;
}
Você leu aqui?
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…
Você também precisa adicionar
[data-topic-id="9582"] {
background: #fffff0;
}
1 Curtiu
dax:
Você leu aqui?
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.
