Resaltar mejor los temas fijados

Contribuir 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
image1159×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 Me gusta
2019: The Year in Review
2

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

3 Me gusta
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 Me gusta
5

¿Cuál sería la forma de lograr lo mismo para los temas fijados visibles en la vista de Categoría (configurada como Categoría y Más recientes)?

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
image555×314 16.5 KB

image
image1328×271 15.1 KB

image
image517×399 19.1 KB

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 Me gusta
7

Gracias @dax, es una buena solución, aunque tenemos una rotación bastante rápida de temas fijados, lo que lo hace un poco menos conveniente.

8

Hola, lo intenté pero parece que algo está mal. Este es el resultado que obtengo…

ThreadHighlight
ThreadHighlight852×228 20.9 KB

¿Alguna idea de por qué el título del hilo está siendo ocultado?

9

Es porque añadimos mucho relleno a los títulos para darles un área de clic grande. Puedes ajustarlo un poco para evitar el solapamiento con

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

Hola Kris. Intenté agregar ese código y no pareció hacer ninguna diferencia…

CSS
CSS600×688 124 KB

¿Quizás me estoy perdiendo algo? También intenté cambiar los números, pero eso tampoco pareció hacer nada.

11

Sería útil un enlace a tu sitio y a ese tema en particular.

1 me gusta
12

Aquí está el hilo en cuestión…

13

Prueba con:


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

@dax eso parece haber funcionado, al menos en la vista de categorías para escritorio. En la vista de categorías en móvil, todavía está ocurriendo…

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

Además, ¿hay alguna forma de que funcione en la vista más reciente? Hasta ahora solo está funcionando en la vista de categorías.

15

Prueba con

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

¿Has leído esto?

También necesitas agregar

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

Sí, pero no me gustó especialmente que se resaltara todo el hilo, incluyendo todos los mensajes. Intentaba solo que el título del tema estuviera resaltado bajo la categoría y la última vista, pero no el hilo en sí. Si no hay otra forma, lo haré así.

Por cierto, ese código móvil parece haber solucionado el problema allí.