CSS change no longer working (glow around avatar)

I had this added to my themes for about 6 months now and it worked fine, it added a bold golden glow around specific usergroups

.group-Owner>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}
.group-Admin>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}
.group-Lead>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}

However at some point, I have no idea when (I also had Santa Hats that disappeared and I’ve been told that happened a week ago and I hadn’t noticed, both were CSS adds so I’m assuming at the same time). I know literally nothing about CSS other then adding and tweaking existing edits. If this was from an update that changed something, what should I change to reenable it? Or if it still looks fine, what could possibly have broken this?

2 Likes

I haven’t been able to find the page where that css would add the glow you specify. However, if you’re interested in adding that bold, golden glow to the avatar image of a topic owner on their posts, you could use this:

.topic-owner > article > .row > .topic-avatar > .post-avatar > a > img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}

If you can provide a screen shot of the page you’re working on, where this worked previously, I might be able to help with that more specifically.

– EDIT –

What template were you using this on?

1 Like

Just a guess, but have you tried using .post-avatar instead of .topic-avatar? This might be at least part of the problem (if not all of it).

On desktop, that former class became embedded in the latter during the course of this year and stopped the Christmas hats CSS working too (see related solution here: Christmas hats! - #19 by merefield)

Do always use your browser’s inspector to look at the HTML (right-click → Inspect). This can give you big hints as to what is going on!

4 Likes