# CSS for read pinned topics

**URL:** <https://meta.discourse.org/t/css-for-read-pinned-topics/189692>\
**Category:** Support\
**Created:** [May 7, 2021, 6:59pm UTC](https://meta.discourse.org/t/css-for-read-pinned-topics/189692 "2021-05-07T18:59:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gunnar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gunnar/32/119647_2.png) [@Gunnar](https://meta.discourse.org/u/Gunnar)\
**Post date:** [May 7, 2021, 6:59pm UTC](https://meta.discourse.org/t/css-for-read-pinned-topics/189692/1 "2021-05-07T18:59:08Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Gunnar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gunnar/32/119647_2.png) [@Gunnar](https://meta.discourse.org/u/Gunnar)\
**Post date:** [May 7, 2021, 8:20pm UTC](https://meta.discourse.org/t/css-for-read-pinned-topics/189692/2 "2021-05-07T20:20:37Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)\
**Post date:** [May 7, 2021, 8:26pm UTC](https://meta.discourse.org/t/css-for-read-pinned-topics/189692/3 "2021-05-07T20:26:20Z")

</div>

Thank you for the code!

---

<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:** [June 6, 2021, 8:27pm UTC](https://meta.discourse.org/t/css-for-read-pinned-topics/189692/4 "2021-06-06T20:27:21Z")

</div>

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