User Roles on Homepage

treyb

The issue

Trying to add Role sign, and /or a color around avatar on the front page of the forum.

My site is a ticket exchange, and there will be "trusted" users assigned to the role of trusted. Is there a way to make this stand out on the front page?

fakruzaruret

treyb good idea, 3 years ago I shared this feature idea but there is no development yet 😃 (I know there is no proposals or pledges but I would like to mention previous discussions related this)

https://discuss.flarum.org/d/26440-using-role-avatarsicons-instead-of-user-avatars

Also another idea is showing discussions according to the roles.
https://discuss.flarum.org/d/25673-two-collumns-discussions-feed

treyb

I am not sure how to add a $ amount to the bounty. I will do $20 though.

luceos

We will have to open up the ability to pledge. This can only be done once all requirements are clear enough.

Do all groups of OP need to be shown or only a specific selection?
Would roles be shown on all discussions or only specific tags?

luceos

fakruzaruret 3 years ago we didn't have proposals nor pledges. Please do not go offtopic by adding another feature request or we will be forced to close this request to start from scratch on formulating the requirements.

clarkwinkelmann

I am interested in adding this feature to my existing color circles extension.

Adding the circle to all discussions, just like it's on all posts is the easiest implementation.

Adding the user badges to the discussion list is also possible, but one warning here: if extensions define custom badges that are not linked to groups, they will probably not render in the same way, same order or at all in the discussion list, which could lead to confusion. Also, what should be done if a user has many groups ? The UI of the homepage won't be suited for that.

treyb

clarkwinkelmann Interesting. I personally would be fine with just the colored circle. I already love that feature and your extension. I think if a member were in too many groups it could lead to a problem pretty quickly. My use case wouldn't run in to that, but I could see others having that issue. Maybe have a toggle so that you can use either/or, or both?

treyb

@clarkwinkelmann just wondering if you had given this anymore thought? I would love to put $20 bounty towards it. I know its not much though.

User31

treyb

Just sharing this in case it might be of some use for you:

.DiscussionListItem-author .Avatar {
  filter: drop-shadow(0px 0px 5px white);
}

treyb

User31 That just adds the white glow, I am trying to get a circle around the avatar that matches the color of the user group. Or, to add the user group icon to the front page.

User31

treyb

Oh, ok um, tbh I thought the good sir Clark Winkelmann's 'Color Circles' extension did exactly this, ie: adding colored circles around avatars -each of which aquire the respective user group coloring too.

Is this not what you mean to achieve?

I'll admit I am probably misunderstanding something here....(mad blazed rn, lol...😄)

Butt anyways, I'm currently trialing Mr good sir Winkelmann's 'Color Circles' extension and one thing I have noticed, in my case, is the colored avatar circles don't seem to be presented on the main discussion page list avatars.

Whereas preferably instead I would much rather like to see the colored avatar circles presented on the the main discussion page list avatars.

My attempt at dealing with the missing main discussion page avatar colored circles, was to lazily add the CSS code example that I've passed on to you in my previous response.
(*I found it yesterday, posted by someone else in a different thread here, then tweaked it slightly by changing the color code to white.)

What I'd been thinking regarding your needs, was that perhaps yourself, or any of the other advanced & proactive Flarum community members, could maybe throw in ideas for either using or improving the basic example 'Avatar Border Shadow' CSS code, or instead possibly even suggesting a more efficacious alternative...

EDIT: To add, last night I attempted incorporating the "Start a Discussion" button - 'Animated Rainbow Background' CSS code with the main discussion page - 'Avatars Border Shadow' CSS code.

Example:

/*START-DISC-ANI-BG BEGIN*/
.IndexPage-newDiscussion {
  background: linear-gradient(124deg, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000);
  color: black;
  font-family: Garamond, serif;
  font-size: 19px;
  font-weight: 600 !important;
  text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white, 0 0 10px white, 0 0 11px white, 0 0 12px white, 0 0 13px white, 0 0 14px white, 0 0 15px white, 0 0 16px white, 0 0 17px white;
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 20s ease infinite;
  -z-animation: rainbow 16s ease infinite;
  -o-animation: rainbow 20s ease infinite;
  animation: rainbow 16s ease infinite;
}
@-webkit-keyframes rainbow {
  0%{background-position:0% 62%}
  50%{background-position:80% 19%}
  100%{background-position:0% 62%}
}
@-moz-keyframes rainbow {
  0%{background-position:0% 62%}
  50%{background-position:80% 19%}
  100%{background-position:0% 62%}
}
@-o-keyframes rainbow {
  0%{background-position:0% 62%}
  50%{background-position:80% 19%}
  100%{background-position:0% 62%}
}
@keyframes rainbow {
  0%{background-position:0% 62%}
  50%{background-position:80% 19%}
  100%{background-position:0% 62%}
}
/*START-DISC-ANI-BG END*/

/*MAIN-DISC-LIST-AVTAR-SHAD BEGIN*/
.DiscussionListItem-author .Avatar {
  filter: drop-shadow(0px 0px 5px white);
}
/*MAIN-DISC-LIST-AVTAR-SHAD END*/

So far I have tried several different variations of a hybridized mutant 'Animated Rainbow Avatar Border Shadow' CSS code, testing whatever combinations I could think of.
Currently, all have proven unsuccessful.