User initial name widget
May 15, 2018 at 7:12 pmPosts: 12Member Reply #17614
I’ve noticed the userpic component in the topbar and a slight different approach in the user menu
<div class="m-card-user m-card-user--skin-dark">
<span class="m-card-user__name m--font-weight-500">Mark Andre</span>
And a different structure in Profile page itself
<div class="m-card-profile__pic"> <div class="m-card-profile__pic-wrapper"> </div> </div>
It would be nice to have a standard widget with the user profile picture or an option to display the initial name instead of an image.
I know we have an example in datatable pages (Colum rendering) but it was hard to put this example, in all other places above.
How can I accomplish that?
May 16, 2018 at 12:46 pmPosts: 4522Support Staff Reply #17636
You can try to remove the user pic from the topbar and replace it with username as shown below:
<a href=”#” class=”m-nav__link m-dropdown__toggle”>
<span class=”m-topbar__username m–font-primary”>Nick</span>
May 20, 2018 at 3:37 pmPosts: 12Member Reply #17720
Hello, thanks for your answer.
Unfortunately, this doesn’t help much.
I’m looking for a way to replace all user images (topbar, user menu, profile page) with the “colored circle with the user initial”. Your suggestion doesn’t have a rounded color background.
I’ve found an example in the datatable pages but it’s nos working when I replace in other places.
Please check the attached files.
Do you have other suggestions? Can you consider create this option? To use a colored circle instead of the profile picture?
Attachments:You must be logged in to view attached files.
May 23, 2018 at 6:32 pmPosts: 4522Support Staff Reply #17811
In this case we will need to implement this feature as reusable component in order to use it to replace the user image. We will consider adding this in the next update.
May 23, 2018 at 7:06 pmPosts: 12Member Reply #17817
It’ll be very helpful!
June 18, 2018 at 12:11 amPosts: 12Member Reply #18220
I saw the new “Types” section in the typography page.
It works perfectly!
You must be logged in to reply to this topic.