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

Product Support

AI-generated summary

LilTrashPanda is seeking help to update the “Fade Out” effect on the row of the last visited Topic in the Topic List. The effect’s color defaults to the Tertiary color setting, but they need to change it to match their category’s theme.

sam provided the code location and suggested overriding the .highlighted CSS class to achieve this. LilTrashPanda attempted to update the CSS but lost the fade-out transition effect.

Falco suggested moving the highlight code to CSS animation, which would help with customizations. They created a pull request to change post and topic highlights to CSS.

Falco provided an example of how to update the color using CSS animation. cpradio suggested how to apply the change to a specific category.

LilTrashPanda implemented the solution and achieved the desired effect, but will need to fine-tune their theme due to layered transparencies.

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:

2016-12-02-13-51-06.gif500×376 2.48 MB

Edited title for clarity.

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:

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

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.

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

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