Custom badges

phenomlab · 30 May 2023, 15:31

@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

No preview available

It seems codepen.io declined to respond to the data request. The link will still work, but no preview is available.

codepen.io

crazycells · 30 May 2023, 15:33

@phenomlab is there a problem in the forum?

I refreshed several times, nothing changed…

phenomlab · 30 May 2023, 15:41

@crazycells Sorry, yes. Fixed that now.

crazycells · 30 May 2023, 15:44

@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 · 30 May 2023, 15:49

@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 · 30 May 2023, 15:54

@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 · 30 May 2023, 15:59

@crazycells No, it’s the free version

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by...(more)

cdnjs

You only need the check mark itself

crazycells · 30 May 2023, 16:00

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

I need to tailor the code for my forum…

phenomlab · wrote on 30 May 2023, 16:00

@crazycells Yes, I think I probably will.

phenomlab · 7 Aug 2023, 18:28

@crazycells Ok, so, I found some time to look at this properly today.

Here’s the result

Notice the “Twitter-esque” verified badge?

I found this

https://commons.wikimedia.org/wiki/File:Twitter_Verified_Badge.svg and downloaded it, then uploaded it to /assets/public/images

Then, I used the below CSS code

     li[component="post"] a[href*="/groups/verified"] {
        position: absolute !important;
        left: 2px;
        z-index: 2;
        margin-top: 1px;
        border-radius: 999px !important;
        line-height: 14px;
        display: block;
        height: auto;
        margin-left: 0px !important;
        background: transparent !important;
        width: auto;
    }
 
    li[component=post] a[href*="/groups/verified"]:before {
        background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
        content: "";
        height: 22px;
        width: 22px;
        display: block;
    }
    li[component=post] a[href*="/groups/verified"]:after {
        background: #ffffff !important;
        height: 9px;
        width: 9px;
        content: "";
        display: block;
        top: 10px;
        position: absolute;
        z-index: -1;
        left: 12px;
    }

Some points to consider

The CSS code extensively uses :before and :after pseudo elements. Essentially, :before adds the SVG icon and positions it, and :after adds a smaller “white square” which is conveniently positioned behind the :before element using z:-index: -1;

The purpose of the “white square” is to provide a dirty way to fill in the transparency which is present in the SVG so it looks right.

This is pretty tough to display on mobile viewports, so it’s best to hide it completely using this code

 @media (max-width: 767px) {
    li[component="post"] a[href*="/groups/verified"].badge, .account a[href*="/groups/verified"].badge {
            display: none !important;
        }

EDIT: Just realised that this icon (being a group) is also displayed on the user’s profile page, so we’ll need CSS to make that look good too…

I’ve absolutely no idea who this guy is…

Here it is

     .account a[href*="/groups/verified"] {
        position: absolute !important;
        z-index: 2;
        background: transparent !important;
        margin-left: -10px;
    }
    .account a[href*="/groups/verified"]:after {
        background: #ffffff !important;
        height: 9px;
        width: 10px;
        content: "";
        display: block;
        top: 10px;
        position: absolute;
        z-index: -1;
        left: 12px;
    }
    .account a[href*="/groups/verified"]:before {
        background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
        content: "";
        height: 22px;
        width: 22px;
        display: block;
    }

Enjoy.

DownPW · 9 Jul 2023, 21:22

hello @phenomlab

I am trying to apply your code for the “all” group which all my members are part of.

I downlaod the image of the twitter badge in full resolution and upload in the same place and I access it correctly.

On the other hand it would seem that the badge is displayed badly (cut on the right for the first on the screen) then transparent for the second and on the 3rd it is not displayed aps.

An idea ?

phenomlab · wrote on 9 Jul 2023, 21:22

@DownPW it’s really hard to see that image. I’ll need to look at your dev server directly to see what’s happening here.

DownPW · 9 Jul 2023, 21:41

I just found some answers @phenomlab

It is absolutely necessary that the user is displaying the badge of the group in his profile:

That the question, How to force put the user in a group ?
For the rest of the display bugs, I have not yet found.

phenomlab · wrote on 9 Jul 2023, 21:41

@DownPW said in Custom badges:

It is absolutely necessary that the user is displaying the badge of the group in his profile:

Yes, it won’t display without that. I don’t know of a way to force it either.

DownPW · 9 Jul 2023, 22:26

If I apply light themes we see better.
In fact, ther badge is cut on the right and we have the dexcription badge below :

phenomlab · 7 Sept 2023, 23:27

@DownPW yes, that’s just going to be positioning. Remember we are using position: absolute; and your CSS is likely to differ so you may need to tweak the positioning slightly to suit.

crazycells · 13 Jul 2023, 20:51

hi @phenomlab, we should be able to download this…

https://commons.wikimedia.org/wiki/File:Twitter_Verified_Badge.svg

…and recolor it accordingly and upload it to the forum the same way, right? These colors are reminding everyone “twitter” , I believe it would be nicer if it is changed according to the personality of the forum, so it will look more original while maintaining “meaning”…

I think here on this forum, “sudonix orange” color would look cooler than “twitter blue”

crazycells · 13 Jul 2023, 20:49

additionally, these pages need some adjustments: https://sudonix.org/user/phenomlab

phenomlab · wrote on 13 Jul 2023, 20:49

@crazycells that’s odd. Shouldn’t look like that (at least, it doesn’t on my device). What device are you using?

phenomlab · wrote on 13 Jul 2023, 20:51

@crazycells hmm. That’s a good idea. Let me have a look at that.

sudonix

Custom badges

No preview available

codepen.io

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

cdnjs

Did this solution help you?

Related Topics

navigation menu panel on mobile

Why CSS acts different in Desktop?

build nodebb Warning in entrypoint size limit

Forum Icons NodeBB

what does sound/mute button do?

[NodeBB] username cards

[NodeBB] First post customization

[NodeBB] custom Gravatar image not showing

	<!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>

	.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;
	}

	li[component="post"] a[href*="/groups/verified"] {
	position: absolute !important;
	left: 2px;
	z-index: 2;
	margin-top: 1px;
	border-radius: 999px !important;
	line-height: 14px;
	display: block;
	height: auto;
	margin-left: 0px !important;
	background: transparent !important;
	width: auto;
	}

	li[component=post] a[href*="/groups/verified"]:before {
	background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
	content: "";
	height: 22px;
	width: 22px;
	display: block;
	}
	li[component=post] a[href*="/groups/verified"]:after {
	background: #ffffff !important;
	height: 9px;
	width: 9px;
	content: "";
	display: block;
	top: 10px;
	position: absolute;
	z-index: -1;
	left: 12px;
	}

	@media (max-width: 767px) {
	li[component="post"] a[href="/groups/verified"].badge, .account a[href="/groups/verified"].badge {
	display: none !important;
	}

	.account a[href*="/groups/verified"] {
	position: absolute !important;
	z-index: 2;
	background: transparent !important;
	margin-left: -10px;
	}
	.account a[href*="/groups/verified"]:after {
	background: #ffffff !important;
	height: 9px;
	width: 10px;
	content: "";
	display: block;
	top: 10px;
	position: absolute;
	z-index: -1;
	left: 12px;
	}
	.account a[href*="/groups/verified"]:before {
	background: url(https://sudonix.org/assets/images/Twitter_Verified_Badge.svg) !important;
	content: "";
	height: 22px;
	width: 22px;
	display: block;
	}

sudonix

Custom badges

No preview available

codepen.io

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

cdnjs

Did this solution help you?

Related Topics

Individual Categories