Why this post ? #
Because I was in the situation where I had a CTFd instance, no time, no way to change the theme, and wanted the challenges difficulty to appear. Since in our theme (that once again could not be changed) the tags were not shown on the challenges screen (but only when clicking on a specific challenge) I wanted to have a way to show the difficulty on top of having them properly sorted which I already covered last year. I searched online and could not find any out-of-the-box usable code so here this is.
TLDR : How do I do to have them displayed #
- define a difficulty scale. This year, mine was
- “beginner”
- “easy”
- “medium”
- “hard”
- “insane”
- use the code below while adapting your text, I have also included a color option although I ended up not using it since it clashed with the “challenge completed” styling.
Detailed explanation : #
Log in to your CTFd console and click on the admin panel. Once there, get to the Theme section :
Once you’re there click on the Build CSS button and add the below code in the Theme Header.
ints, but I had already the whole CTF with these 5 tags, so I went with the easiest route.
.tag-beginner::after {
content: "Beginner";
}
/*
Use this if you want to oclor code your tags
.tag-beginner {
background-color: #22c55e;
color: #ffffff;
}
*/
.tag-easy::after {
content: "Easy";
}
.tag-medium::after {
content: "Medium";
}
.tag-hard::after{
content: "Hard";
}
.tag-insane::after {
content: "Insane";
}Then don’t forget to hit update
And as a bonus if you want to set metadata to have link previews that look like this :
You can use the same field and paste in here values generated by using https://opengraph.dev/
See you at the THCon or the THCon’s CTF