I’m styling my discourse instance using the CSS customization. How do I change the color of the hint “highlight” that happens when scrolling, viewing a topic, going back to a topic list, etc.?
How to change the "highlight" color
Aha, that definitely needs to be an /admin
setting. @Neil can you add it to your list?
Why admin setting? we should just suck it out of CSS, then you can CSS override it.
Sure, if that is possible. It wasn’t really possible the way we did click fade highlights on SE.
I have a small question that why don’t we assign that color variable class then we can override that variable easily instead of inline css by using jQuery.
Also, just to be clear, we need to be able to control the text color as well. The biggest issue with it now with my dark theme is it’s changing the text from black to white, causing this weird flashing issue.
Edit Here is a video showing what I mean, so it’s crystal clear:
Hey @Neil I see you have done some work on this. 2 comments so far:
- This needs to be applied to the topic list as well, not just the topic page.
- I tried simply
red
as thebackground-color
and it stays red for the whole animation then it goes back to the original color. It might be because I had to use!important
to get it to recognize.
Edit: #2 is caused by the !important
. Why doesn’t .topic-body .contents.highlighted { background-color: red; }
in the customization work? Is the customization CSS running too late for the javascript?
Oops, yeah I forgot that one. Thanks.
I was able to customize the highlight colour like so:
.topic-body.highlighted, #topic-list .topic-list-item.highlighted {
background-color: green;
}
This doesn’t work for me - the topic list does but not the post. Any ideas?
The previous solutions don’t work anymore. This one does:
@keyframes background-fade-highlight {
0% {
background-color: green;
}
100% {
background-color: transparent;
}
}