Mieux mettre en évidence les sujets épinglés

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 « J'aime »

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

3 « J'aime »

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

Thanks for the direction :slight_smile:

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 « J'aime »

Comment procéder pour obtenir le même résultat pour les sujets épinglés visibles dans la vue par catégorie (réglée sur « Catégorie » et « Derniers ») ?

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 « J'aime »

Merci @dax, c’est une bonne solution, bien que nous ayons une rotation assez rapide des sujets épinglés, ce qui la rend un peu moins pratique.

Bonjour, j’ai essayé cela mais il semble y avoir un problème. Voici le résultat que j’obtiens…

Avez-vous une idée de pourquoi le titre du sujet est masqué ?

C’est parce que nous ajoutons beaucoup de remplissage aux titres pour leur donner une grande zone cliquable. Vous pouvez ajuster cela un peu pour éviter le chevauchement avec

.topic-list .main-link a.title {
    padding: 6px 0;
}
6 « J'aime »

Bonjour Kris. J’ai essayé d’ajouter ce code, mais cela n’a semblé apporter aucune différence…

Y a-t-il peut-être quelque chose que j’aurais manqué ? J’ai aussi essayé de modifier les chiffres, mais cela n’a semblé avoir aucun effet.

Un lien vers votre site et vers ce sujet en particulier serait utile.

1 « J'aime »

Voici le fil de discussion concerné…

Essayez avec :


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

4 « J'aime »

@dax Cela semble avoir fonctionné, du moins sur la vue des catégories pour les ordinateurs de bureau. Sur la vue des catégories pour mobile, cela continue de poser problème…

Par ailleurs, existe-t-il un moyen de le faire fonctionner sur la vue « Derniers sujets » ? Pour l’instant, cela ne fonctionne que sur la vue des catégories.

Essayez avec

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

Avez-vous lu ceci ?

Vous devez également ajouter

[data-topic-id="9582"] {
    background: #fffff0;
}
1 « J'aime »

Oui, mais je n’ai pas particulièrement aimé que tout le fil de discussion soit mis en surbrillance, y compris tous les messages. Je cherchais à ne mettre en surbrillance que le titre du sujet sous la catégorie et la dernière vue, mais pas le fil lui-même. S’il n’y a pas d’autre moyen, je le ferai.

Au fait, ce code mobile semble avoir résolu le problème là-bas.