By default, GamiPress adds an opacity effect on not earned achievements images to notice users about the earned status of this achievements as you can see on next image:
A lot of sites want to change this opacity effect by a black and white one like:
Add this effect is so simple as add a single CSS rule:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Black and white effect on ranks
To add this effect on ranks just is required to add the selector .gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image
to make it works on ranks too:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
More effects
The CSS rule filter
has other interesting effects like sepia
and blur
that can make your images looks incredible different like:
Sepia effect:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
Blur effect:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: blur(5px);
filter: blur(5px);
}