[VersoBit] Badges [Deleted]

I want to give an award to users that reached 5, 10 and 15 years on the forum.
Is there a way to set so that the user that has 15 years on the forum doesn't show the other 2 badges (5 and 10)?
 
VersoBit said:
Resolution isnt much of an issue if you utilize @1x @2x @3x @4x badge images, but that can be tedious depending on your setup... Tools coming to make that easier soon ;)
Click to expand...
Love your addon and appreciate your time and contribution.
What is your take on using images with @x resolutions versus using the fontawesome icons. Do you have recommendation for a source of images we can use as badges? Fontawesome icons are limited in what you can do.
 
added a new badge and on user criteria, added my username to the list. Let the cron schedule at 15m, manually ran the cron but it doesn't show anyone on the list.
 
interforo said:
I want to give an award to users that reached 5, 10 and 15 years on the forum.
Is there a way to set so that the user that has 15 years on the forum doesn't show the other 2 badges (5 and 10)?
Click to expand...
1607474243842.webp
There is currently a criteria option to display a badge if a user has other badges.

This is definitely something I would like to support in the future; though most cases the idea of badges is to collect them; We could add a function down the road to allow per-group limitations on display. However I think the user should still keep the previous badges as well. It is their patch for being around that long anyways... plus users do get sentimental with awards like this.

Andy.N said:
Love your addon and appreciate your time and contribution.
What is your take on using images with @x resolutions versus using the fontawesome icons. Do you have recommendation for a source of images we can use as badges? Fontawesome icons are limited in what you can do.
Click to expand...
I have spent most of my time getting my communities to develop their own badges; Though any icon pack you find online should work for you.
There are many more options that can be enabled for font awesome, but the more complicated options require you to be a pro member.

In most cases you probably wont need more than @3x resolution for your badges, It's good to future proof where you can though.

If you do not define @2x, @3x, @4x - the badge will display as normal.

Future methods of adding badge resources (images) will offer a method to provide a very high resolution image and have it automatically size the badges down for you (if desired) - More on these features later.

Andy.N said:
added a new badge and on user criteria, added my username to the list. Let the cron schedule at 15m, manually ran the cron but it doesn't show anyone on the list.
Click to expand...

This can be related to cache, try extending the activity interval to 6 hours and seeing if the badge awards over that time.
If not, please check your install for errors and report back :)
 
VersoBit said:
This can be related to cache, try extending the activity interval to 6 hours and seeing if the badge awards over that time.
If not, please check your install for errors and report back :)
Click to expand...
The default window of 2h is a bit confusing. I first changed to 15 minutes which did not do anything for 24 hours. I then set it to 2 hours and a few testing accounts work.
I noticed that the badge doesn't show up on the mobile postbit. Can we change it to show on postbit on mobile view?
Also, what do we change so a specific badge is displayed next to the username such as the green checkbox Verified members that Twitter, Facebook use.
 
Andy.N said:
The default window of 2h is a bit confusing. I first changed to 15 minutes which did not do anything for 24 hours. I then set it to 2 hours and a few testing accounts work.
I noticed that the badge doesn't show up on the mobile postbit. Can we change it to show on postbit on mobile view?
Also, what do we change so a specific badge is displayed next to the username such as the green checkbox Verified members that Twitter, Facebook use.
Click to expand...
So to explain how the activity window works; the cron job has a limited scope of users it will check through to award badges.

If its set to 6 hours for example, when the cron runs, it is searching for users who were active in the last 6 hours to award a badge.
You can "disable" this option to allow the cron to search your entire user base for badge awards.

You can set this to appear on the mobile post bit through the style properties of this addon, see below:
1607479562457.png

There are no plans to put badges beside the usernames at this point.
 
Thank you for the reply and thoughtful implementation of this. Look forward to future updates to this addon. I already can think of ways to make the badges way more useful that the usual user tittle ladder and the xf default.
 
VersoBit said:
Future methods of adding badge resources (images) will offer a method to provide a very high resolution image and have it automatically size the badges down for you (if desired) - More on these features later.
Click to expand...
Maybe SVG support will solve all of these issues?
 
VersoBit said:
View attachment 241604
There is currently a criteria option to display a badge if a user has other badges.

This is definitely something I would like to support in the future; though most cases the idea of badges is to collect them; We could add a function down the road to allow per-group limitations on display. However I think the user should still keep the previous badges as well. It is their patch for being around that long anyways... plus users do get sentimental with awards like this.


I have spent most of my time getting my communities to develop their own badges; Though any icon pack you find online should work for you.
There are many more options that can be enabled for font awesome, but the more complicated options require you to be a pro member.

In most cases you probably wont need more than @3x resolution for your badges, It's good to future proof where you can though.

If you do not define @2x, @3x, @4x - the badge will display as normal.

