CSS for read pinned topics

Support
1

Hi,

I’ve managed to figure out how to style pinned topics (background, font weight) in topic lists. Yay!

How do I make an exception for pinned topics that the user has already read? I still want them to be pinned, but I want them to revert to the normal, default styling.

This is what I have in the common CSS for my site so far:

.pinned {
    background: cornsilk;
    font-weight: bold;
}

How can I “undo” this for topics that the user has read?

Thanks!

2

Answering my own, probably pretty stupid and obvious question, for future reference:

.pinned {
    background: cornsilk;
    font-weight: bold;
}
.pinned.visited {
    background: transparent;
    font-weight: normal;
}

This does exactly what I wanted. Unread pinned posts really stand out.

UPDATE: This is even better, because it uses the theme’s color scheme, and will work with both light and dark styles:

.pinned {
    background: var(--highlight-low);
    font-weight: bold;
}
.pinned.visited {
    background: transparent;
    font-weight: normal;
}
5 Likes
3

Thank you for the code!

2 Likes
4

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