Grey-out not earned achievement excerpt

Got the answer from ChatGPT.

For those interested:

Question:

I am using the GamiPress plugin on my wordpress site. I use it to implement a gamified system on the site, which allows users to earn achievements. In this system you can view a list of earned and not earned achievements. To gray out and blur the not earned achievements in the list this code is used in custom css:

//Start code 1
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image , .user-has-not-earned .achievement-wrap .gamipress-achievement-image{-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: blur(5px); filter: blur(5px); }
//End code 1

There are two other css parts in the achievements in the list, these are
// 1
.gamipress-achievement-excerpt
// 2
.gamipress-achievements-container .gamipress-achievement-description

I would like to have those to parts also greyed out and blurred when the achievement is not yet earned. Can you tell me how to do it? If you don’t know, please list a couple of suggestions.

Answer:

To gray out and blur the two additional parts of the achievement (excerpt and description) when the achievement is not earned, you can add the following code to your custom CSS:

//Start code 2
.gamipress-achievement.user-has-not-earned .gamipress-achievement-excerpt, .gamipress-achievement.user-has-not-earned .gamipress-achievements-container .gamipress-achievement-description { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: blur(5px); filter: blur(5px); }
//End code 2

This should apply the same grayscale and blur filter to both the excerpt and description when the achievement is not earned.

If the above code does not work, you can try the following suggestions:

• Check if the class names for the excerpt and description elements are correct. You can inspect the HTML code using the browser developer tools to ensure that you are targeting the correct elements.
• Try adding !important to the end of the CSS rules to override any other CSS that might be affecting these elements.
• Contact the GamiPress plugin support team for assistance in customizing the achievement display.

Worked

• This reply was modified 52 minutes ago by tomgh.

Hi @tomgh

Thanks for sharing your answer.

It sure is useful for many users.

Have a great day!