Custom badges, how to have a not standard badge?

peopleinside

Hi @luceos , can i ask if it's hard to have a custom badge logo as here ?

Nice 🙂

luceos

Upload your custom svg to public/assets/.

Then go into the admin area for custom css/less and add the following:

.icon.custom-icon {
  display: inline-block;
  background: url(/assets/logo-symbol.svg) center;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

And then in the group modal use the icon icon custom-icon. Change names to whatever you need.

Feel free to use better naming for the .custom-icon class and the filename of the svg.

peopleinside

Thank you luceos , seems the code arrive wrong in the email notification. I don't know how report this again to @Toby.
@peopleinside

peopleinside

luceos how can define .icon.icon-xx { to work? 😛
The CSS code you mentioned can be added in backend CSS section but how make ".icon.icon-flagrow {" to work?

jordanjay29

peopleinside No need to @mention devs directly, you can report bugs here in Support tag, or on Github.

peopleinside

jordanjay29 umh ok. I was try to made this issue available by email. I will report on GitHub. flarum/core1719

jordanjay29

peopleinside Thanks!

In the future, make sure you're following the issue template when opening a new issue, too. It helps devs have all the information they need to debug.

luceos

peopleinside you can use it on the permission group modal like so icon icon-flagrow

Is that what you mean?

peopleinside

luceos umh... put the CSS code

.icon.icon-flagrow {
  display: inline-block;
  background: url(/assets/logo-symbol.svg) center;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

into CSS section is not enough to see the badge customized maybe because in my community .icon.icon-flagrow is not recognized. I am asking what is the step to follow to have the custom badge except to place the /logo-symbol.svg in the assets folder... this is clear to me 😃

Maybe i understood just place icon icon-flagrow on the permission tab.
Nice, solved thanks.

peopleinside

luceos mmmm... I set the badge, it works on visitor side but not in admin side on permission page the icon is missed. There is a way to be bale to set the icon also on admin side backend?

If the badge is correctly showed in visitor side should be the same on the admin side. Is not.
Maybe this is something can be reported on GitHub?

Update 05/04/2020
For have the custom badge also on the backend you need insert the CSS code into core/less/admin/PermissionsPage.less

luceos

peopleinside setting this in your admin area should make it available on both forum and admin. Editing core files is never a reliable solution and shouldn't be advised.

luceos

peopleinside Update 05/04/2020

[deleted] 🤔

peopleinside This is an old issue, did you changed code?

I did not. Did you?

[deleted]

luceos your stuck in a timewarp ? 😁 That post is over a year old.

peopleinside

luceos This is an old issue, did you changed code? Because it not result to me is changed also for the backend. Sorry anyway... i want just help to solve issues not want to do the opposite 🙂

peopleinside

luceos Yes, every time i update Flarum the backend bade issue come up again so need edit that file for have the custom badge also in the backend.

I also know another fix for another issue has been made but the pull request still pending so if in the next release the other fix will be not include i will have to fix manually.

Usually i do not edit the code and if I do i try to be sure and to make a backup of originals file.
If I remember not wrong i was opening an issue on GitHub suggesting the CSS code should be applied also on the back end or a CSS section for backend should be present but the issue seems has been deleted... never exist anymore and was closed as wont fix.