Badges

[Ganzuelo]

I like the Noun Project however you are limited on the amount of public domain icons available or you have to give attribution.

[a_5mith]

@Ganzuelo Yeah just noticed the licensing bits. Maybe not then.

[baris]

Yeah we use fontawesome.

[Ganzuelo]

24 Badges that require no Attribution.
Duplicated badges with II, III are meant as levels.
They are full vector images and can be scaled.
Images in the file are at 100x100px.
Download:
https://www.dropbox.com/s/oqcbhghhpdjmwxx/badges.ai

[trevor]

Those are perfect!
But what is that blue ring around the star icon and that lime green text...

[Ganzuelo]

I did a screen shot and my mouse was over a shape.

[julian]

@Ganzuelo Nice, I love them! It makes me wonder if it is do-able in just HTML and CSS...

Ta-dah!

[Ganzuelo]

I'm not too familiar with using CSS for images other than resizing. CSS Tricks had a good write up on CSS vs SVG.

Inline SVG Vs Icon Fonts [CAGEMATCH] | CSS-Tricks

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites.

CSS-Tricks (css-tricks.com)

On another note, your all probably aware of Achievements for Wordpress. (The guy works on Buddypress). You upload the graphic for the achievement and assign in a select amount of karma points and base it off an event like total post count, uploading avatar and so on. In the user panel the admin can check off which badges can be assigned and in the frontend the user will receive a light box notification of the award.

Could we tie the badges app into the reputation program you have here?

[Ganzuelo]

Lol just saw the CSS you did. That looks great! That didn't take long did it? Can that be built into the backend so admin can create on the fly?

[trevor]

CSS? Yeah, should be simple enough. Looks like FontAwesome, icons (some of them at least, not sure about the mustache) but yes.
This is what it would look in HTML just to give you an idea.

<a href="#" class="btn btn-icon b-2x btn-bg-trophy btn-rounded">
   <i class="fa fa-trophy"></i>
</a>

So I'll explain;
btn is the standard class for a button.
btn-icon its a button that will hold an icon.
b-2x double the size of the icon by 2 times.
btn-bg-{} change the background color for Trophies (or whatever the badge name is)
btn-circle add a circular border-radius of 999em (yes I use em instead of % though it should be standard in BS3 as %)

Perhaps an extra class to add the border around the like border-colorName .

[Ganzuelo]

Is it possible to add a generator inside the plugin itself to create badges on the fly?

[trevor]

@Ganzuelo said:

Is it possible to add a generator inside the plugin itself to create badges on the fly?

That would be ideal.

[trevor]

Oh I just saw @julian's Fiddle, pretty simple.
Okay so even better, I'll tweak that.

EDIT [1]: http://jsfiddle.net/3EKz5/1/

So this is scalable in my opinion:
Theres a default badge class for the badges
We should use another class to overwrite this for different badges per name.
And another class name for badge degrees (levels or whatever you'd like to call em). http://jsfiddle.net/3EKz5/3/

EDIT [2]:
So lets tie all of this together and we get a pretty scalable solution: http://jsfiddle.net/3EKz5/4/

EDIT [3]:
Sorry guys, heres the last one here that shows scalability. I opt to use the CSS3 scale in this case as an example.
http://jsfiddle.net/3EKz5/5/

Pheww, that was fun.

[julian]

Was just throwing ideas out there, but glad to see it's received well. I think HTML+CSS badges would be infinitely more scalable than images (less data xfer as well).

[Tanner]

I'm really liking the CSS + Font Awesome badges and how they're turning out. Also like the idea of being able to change them on the fly rather than have them be static content. Great work guys!

[A Former User]

I see a facebook badge/icon there.

If there was a badge option for sharing topics on facebook, that would be the first badge of that type I've ever seen. And possibly something that would help spread NodeBB.

[Ganzuelo]

When I was running bbPress I would assign social badges to those who would like/follow that network..

[a_5mith]

I think that would be what it would be useful for, share 1 posts/topics for level 1. 10-20 for level 2 and 30+ for level 3 etc. As long as we can create custom ones, I'm happy, not sure how many would have a use for the git one outside of nodebb itself.

[esiao]

Hello, first post on the forums but that particular subject caught my attention.
I'm currently thinking of rebuilding my forum with some nice and modern software and I have to say that NodeBB is the one that attract me the most atm.
But one of the reasons of changing software is this one, awards database manageable on users. Currently this Invison mod do exactly what I want
http://community.invisionpower.com/files/file/2650-awards-system/

Creating a list of awards with conditions and then going through admin panel to apply them. Even if I think it could be improved with some automatic ones (posts count for example).
It seems like you're going to implement badges in NodeBB but I'm a little concerned cause reading the discussion make me think that you're going to implement some awards to use. And what I'm looking for is more me creating awards and distributing them.
The point of having the numbers of awards displayed over them would be a nice feature would prevent to have a lot of images just for counting awards.

So yeah definitely want to see this going further and leaving my input

[julian]

@esiao if we were deciding between launching badges with our own hardcoded, or allowing admins to create their own, we'd always choose to give the option to the admins

Going the css/fontawesome route seems pretty solid so far.