How to set text color of topic that was read already?

Dev
1

How to set text color of topic that was read already in the list of topics? It is grayed out too much and it hurts usability.

1 Like
2

You probably won’t be surprised that this can be done with a CSS customization :slight_smile:

The general approach to find these is to :one: right-click the element you want to customize, select Inspect :two: and look for the CCS classes :three:. Then, you write CCS to target this (your favorite search engine will help you), and test it by directly injecting it in your browser :four:.

Pasted image1730Ă—523 107 KB

Once you’re done, simply apply it in site settings.

In this case, the following will make these topics appear red:

.title.visited {
    color: #FF0000 !important;
}

Pasted image1723Ă—272 38.3 KB

8 Likes
6

this seems to be outdated has “title visited” doesn’t seem to show up anymore, and trying it does nothing

additionally, how would one change the color for topics that do have unread posts?

i tried using inspect element but the class in both scenarios is simply called “title” and changing that one seems to change the color off ALL posts, regardless if there are unread posts or not

1 Like
7

Looks like you now can use the selector .topic-list-item.visited .title.

There is also unseen-topic und new-posts :slight_smile:

2 Likes
8

@fefrei thanks for the new selectors! one more question. i’m trying to also change the color of the number that represents post replies. but i notice that those can have different colors too. there’s the regular color but i see that some of them are orange which represents the high like to post ratio. it’s the same situation as the read/unread post thing. any ideas on how to separately manage the colors here? (also, is there a way to find out if there are any other colors that this could be? I’ve only seen orange so far)

9

I’m on mobile right now, so I cannot check this for you, but as a general guideline: Try looking at the element you want to style in your browsers’s inspector, and look for useful classes. If you are missing information, walk up the tree (to each element’s parent element) and check each one – for example, in the title-case above, the visited only showed up a few elements up the three, at the element representing the whole row :slight_smile: