Forum breadcrumbs – You are here:Asgaros Support ForumSupportRounded Avatars
Please or Register to create posts and topics.

Rounded Avatars

Hi Team.

I want to display the user post avatars rounded, i add

#af-wrapper img.avatar {
    border-radius: 50px;
}

but i cand find the others elements to make it rounded. In #af-wrapper .user-online .avatar do nothing (Image 1)

Also, i want to add the avatar in the last post cell in forum and topics view (image 2)

Cheers

 

Uploaded files:
  • Clipboard01.jpg
  • Clipboard02.jpg

Hello @n3k0

The green “border” around your avatar – which indicates that you are online – is actually an outline and no border. Its not possible to give outlines a border-radius so they appear round. The only way would be to completely hide the green outline with the following code:

#af-wrapper img.avatar {
    outline: none;
}

To add custom columns you can use the following hooks:

  • asgarosforum_custom_topic_column (parameter: topic_id)
  • asgarosforum_custom_forum_column (parameter: forum_id)

Basically what you have to do inside there is to make a database-query to receive the last post inside a topic and fetch the author_id field of it. This ID can be used in the get_avatar WordPress function to show the users avatar:

https://codex.wordpress.org/Function_Reference/get_avatar

Actually I cant provide you a full working code for this now. Maybe this is something which I can add in a future update – or some additional function to fetch this kind of data more easy.

N3k0 has reacted to this post.
N3k0
If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

Thx for the reply @asgaros

in this case, it would be more convenient to change the outline code to a border to show if the user is online?

Change this:

#af-wrapper .user-online .avatar {
    box-shadow: 0px 0px 5px #82f338;
    outline: 1px solid #82f338;
}

To this:

#af-wrapper .user-online .avatar {
    border: 2px solid #82f338 !important;
}

And tada!! you have rounded avatars with the online status 🙂

cheers!

Uploaded files:
  • test-1.png

Hello @n3k0

In this case the normal border is not shown anymore around your avatar. The outline basically should just add a glow-effect around it. Maybe I simplify it like this and use a border like you have mentioned. I will think about it. 🙂

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

Hello , Asgaros

With the latest update, the avatars cannot be scaled and automatically resized, however properties of pictures stayed the same. Smaller ones avatars are displayed Ok. Pls see the attachment

Uploaded files:
  • unnamed-3.png

Hello @rgn_sss

I will publish an update in the next minutes which should fix this issue.

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

Hi Thomas,

The updates look fantastic!  Keep up the great work!

However, I was looking for a setting to switch our avatar photos back to being square.  I think this last update automatically made them round.  Is there a way to make them square again?  The square avatars have a better look on our website and theme.

(A toggle box in the settings would be cool to switch between round or square)

Thanks Thomas!

Hello @ron-rollo

Please add the following css-code to your themes style.css-file for a quick solution:

#af-wrapper img.avatar {
    border-radius: 0;
}

Maybe I will also add additional appearance-settings for it in the future – but I cant give you any details about this yet.

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

That fixed it!  We have square avatars again.

Thanks Thomas!

Asgaros has reacted to this post.
Asgaros
Quote from N3k0 on July 19, 2018, 6:44 pm

Hi Team.

I want to display the user post avatars rounded, i add

#af-wrapper img.avatar {
    border-radius: 50px;
}
  1. #af-wrapper img.avatar {
  2. border-radius: 50px;
  3. }
#af-wrapper img.avatar {
    border-radius: 50px;
}

but i cand find the others elements to make it rounded. In #af-wrapper .user-online .avatar do nothing (Image 1)

Also, i want to add the avatar in the last post cell in forum and topics view (image 2)

Cheers

 

In the near future if you ever want to know where something is… right click on the border area of the circle and click down on inspect element. I use this feature to locate and to add in my design to see how something would look on live before doing any editing in php files or css files. Just a little advice from a novice coder.