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.

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

6

Isso parece estar desatualizado: o “título visitado” não aparece mais, e tentar fazê-lo não produz nenhum efeito.

Além disso, como alterar a cor dos tópicos que têm posts não lidos?

Tentei usar o inspecionar elemento, mas a classe em ambos os cenários é simplesmente chamada de “title”, e alterá-la parece mudar a cor de TODOS os posts, independentemente de haver ou não posts não lidos.

7

Parece que agora vocĂŞ pode usar o seletor .topic-list-item.visited .title.

Também existem unseen-topic e new-posts :slight_smile:

8

@fefei obrigado pelos novos seletores! Mais uma pergunta. Estou tentando também alterar a cor do número que representa as respostas ao post. Mas notei que esses números podem ter cores diferentes. Existe a cor regular, mas vejo que alguns são laranja, o que representa uma alta proporção de curtidas em relação aos posts. É a mesma situação que a dos posts lidos/não lidos. Alguma ideia de como gerenciar as cores separadamente aqui? (Além disso, há uma maneira de descobrir se existem outras cores possíveis para isso? Até agora só vi o laranja)

9

Estou no celular agora, então não posso verificar isso para você, mas como uma diretriz geral: tente olhar para o elemento que deseja estilizar no inspetor do seu navegador e procure por classes úteis. Se estiver faltando informações, suba na árvore (para o elemento pai de cada elemento) e verifique cada um – por exemplo, no caso title acima, o visited apareceu apenas alguns elementos acima na árvore, no elemento que representa a linha inteira :slight_smile: