@DannyPancratz thank you for thinking of yours truly!
This is a very interesting one! And it can indeed be done, all you will need is 3/4 variables:
- The total number of badges your community has
There is a for loop in the script going through all the badges in the list to identify the specific one you want to add a link to, In the unlikely event that a user has all of them and that the one to add a link to is the last one in the list you’ll want that number to be the total number of badges available. - The exact name of the badge that needs to have a link
- The link you would like the badge to point to
- Optionally, the class name for the badge
This will allow you to add some custom CSS to the badge to highlight that it is different to other badges. Once the class name has been added you can do anything you want, such as a border colour, making it bigger than other badges, or even movement, as in the example below. Seems a missed opportunity if people do not notice it!
Full script with variables to replace:
<!-- Adding Badge Links -->
<script>
if (inSidedData.page.url.includes("members")) {
setTimeout(function(){
var numberedBadge = document.getElementsByClassName("qa-user-badges-list")[0].getElementsByTagName("li");
for (let i = 0; i < VARIABLE1; i++) {
var currentBadge = numberedBadge[i].childNodes[1].title;
if (currentBadge == "VARIABLE2") {
numberedBadge[i].classList.add("OPTIONALVARIABLE4");
var badgeImg = numberedBadge[i].childNodes[1];
var linkElement = document.createElement("a");
linkElement.setAttribute('href','VARIABLE3');
linkElement.appendChild(badgeImg);
numberedBadge[i].appendChild(linkElement);
}
}
}, 2000);
}
</script>
Optional Custom CSS for the optionally used badge class:
/* Spotlight Badges */
.OPTIONALVARIABLE4 {
animation: shake1 5s;
animation-iteration-count: infinite;
}
@keyframes shake1 {
0% { transform: translate(1px, 1px) rotate(0deg); }
25% { transform: translate(1px, 1px) rotate(300deg); }
50% { transform: translate(1px, 1px) rotate(0deg); }
75% { transform: translate(1px, 1px) rotate(0deg); }
100% { transform: translate(1px, 1px) rotate(-50deg); }
}
This might needs a bit of testing but it has worked for me. Furthermore, if you wanted every badge to have a link you could rinse and repeat the same script over multiple times.
