Json_Blob
20 Novembre 2018, 2:14am
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 Mi Piace
You can certainly apply whatever CSS you like to make that so via admin, customize.
3 Mi Piace
Json_Blob
20 Novembre 2018, 6:20am
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 Novembre 2018, 10:27am
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 Mi Piace
loginerror
17 Aprile 2019, 12:41pm
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 Aprile 2019, 2:15pm
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 Mi Piace
loginerror
17 Aprile 2019, 2:26pm
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:
Per selezionare solo le categorie + la pagina più recente, devi aggiungere la classe appropriata
.navigation-categories.categories-list [data-topic-id="8"] {
background: #ffffc9;
}
Ciao, ho provato questo ma sembra che ci sia qualcosa che non va. Questo è il risultato che ottengo…
Hai idea del motivo per cui il titolo del thread viene coperto?
È perché aggiungiamo molto padding ai titoli per offrire un’area cliccabile ampia. Puoi regolarlo leggermente per evitare la sovrapposizione con
.topic-list .main-link a.title {
padding: 6px 0;
}
6 Mi Piace
Ciao Kris. Ho provato ad aggiungere quel codice, ma non sembra aver prodotto alcuna differenza…
Forse c’è qualcosa che mi sfugge? Ho provato a cambiare anche i numeri, ma anche quello non sembra aver fatto nulla.
dax
9 Agosto 2019, 9:31am
11
Un link al tuo sito e a quel particolare argomento sarebbe utile.
1 Mi Piace
Ecco il thread in questione…
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:40am
13
Prova con:
.latest-topic-list-item .main-link a.title {
padding: 6px 0;
}
4 Mi Piace
@dax sembra che abbia funzionato, almeno per la visualizzazione desktop delle categorie. Nella visualizzazione delle categorie su mobile, però, continua a farlo…
Inoltre, c’è un modo per farlo funzionare anche nella visualizzazione “latest”? Finora funziona solo nella visualizzazione delle categorie.
dax
19 Agosto 2019, 4:59pm
15
Prova con
.mobile-view .topic-list .main-link a.title {
padding: 3px 0;
}
Hai letto qui?
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…
Devi aggiungere anche
[data-topic-id="9582"] {
background: #fffff0;
}
1 Mi Piace
dax:
Hai letto qui?
Sì, ma non mi è piaciuto particolarmente che l’intera discussione fosse evidenziata, inclusi tutti i post. Stavo cercando di evidenziare solo il titolo dell’argomento sotto la categoria e la visualizzazione più recente, ma non la discussione stessa. Se non c’è un altro modo, lo farò.
A proposito, quel codice per dispositivi mobili sembra aver risolto il problema lì.