Future methods of adding badge resources (images) will offer a method to provide a very high resolution image and have it automatically size the badges down for you (if desired) - More on these features later.



This can be related to cache, try extending the activity interval to 6 hours and seeing if the badge awards over that time.
If not, please check your install for errors and report back :)
Click to expand...
Thank you!
Yes please anything like: do not show badge x if user already has badge y would be awesome
 
I have a question.
I used this on extra.less
CSS: 
.navidadVerde .badgeIcon {
    color: green !important;
}

And the icon is appearing green on the Help page and user profiles but it's appearing blue on postbit and in the profile pop-up

Postbit and pop-up:

1607518277141.png

Help page:
1607518307536.png

There is any way to make it green (or any color) on postbit and pop-up too?
 
alv4 said:
I have a question.
I used this on extra.less
CSS: 
.navidadVerde .badgeIcon {
    color: green !important;
}

And the icon is appearing green on the Help page and user profiles but it's appearing blue on postbit and in the profile pop-up

Postbit and pop-up:

View attachment 241641

Help page:
View attachment 241642

There is any way to make it green (or any color) on postbit and pop-up too?
Click to expand...
Try targeting: badgeIcon--fa instead of badgeIcon
 
I seem to find some small bug?
When you click on the postbit badge, it will link to the Badges tab on that user's profile page. There is a small vertical white line about 1px wide on the tab like in this picture. You can click around other tab and back to Badges tab and the line is gone.

Screen Shot 2020-12-09 at 11.22.29 AM.webp
 
  • Wow
Reactions: TFW
Andy.N said:
I seem to find some small bug?
When you click on the postbit badge, it will link to the Badges tab on that user's profile page. There is a small vertical white line about 1px wide on the tab like in this picture. You can click around other tab and back to Badges tab and the line is gone.

View attachment 241671
Click to expand...
This is expected behavior, every other tab when called via url will behave the same... for example: #latest-activity #recent-content #about

alv4 said:
Doens't work.
Happens the same thing, changes on help page and profile badges, but not on postbit and pop-up
Click to expand...
Sorry about this, I was quite tired when I replied to this and was just heading to bed... I've taken a moment to look into this further for you and I have the following solution:
CSS: 
.colorBadgeRed {
    @badge-color: red;
    .badgeIcon.badgeIcon--fa {
        color: @badge-color !important;
    }
    a & {
        color: @badge-color !important;
    }
}
1607550494197.png
The reason the badge was not styling on the postBit/memberTooltip and Member Header was because the parent element (<a href>) was not being styled, which was overriding the custom style you set out.

With LESS you can target a parent element by appending a & after the class as displayed above.

Hopefully this solves the issue for you :)
 
How do we use some styling to the fontawesome icons?
I see that you have some CSS class for it but not sure what needs to be done?
I like to do something like this <span style="font-size: 1em; color: red;"> <i class="fad fa-badge-check"></i></span> just like how I was able to use it on any XF page.
 
Andy.N said:
How do we use some styling to the fontawesome icons?
I see that you have some CSS class for it but not sure what needs to be done?
I like to do something like this <span style="font-size: 1em; color: red;"> <i class="fad fa-badge-check"></i></span> just like how I was able to use it on any XF page.
Click to expand...
As mentioned above you have to add your styles to the extra.less template.
CSS: 
.colorBadgeRed {
    @badge-color: red;
    .badgeIcon.badgeIcon--fa {
        color: @badge-color !important;
    }
    a & {
        color: @badge-color !important;
    }
}
All you would need to do is change colorBadgeRed to the class name you desire and @badge-color: ***; to the color your desire.

After, edit the badge you wish to have a CSS class applied to and add colorBadgeRed or whatever class name you desire.
 
VersoBit said:
This is expected behavior, every other tab when called via url will behave the same... for example: #latest-activity #recent-content #about


Sorry about this, I was quite tired when I replied to this and was just heading to bed... I've taken a moment to look into this further for you and I have the following solution:
CSS: 
.colorBadgeRed {
    @badge-color: red;
    .badgeIcon.badgeIcon--fa {
        color: @badge-color !important;
    }
    a & {
        color: @badge-color !important;
    }
}
View attachment 241688
The reason the badge was not styling on the postBit/memberTooltip and Member Header was because the parent element (<a href>) was not being styled, which was overriding the custom style you set out.

With LESS you can target a parent element by appending a & after the class as displayed above.

Hopefully this solves the issue for you :)
Click to expand...
I tried this and got the same problem. I don't know what's going on 😂
 
Hi,
When should we expect a new version of your wonderful plugin? 😊
I look forward to the feature to grant a badge and to hide one previously received
 
You must log in or register to reply here.

Similar threads

Ozzy47
[OzzModz] Badges
40 41 42
Replies
834
Views
57K
Tri@de
Tri@de
Top Bottom