I’m trying to display only the users avatar that’s have created much topics on the forum and Ii was thinking of there is away to do it

[@robin-w Moderator 4 years, 8 months ago]

bbp topic count

and use shortcode

[display-top-users]

[@temian Participant 4 years, 8 months ago]

I got an error why using your shortcode

[@robin-w Moderator 4 years, 8 months ago]

updated this – latest version does not error

[@temian Participant 4 years, 8 months ago]

Now that’s worked fine can you help
I will like to display the avatar

In display:inline and given the image rounded corners

[@temian Participant 4 years, 8 months ago]

How can I remove there name from the image

[@robin-w Moderator 4 years, 8 months ago]

you need to learn how to look at classes in ‘developer’ in your browser, and then you can do all this yourself.

an example of the relevant image code is

<div class="tc-avatar" style="float:left;border-radius: 25px;"><a class="tc-profile-link" href="http://gos.rewweb.co.uk/users/admin/"><img alt="" src="https://secure.gravatar.com/avatar/dd803ad797ee5ca256d4be78c98fb305?s=96&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/dd803ad797ee5ca256d4be78c98fb305?s=192&d=mm&r=g 2x" class="avatar avatar-96 photo" width="96" height="96"></a></div>

and the text

<div class="tc-content" style="padding-left:50px ; top: 50%;transform: translateY(-50%);position: relative;"><a class="tc-profile-link" href="http://xxx.com/users/admin/">admin</a>303</div>

[@robin-w Moderator 4 years, 8 months ago]

https://www.w3schools.com/css/css3_borders.asp

https://www.w3schools.com/css/css_display_visibility.asp

[@temian Participant 4 years, 8 months ago]

Thanks I will try and work with this and get back to you

[@robin-w Moderator 4 years, 8 months ago]

come back when you get stuck, but please try a lot first !

[@temian Participant 4 years, 8 months ago]

I was able to hide the name and also was able to give it a border radius

But I was unable to make the avatars position themselves in an horizontal line

[@robin-w Moderator 4 years, 8 months ago]

so can you give us the code so far please

[@temian Participant 4 years, 8 months ago]

.tc-avatar img{border-radius:50%;height:50px;width:50px;}
.tc-avatar{margin:0;padding:0px;}
.tc-content{display:none;margin:0;padding:0;}

[@robin-w Moderator 4 years, 8 months ago]

great – I’ve just released a new version 2.7 which has an additional class tc-user which wraps each user

so if you add css to float tc-user left and add some padding you should be fixed

[@temian Participant 4 years, 8 months ago]

Thanks let’s me check it out