Notifications
Clear all

[Solved] Avatar customisation & Large login avatar

7 Posts
2 Users
0 Reactions
1,367 Views
Posts: 43
Customer
Topic starter
(@wp-user)
Member
Joined: 4 years ago

Hello, could you please assist me with 2 questions:

1) How can I customise user avatars to look like either Reddit (ie. just username without avatar) or Quora (ie. small round avatar next to username)? (Attached image: massive avatar.png).

2) When I log to my website, there's a huge avatar icon below the phrase "You are logged in as User | Log out". How can I remove this? (Attached image: avatar customisation.png).

avatar customisation
massive avatar
Topic Tags
6 Replies
Elvina
Posts: 1403
(@elvina)
Support
Joined: 5 years ago
5 Replies
Customer
(@wp-user)
Joined: 4 years ago

Member
Posts: 43

Thanks @elvina. But I'm trying the link and being directed to a 404 page.

Elvina
(@elvina)
Joined: 5 years ago

Support
Posts: 1403

@haroon-atif,

You just need to use the following CSS code. Please navigate to Dashboard > Comments > Settings > Styling admin page, put the following CSS code in the "Custom CSS code" textarea:

#wpcomm .wc_social_plugin_wrapper {
display: none;
}

Please don't forget to delete all caches and press Ctrl+F5 (twice) on the frontend before checking to reload the updated CSS file.    

Customer
(@wp-user)
Joined: 4 years ago

Member
Posts: 43

Thanks for the help @elvina. This has removed the massive avatar. Any suggestions for my other question above? (sorry, I seem to have attached the wrong image for each question). I've attached the correct image here.

1) How can I customise user avatars to look like either Reddit (ie. just username without avatar) or Quora (ie. small round avatar next to username)? I'd prefer to go for the Quora stlye..

Avatar customisation
Elvina
(@elvina)
Joined: 5 years ago

Support
Posts: 1403

@haroon-atif,

 Quora (ie. small round avatar next to username

Please navigate to the Dashboard  > Comments > Settings > Styles admin page put the following CSS code in the "Custom CSS Code" textrarea:

#wpcomm .wc-comment .wc-comment-left {
width: 33px !important;
margin-left: 58px;
margin-top: 16px;
}

#wpcomm .wc-comment-label span {
display: none !important;
}

#wpcomm .avatar {
border-radius: 50%;
}
#wpcomm .wc-blog-post_author > .wc-comment-left .wc-comment-label {
display: none;
}

just username without avatar

Use the following code:

#wpcomm .wc-comment .wc-comment-left {
display: none;
}

In any case please don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking.

Customer
(@wp-user)
Joined: 4 years ago

Member
Posts: 43

Perfect, thanks for the help @elvina

Share:
Scroll to top