CSS change no longer working (glow around avatar)

Dev
1

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
2

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
3

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
4

Wow I completely forgot I asked this when I moved on to other things and still never readded it. Sorry about that.

It wasn’t glowing me specifically as a user, it was glowing my usergroup which is “Owner”, as well as “admin” and “Lead”. I didn’t come up with it, someone posted it in a topic here at one time and I copy+pasted it and it worked as I described which is why I have no idea what (or why). The code you posted works perfectly (I just tried it) doing what you said it does, but I was trying to get those specific Usergroups to glow (both in-topic and from the mainboard, which is what the code I posted originally was doing). I tried altering yours with group-owner/admin instead which simply broke it instead of during what I was trying to do.

Although yours serves more purpose than just looking fancy so I’ll going to use that in the meantime, but I’m still interested.

1 Like
5

My CSS is still pretty basic, but I think this should work:

.group-Owner img.avatar {
    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);
}

Though the ‘Owner’ group would have to be set to be a user’s primary group.

(small edit to tweak it for both topics and topic lists :slight_smile:)