XF 2.2 A better verification badge?

DarkGizmo

Well-known member
Can someone help me with putting a better verification badge on my site? I'm not looking to purchase an add-on at this time, right now I handle it through my extra.less template using font-awesome.

Here is what my current badge looks like:
JinkirinVerified.PNG

Here is what I would like it to resemble:
RevGGVerified.PNG




Here is the coding used:
Code:
.template-member_view,
.template-thread_view
{
    span.username--style8:after {
        color: #0077f5;
        font-family: 'Font Awesome 5 Pro';
        content: "\f058";
        font-size: 21px;
        font-style: normal;
        margin-left: 6px;
    }
}


Can anyone give me the proper coding to make the verified checkmark closer to the one for my guilded server? Also would like it to be a little smaller as well, and if possible is it possible to have it say "Verified User" when someone hovers over it?
 

DarkGizmo

Well-known member
Is it possible to have a better looking checkmark for verified users in specified groups using extra_less & CSS and/or font awesome?

This is how I currently have mine set up using this method:
JinkirinVerified.PNG


This is how I would like it to appear:
revserver_verifiedcheckmark.png

Is it also possible to have a tooltip that says "Verified User" similar to the 2nd pic with this method?

I know there's a few add-ons available to achieve this, but i'm not looking to pay for anything right now and the more advanced add-on as far as i'm aware doesn't work with 2.2.x.

Any help to achieve this is greatly appreciated! This is the current coding I have to achieve what I have in the 1st pic (it also appears in threads)

Code:
/* verified icon for Verified group */

.template-member_view,
.template-thread_view
{
    span.username--style8:after {
        color: #0077f5;
        font-family: 'Font Awesome 5 Pro';
        content: "\f058";
        font-size: 21px;
        font-style: normal;
        margin-left: 6px;
    }
}

Any help is appreciated to achieve the same type of result as the 2nd picture!

To see it first hand:
1st pic in real time - Jinkirin | Revillution - Your portal to entertainment!
2nd pic - https://www.guilded.gg/i/jpLmgG7E
 
Top