@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.