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

**URL:** https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710
**Category:** Development
**Tags:** topic-list-excerpts
**Created:** [12 Septiembre, 2023 11:25 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710 "2023-09-12T11:25:10Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [12 Septiembre, 2023 11:25 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710/1 "2023-09-12T11:25:10Z")

</div>

¡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.

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/8/218c66338523562339323707dcf621573b7fb3d1.png)

Gracias 🙂

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [12 Septiembre, 2023 12:42 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710/2 "2023-09-12T12:42:59Z")

</div>

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](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:

```scss
# 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:

```scss
# 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).

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

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [12 Octubre, 2023 12:43 UTC](https://meta.discourse.org/t/differentiate-contents-from-the-topic-list-rows-using-different-colors/278710/3 "2023-10-12T12:43:18Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.