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 th…

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: go…

I believe that’s done with JavaScript.

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?

The code you are looking for is: app/assets/javascripts/discourse/components/topic-list-item.js.es6 6387acc64 highlight(opts = { isLastViewedTopic: false }) { const $topic = this.$(); const originalCol = $topic.css('backgroundColor'); …

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 …

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% { ba…

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 ins…

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! …

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

Product Support

Falco (Falco) December 5, 2016, 7:40pm 6

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

Topic		Replies	Views
Turning off the highlight/fade on topics Product Support	1	908	November 21, 2019
jQuery(?) fade effect override Development	3	879	April 20, 2020
How to remove the fade-out effect when you enter a topic Product Support	1	1312	July 18, 2019
Remove background color change after page loading Product Support	1	918	December 3, 2020
Tips on how to highlight topics from a category? Product Support	2	347	April 26, 2024

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

Related topics