Cannot Resolve Trophy list adjustment

This is something I looked into before, but I can see what can be done here again.

I reopened this since it auto-locked and I never gave this a proper response.

I wasn't able to find a way to accomplish this, at least not by doing anything that's outside of what any of us can currently accomplish.

It would be a useful feature to have, though. If anyone finds any add-ons and thinks of a way to add this in that I might've missed, you're always welcome to share this with me.

Zwielicht said:

I reopened this since it auto-locked and I never gave this a proper response.

I wasn't able to find a way to accomplish this, at least not by doing anything that's outside of what any of can currently accomplish.

It would be a useful feature to have, though. If anyone finds any add-ons and thinks of a way to add this in that I might've missed, you're always welcome to share this with me.

Click to expand...

have you asked your neighbourhood AI ?

Rem said:

have you asked your neighbourhood AI ?

Click to expand...

I'm sure googling the AI gave the answer by adjusting the CSS

In XenForo 2.x, achieving this requires a minor template modification alongside the CSS, because the default trophy list template does not output a unique HTML class indicating whether the viewing user has earned each specific trophy. [1]

Step 1: The Template Modification​

You must update the core trophy item wrapper to dynamically inject an is-earned class if an award date exists for that trophy. [2, 3]

1. Go to your XenForo Admin Control Panel (ACP).
2. Navigate to Appearance > Templates.
3. Search for and open the help_trophies template.
4. Locate the loop that renders each trophy (usually formatted as <li class="block-row block-row--separated">).
5. Replace that line with a conditional attribute check: [4, 5]

<li class="block-row block-row--separated trophy-item {{ $trophy.award_date ? 'is-earned' : '' }}">

Step 2: Add the CSS​

Now you can target .is-earned to visually differentiate unlocked achievements from locked ones.

1. In your ACP, search for and open the extra.less template.
2. Append one of the styling options below to the bottom of the file: [4]

Option A: Subtle Background Glow (Recommended)​

This changes the background color and adds a subtle colored border border to the earned rows to make them stand out neatly.


/* Style for earned trophies in the help list */
.trophy-item.is-earned {
background-color: @xf-contentHighlightBg;
border-left: 4px solid @xf-borderColorAccent;
opacity: 1;
}

/* Optional: Dull out unearned trophies to emphasize earned ones */
.trophy-item:not(.is-earned) {
opacity: 0.6;
}

Option B: Ribbon / Text Highlight​

This appends a custom badge or colors the trophy point counter green when unlocked.


/* Turn the trophy points badge green for awarded trophies */
.trophy-item.is-earned .contentRow-figure {
background: #27ae60 !important;
color: #ffffff !important;
font-weight: bold;
}

/* Highlight the trophy title text */
.trophy-item.is-earned .contentRow-title {
color: @xf-textColorAccent;
}

Option C: Desaturate Locked Trophies (Best for Grid layouts)​

If your template uses custom trophy images or icons, this keeps earned trophies in full color while greying out the locked ones. [3, 6]


/* Grayscale unearned trophy icons */
.trophy-item:not(.is-earned) .contentRow-figure img {
filter: grayscale(100%);
opacity: 0.4;
}

/* Full opacity vivid color for earned ones */
.trophy-item.is-earned .contentRow-figure img {
filter: grayscale(0%);
opacity: 1;
}

I can help you adjust the Less variables (like @xf-contentHighlightBg) to precisely match your forum theme colors, or help you add Font Awesome icon indicators to the earned elements. Which would you prefer?






It could be AI shit mind also

Rem said:

have you asked your neighbourhood AI ?

Click to expand...

t2van said:

I'm sure googling the AI gave the answer by adjusting the CSS

Click to expand...

Yeah, I tried using ChatGPT and Google's AI; the change ended up not being as simple as they said.

As you know, the current trophy page is static and only displays every trophy you can get; every user sees this page exactly the same way. To implement this specific change, I'd need to develop a custom add-on that would show every available trophy on the account page and highlight trophies users receive.

The main challenge with doing this would be that this custom add-on would have to alter Xenforo's current behaviour with displaying trophies, So, rather than adding them to a list that's populated on the account page (the default behaviour), it would instead highlight the trophies you receive in an existing list of greyed out trophies.

Maybe there's another way of accomplishing this as I always consider the possibility I may be over-complicating it, but this is as far as I've gotten with it so far. I use AI occasionally to troubleshoot issues with Xenforo, and there are many times it's just been downright inaccurate as to how Xenforo works.

If anyone ever wants to try their hand at it, Xenforo offers full-featured free 7-day demos.