Custom badges

[crazycells]

@phenomlab I had to ask ChatGPT 30 times to get this

the codes will be more clear to you than to me but I had to add a “transparent” background color, so that svg can be created with the color you want. otherwise svg is not visible.

I had to remove “text-align” because it is ruining the position of the badge.

And lastly, although there is a checkmark, unfortunately, it stays behind the SVG, so it had to add a checkmark using CSS codes to make it visible and changed its position using z-index. (or something like this )

[phenomlab]

@crazycells it’s a lot of effort, but I really like the effect. I’m just wondering if it’s easier to use an actual image?

[crazycells]

@phenomlab said in Custom badges:

@crazycells oooohhhhh - I like!!!

that background URL is universal, right? I mean it will always be available and not be deleted?

I used this page to get that: https://fontawesomeicons.com/svg/icons/twitter-verified-badge#ex-tab1

[phenomlab]

@crazycells said in Custom badges:

that background URL is universal, right? I mean it will always be available and not be deleted?

Yes, correct.

[crazycells]

@phenomlab I prefer this way, because I would like to change the color of it depending on profession. In our forum, I am not planning to use it for “email verified” users, it will mainly be used for professional users that we host. I can easily edit this depending on the groups.

[phenomlab]

@crazycells That makes sense.

[DownPW]

good job @crazycells

I wonder if we could do it for each badge without changing the color of course and keep the color of the original badges.

Curious to see what it would look like

[crazycells]

@DownPW said in Custom badges:

good job @crazycells

I wonder if we could do it for each badge without changing the color of course and keep the color of the original badges.

Curious to see what it would look like

no, this does not work. the overlap of a wavy edge circle and a circle becomes a circle. so, you cannot detect any flower shape with this method. The way that I achieved this was by removing the background color (making it transparent by CSS although there is an assigned color for it in ACP) and then creating a new flower shape on top of it by CSS.

[phenomlab]

@crazycells just thinking about this. Wouldn’t it be easier to just use font awesome?

https://fontawesome.com/icons/badge-check?f=classic&s=solid

[crazycells]

@phenomlab said in Custom badges:

@crazycells just thinking about this. Wouldn’t it be easier to just use font awesome?

https://fontawesome.com/icons/badge-check?f=classic&s=solid

as far as I remember, we discussed this before and you mentioned that that badge is not in the free tier.

[phenomlab]

@crazycells Yes, you’re right

https://fontawesome.com/search?q=check&o=r&m=free

[phenomlab]

@crazycells This intrigued me somewhat, I won’t lie I decided to take a stab at this myself.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="base"></div>
  <div class="inner"><i class="check fa-solid fa-check"></i></div>
</body>
</html>

CSS

.base {
  left: 100px;
  top: 100px;
  height: 80px;
  width: 80px;
  background: #067acc;
  position: absolute;
  border-radius: 10px;
}
.base:before {
  height: 80px;
  width: 80px;
  background: #067acc;
  content:"";
  position: absolute;
  transform: rotate(-30deg);
  border-radius: 10px;
}
.base:after {
  padding-top: 10px;
  text-align: center;
  vertical-align: middle;
  height: 70px;
  width: 80px;
  background: #067acc;
  content: "";
  position: absolute;
  transform: rotate(30deg);
  border-radius: 10px;
}
.inner {
  color: #000000;
  left: 95px;
  top: 95px;
  position: absolute;
  text-align:center;
  padding-top: 25px;
  width: 90px;
  height: 65px;
  background: #067acc;
  border-radius: 50px;
  background: #067acc; /* Old browsers */
}
.check {
  font-size: 36px;
  color: #ffffff;
}

Here’s the result

https://codepen.io/sudonix/pen/qBJGMRL

[crazycells]

@phenomlab is there a problem in the forum?

I refreshed several times, nothing changed…

[phenomlab]

@crazycells Sorry, yes. Fixed that now.

[crazycells]

@phenomlab it looks very nice but I guess one needs a subscription to use this, right?

I am looking forward to seeing that on the avatars as “verified badge”, please do not forget to share your CSS code for its position when you implement it.

[phenomlab]

@crazycells said in Custom badges:

it looks very nice but I guess one needs a subscription to use this, right?

No, there’s no subscription - what do you see ? The CodePen should be public?

[crazycells]

@phenomlab yes I can see it very well:

since your code has “/font-awesome/6.4.0/” in it, I assumed you are using pro version.

[phenomlab]

@crazycells No, it’s the free version

https://cdnjs.com/libraries/font-awesome

You only need the check mark itself

[crazycells]

@phenomlab great then, are you planning to implement it on this forum?

I need to tailor the code for my forum…

[phenomlab]

@crazycells Yes, I think I probably will.