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

support
1

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! :slight_smile:

Edited title for clarity.

1 Like
2

I believe that’s done with JavaScript.

3

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?

4

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.

4 Likes
5

Thanks so much, Sam!

I’ve updated my CSS with the following:

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

6

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

3 Likes
7

Went ahead and changed post and topic highlights to CSS:

https://github.com/discourse/discourse/pull/4590

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

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

will be enough.

8 Likes
8

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).

9

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

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;
  }
}
6 Likes
10

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! :heart:

3 Likes