Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Mentor

Badges Displayed on User Profile are Stacked

We just launched our badges yesterday, and only a few appear on the user profile page, and they are stacked. 
They show correctly if you open the badges link, but I'm trying to make it more aesthetically pleasing. Any suggestions?

Link for example: https://forum.telus.com/t5/user/viewprofilepage/user-id/39563

5 Replies 5

@RhoLee -  Its just a CSS issue.  Add this to your community CSS. 

 

.ViewProfilePage #userBadgesList .lia-quilt-column.lia-quilt-column-04.lia-quilt-column-inner {
    width: 33%;
    margin-top: 10px;
    padding: 0px;
}
Give kudos if you find my posts helpful or mark solution if it answers your query.
Tariq

That's actually kind of a cool display view. It would be neat if they would reveal and grow on mouseover.

Khoros Alumni (Retired)

Congrats on the launch, @RhoLee. Nice branded badges you got there. Makes it a much more "Telus experience" right away.

 

And here's @BrianOblinger's variation:

.ViewProfilePage #userBadgesList .lia-quilt-column.lia-quilt-column-04.lia-quilt-column-inner:hover {
    z-index: 10;
    zoom: 1.2;
    top: -5px;
    left: -5px;
}

 


Khoros Best Practice until August 2019. Onwards posting as Claudius.
Learn how to master Khoros. Learn Best Practice in the Community Documentation
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.

Thanks for the help @ClaudiusH! It looks much better now. 

It is still only showing 6 badges in the right column. Is there a way to show all of the badges in that column?

Khoros Alumni (Retired)

The idea behind the "My Badges" widget you are using on the profile page is to show (at maximum) the 6 most recent unlocked badges for that member. The top right navigation arrow allows to navigate through to the full list on the badge page.
This widget was designed intentionally like that to be used on the profile page and keeping that page lightweight but still relevant through showing the most recent badge achievements.
If you still want to show more badges within the "My Badges" widget you would need to create a custom component.

Khoros Best Practice until August 2019. Onwards posting as Claudius.
Learn how to master Khoros. Learn Best Practice in the Community Documentation
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.