Diferenciar contenidos de las filas de la lista de temas usando diferentes colores

[Renato_Mendes]

¡Hola a todos! Esta es una solución interesante. Me preguntaba si sería posible establecer un color de fondo ligeramente diferente para el título y las etiquetas, para que sea más fácil identificar el siguiente tema. Tal como está ahora, siento que es bastante confuso, porque todo se ve casi igual.

Gracias

[Canapin (Coin-coin le Canapin)]

Hola Renato
Puedes apuntar a estos elementos con las herramientas de desarrollador de tu navegador, puedes leer sobre ello aquí:

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#browser-inspection-tools-7

Sin embargo, cómo se estilizan estos elementos utiliza muchos selectores diferentes a través de anidamiento del código SCSS original.

Empezaría con el CSS compilado y lo ajustaría si tiene efectos no deseados:

Temas con publicaciones no leídas:

# titles
.topic-list-main-link a.title,
.latest-topic-list-item .main-link a.title,
.topic-list .main-link a.title {
    color: var(--primary);
}

# categories
.badge-wrapper.bullet span.badge-category {
    color: var(--primary-high);
}

# tags
.topic-list-item.visited .topic-list-data a.discourse-tag, .latest-topic-list-item.visited a.discourse-tag, .category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Temas visitados:

# titles
.topic-list-item.visited .topic-list-data a.title:not(.badge-notification),
.latest-topic-list-item.visited a.title:not(.badge-notification),
.category-topic-link.visited a.title:not(.badge-notification) {
    color: var(--primary-medium);
}

# categories
.topic-list-item.visited .topic-list-data span.badge-category,
.latest-topic-list-item.visited span.badge-category,
.category-topic-link.visited span.badge-category {
    color: var(--primary-medium);
}

#tags
.topic-list-item.visited .topic-list-data a.discourse-tag,
.latest-topic-list-item.visited a.discourse-tag,
.category-topic-link.visited a.discourse-tag {
    color: var(--primary-medium);
}

Los extractos no tienen un estilo específico para temas visitados (pero se puede ajustar con CSS adicional).

.topic-list .topic-excerpt {
    color: var(--primary-high);
}