Where to edit the 'Background color fade' on Forum List Items

(Michael) #1

Where can I edit the colour of the forum list background fade, for when you load the page.
Can’t seem to find it.


(Pad Pors) #2

you can either use a line of css code and put it in the /admin/customize/css_html panel or use the /admin/customize/colors panel and add new color theme.

or you may want to read more in some meta posts:

you’ll find more if you search more.

(Michael Wong) #3

THe thing is I have already customised all my colours - but the highlight is the default Discourse blue. Doesn’t seem to have a value for that?

(Pad Pors) #4

what do you mean bby highlight? may you show an image?
perhaps you can find out the corresponding css-id using inspect element.

(Michael Wong) #5

This highlight. It’s generated via Javascript on .topic-body

(Pad Pors) #6

i couldn’t find out the css class in the inspect-element as it’s a one moment color!

a simple guess is .alert div, which is light blue. you may like trying .alert{background-color: whatever} to see if it make any change, and then if it does, you need to find another class which is appropriate for topic-body (perhaps .topic-body .alert{}).

(cpradio) #7

Actually you want to override

.highlighted { background-color: ... }

(Joe Fedric) #8

This is no longer working. I looked for a newer topic, but didn’t find it. I’ve done extensive CSS modification to my install - this shouldn’t be failing.

Can someone take a look to see if this behavior has been modified in the js somewhere? It doesn’t seem to care what color I tell the class to be - defaults to discourse blue. I’m also working on a dark theme, and it’s pretty jarring.

(Rafael dos Santos Silva) #9

You can use this CSS to override the colors:

@keyframes background-fade-highlight {
    0% {
        background-color: #ffaa00 /* Pick a strong color, animation starts here */

    100% {
        background-color: #ffffff /* The default post background color*/

(Joe Fedric) #10


… this is what I suspected, but I wasn’t able to locate the CSS class I needed. I made my own @keyframes animations for the spinner and a few other elements on the install, so when the normal CSS wasn’t working, I figured it was an animation, or a JS thing. Thank you for confirming this for me, I was going a bit crazy looking for it.

(Rafael dos Santos Silva) #11

This was a JS animation that changed to pure CSS recently, so I believe that’s why you couldn’t find it.

(Joe Fedric) #12

As long as it works, idgaf!

Also, hopefully this helps anyone else that runs into this in the future :slight_smile: