Badges
-
I'm not too familiar with using CSS for images other than resizing. CSS Tricks had a good write up on CSS vs SVG.
http://css-tricks.com/icon-fonts-vs-svg/
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?
-
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;
btnis the standard class for a button.
btn-iconits a button that will hold an icon.
b-2xdouble the size of the icon by 2 times.
btn-bg-{}change the background color for Trophies (or whatever the badge name is)
btn-circleadd 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 said:
Is it possible to add a generator inside the plugin itself to create badges on the fly?
That would be ideal.
-
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.
-
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!
-
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.
-
-
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
-
-
Does that mean that you're going to give some badges creation through fontawesome and CSS letting the Admin create the ones wanted with this ressources or that you're going to create a list of usable badges?
I prefer the idea of letting the Admin décide which badges to use and the ability to add some but really like the idea of using fontawesome to actually create them cause it will work better than images for page load time even if I think for images of that size it's not a big deal.
So yeah waiting to see this implemented. -
Dat new trophyes and Archivemts system.
-
That's not the right handle, it's @psychobunny
BTW, nice new composition window! Recently new requests come up (tags, dual compose) and they automagically appear!
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).
