Differentiate contents from the topic list rows using different colors

Development

AI-generated summary

Ranato_Mendes suggests setting a different background color for topic titles and tags to improve readability. In response, Canapin provides guidance on how to target these elements using the browser’s dev tools and offers examples of SCSS code used for styling topics, categories, and tags, both for visited and unvisited states.

1

Hey, guys! This is an interesting solution. I was wondering if it would be possible to set a slightly different background color for title and tags, so it gets easier to identify the next topic. As it is now, I feel it’s quite confusing, 'cause everything looks almost the same.

image
image1042×724 85.4 KB

Thanks :slight_smile:

2

Hi Renato :wave:

You can target these elements with your browser’s dev tools, you can read about it here:

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

However, how these elements are styled use many different selectors through nesting from the original SCSS code.

I’d start with the compiled CSS and tweak it if it has unintended effects:

Topics with unread posts:

# 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);
}

Visited topics:

# 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);
}

Excerpts have no specific style for visited topics (but it can be tweaked with additional CSS).

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