# How to update "Fade Out" effect on recently visited Topic row?

**URL:** https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720
**Category:** Support
**Created:** [12월 2, 2016, 9:56오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720 "2016-12-02T21:56:45Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [12월 2, 2016, 9:56오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/1 "2016-12-02T21:56:45Z")

</div>

Hi everyone!

I’ve been scratching my head over this one for quite a few weeks now, so figured I’d stop by and see if anyone else knows the answer to this. I’m attempting to update the “Fade Out” effect that’s applied to the row of the last Topic you visited in the Topic List. Right now, it seems the fadeout color defaults to whatever your Tertiary setting is in your color scheme; however, since I’m separating each Category on my forum into its own brand, I need the ability to update that color to better match its category’s theme.

Here’s a quick GIF I created where I back out of a topic and use my cursor to circle the effect I’m trying to find the CSS for so I can alter it. Any help would be super appreciated; thanks for reading! 🙂

 ![](https://global.discourse-cdn.com/meta/original/3X/6/5/652e641b0e057f3bd104d08821fd15c82393f772.gif)

* * *

_Edited title for clarity._

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12월 2, 2016, 10:31오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/2 "2016-12-02T22:31:56Z")

</div>

I believe that’s done with JavaScript.

---

<div class="post-metadata">

### Author: ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [12월 2, 2016, 10:33오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/3 "2016-12-02T22:33:31Z")

</div>

I’m not very familiar with javascript or how to edit it, unfortunately… could you provide some direction on how I can go about updating this, if it’s possible through the current customization options provided in the Admin panel?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 5, 2016, 5:52오전 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/4 "2016-12-05T05:52:38Z")

</div>

The code you are looking for is:

> <https://github.com/discourse/discourse/blob/6387acc6490fa99748780f48b7d60847a914fecf/app/assets/javascripts/discourse/components/topic-list-item.js.es6#L129-L139>

So what you want to do is override the `.highlighted` CSS class for the element.

---

<div class="post-metadata">

### Author: ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [12월 5, 2016, 7:00오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/5 "2016-12-05T19:00:18Z")

</div>

Thanks so much, Sam!

I’ve updated my CSS with the following:

```plaintext
body.category-XXX-bugs .highlighted {
    background-color: rgba(255,255,255,0.7)!important;
}

```

But this is the effect I get, rather than the nice fade-out transition that’s there normally. Do you have any suggestions on how to maintain the effect along with updating the color?

[https://gfycat.com/ScalyNastyKitten](https://gfycat.com/ScalyNastyKitten)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [12월 5, 2016, 7:40오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/6 "2016-12-05T19:40:07Z")

</div>

What about moving this highlight code to CSS animation? I think It would help with customizations.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [12월 5, 2016, 10:35오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/7 "2016-12-05T22:35:45Z")

</div>

Went ahead and changed post and topic highlights to CSS:

[https://github.com/discourse/discourse/pull/4590](https://github.com/discourse/discourse/pull/4590)

If this change gets merged, this will help your use case. Adding some CSS like this:

```CSS
@keyframes background-fade-highlight {
  0% {
    background-color: gold; //new color!
  }
  100% {
    background-color: transparent;
  }
}

```

will be enough.

---

<div class="post-metadata">

### Author: ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [12월 5, 2016, 10:54오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/8 "2016-12-05T22:54:40Z")

</div>

Thank you for adding that!

I seem to have some other weird stuff going on, since adding in that CSS into the “CSS” tab under Admin doesn’t seem to result in any change. Looks like it’ll get merged, so once the next update is out, I’ll try and give it another shot then (unless I’m supposed to be inserting that code into another tab, in which case that’d be an easy fix).

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [12월 5, 2016, 11:05오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/9 "2016-12-05T23:05:32Z")

</div>

That would change the highlight animation for all, if you wanted to do it for a specific category you’d have to use

```plaintext
body.category-XXX-bugs .highlighted {
    animation: cat-XXX-background-fade-highlight 2.5s ease-out;
}

@keyframes cat-XXX-background-fade-highlight {
  0% {
    background-color: gold; //new color for cat XXX!
  }
  100% {
    background-color: transparent;
  }
}

```

---

<div class="post-metadata">

### Author: ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [12월 5, 2016, 11:36오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/10 "2016-12-05T23:36:01Z")

</div>

Perfect! The missing piece was the “animation” within the .highlighted bit.

It totally works now, though I’ll need to fine-tune some things since I use a lot of layered transparencies in my theme. Couldn’t be happier to get rid of that horrid brown highlight. Thank you again, Discourse team! ❤

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6월 8, 2024, 12:45오후 UTC](https://meta.discourse.org/t/how-to-update-fade-out-effect-on-recently-visited-topic-row/53720/11 "2024-06-08T12:45:08Z")

</div>

이 주제는 2744일 후 자동으로 닫혔습니다. 더 이상 새 답변을 게시할 수 없습니다.
