Simple Verified Badge

BAANAN

Hi everyone!
I made a small frontend script that replaces a flarum permission badge with an actual verified badge.

Sadly since this is only forum frontend there is no actual panel to customize stuff since i am new to creating plugins in PHP.
Why did i make this?
Simple, i saw a lot of people wanting something like this instead of fontawesome!

Information:

Packagist: https://packagist.org/packages/serakoi/flarum-verified-badge
Install: composer require serakoi/flarum-verified-badge

How to add this to your forum:

Make a new role Admin > Permissions
You can customize the name and plural
Put the color as: transparent (To have no background)!
Put icon as: verifiedBadge Case sensitive!

From version 0.0.3:
To get the blue version then use verifiedBadgeBlue instead of verifiedBadgeBlue. Both are still compatible!

Disclaimer: you will not see a preview of the badge

Preview of how it should look like:

The badge is the green/blue tick:

If you have any other suggestion then feel free to tell me!

Regards,
Seer

[deleted]

BAANAN There is no such need for it,

Those who want this can simply add this in Custom Header

<script>
                window.addEventListener("load", function(){
                    const vBadges = document.getElementsByClassName("verifiedBadge");
                    console.log(vBadges, vBadges.length)
                    if(vBadges.length > 0){
                        for(const b of vBadges){
                            const parentBadge = b.parentElement;
                            console.log(parentBadge)
                            parentBadge.classList.add("verifiedBadgeParent");
                        }
                    }
                });
            </script>
            <style>
                .verifiedBadgeParent {
                    background-color: transparent !important;
                }
                .badges {
                    list-style-image: initial;
                }
                .verifiedBadge {
                    line-height: 21px;
                    text-align: center;
                    font-size: 12.32px;
                    box-shadow: none!important;
                    margin-left: 0px !important;
                    background-image: url(https://seer-software.com/svg/verified.svg);
                    background-color: initial;
                    background-size: 100% auto;
                    display: block;
                    height: 100%;
                    width: auto;
                    background-repeat: no-repeat;
                }
            </style>

SychO

BAANAN Nice one!

katos

BAANAN Wicked extension! Looks good, and nice and easy for those that may struggle with the more manual integration like what @[deleted] pointed out (though I'd classify this as a more hacky solution!) .
Keep up the good work! 🙂

HD3D

BAANAN Good work buddy

BAANAN

[deleted] I guess, although some people don't know how to i guess.

jordanjay29

[deleted] Hey, I understand that you're interested in contributing to Flarum. There's always going to be multiple ways that this can be done, even to accomplish the same goal.

Please don't dismiss the work of our developers. We have community members who enjoy easy extensions and those who enjoy coding things themselves. It's important that we make room for both approaches as people like.

Take the time to look over our Community Guidelines again, especially:

Make sure your replies provide constructive feedback and support to allow for an inclusive community.

Your post here is not constructive feedback nor is it inclusive. Feel free to post your own code in our Resources tag, but don't discourage our extension devs from their efforts. If you have a legitimate complaint about how we run the community this way, please feel free to DM me on discord @jordanjay29#7443 or jordanjay29@flarum.org, but we have the Extension tag created specifically for devs to post their extensions.

BAANAN You're fine, please continue as normal.

[deleted]

jordanjay29 OK I am Sorry, I also remember the time I don't know Js and even no css, I was also using that plugins in WordPress but I passed that time and In today's time I can do much more than plugin.

jordanjay29

[deleted] We all learn at different rates and we have all levels of skill among our devs here. But there's a way to point out problems without putting someone on the spot or calling them out.

This is also getting off topic, so feel free to contact me with the methods I provided in jordanjay29 or just leave this conversation to an end. Let's let this discussion get back to the extension itself.

BAANAN

SychO
Thanks! That's appreciated!

Justoverclock

congrats for your first extension 🙂

FlexCookie

I'm new to Flarum, does this work with 1.0 stable? I'm getting this (so I assume not?)

 [InvalidArgumentException]
  Could not find a version of package serakoi/flarum-verified-badge matching your minimum-stability (stable). Require it with an explicit version constraint allowing its desired stability.

katos

FlexCookie It works with Flarum 1.0.0
Did you use Composer V1 or V2? 🙂

FlexCookie

katos Hey! Thanks for the reply, how do i check if i'm using v1 or v2 composer? I just did composer require serakoi/flarum-verified-badge in PuTTY.

BAANAN

FlexCookie
To check you need to run composer -v, this should give you a menu, scroll all the way to the top where it should tell you!

katos

FlexCookie Can you run composer -V

FlexCookie

katos Composer version 2.0.6 2020-11-07 11:21:17

katos

FlexCookie very bizarre...!
Oddly, I've tried it and got the same. Let me dig 🙂

BAANAN

katos Same, i think it is the problem with the version i pushed, i am going to push a newer version now.

katos

Ahh! @BAANAN looks like you're missing a package.json file bud? 🙂

BAANAN

katos I never had this problem, which is odd.