Love your addon and appreciate your time and contribution.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
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)?
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.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.
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.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
So to explain how the activity window works; the cron job has a limited scope of users it will check through to award badges.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.
Maybe SVG support will solve all of these issues?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.
You can supply an SVG in the 1x field and it should render without an issue for what it’s worthMaybe SVG support will solve all of these issues?
Thank you!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
.navidadVerde .badgeIcon {
color: green !important;
}
Try targeting: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?
badgeIcon--fa
instead of badgeIcon
Doens't work.Try targeting:badgeIcon--fa
instead ofbadgeIcon
This is expected behavior, every other tab when called via url will behave the same... for example: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
#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:Doens't work.
Happens the same thing, changes on help page and profile badges, but not on postbit and pop-up
.colorBadgeRed {
@badge-color: red;
.badgeIcon.badgeIcon--fa {
color: @badge-color !important;
}
a & {
color: @badge-color !important;
}
}
&
after the class as displayed above.As mentioned above you have to add your styles to theHow 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.
extra.less
template..colorBadgeRed {
@badge-color: red;
.badgeIcon.badgeIcon--fa {
color: @badge-color !important;
}
a & {
color: @badge-color !important;
}
}
colorBadgeRed
to the class name you desire and @badge-color: ***;
to the color your desire.colorBadgeRed
or whatever class name you desire.I tried this and got the same problem. I don't know what's going onThis 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:
View attachment 241688CSS:.colorBadgeRed { @badge-color: red; .badgeIcon.badgeIcon--fa { color: @badge-color !important; } a & { color: @badge-color !important; } }
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
DM me with your website informationI tried this and got the same problem. I don't know what's going on
We use essential cookies to make this site work, and optional cookies to enhance your experience.