Avatar Mix Match between Gravatar and BuddyPress Picture

[GideonLupine]

The picture shown in the menu does not match what I have in buddypress.

I am not even sure of the correct terms to describe the problem.

Kleo seems to be showing gravatar only in the menu.

Attachments:

You must be logged in to view attached files.

[sharmstr]

How are those people logging in? Through WP or through a social account? If through a social account, is it by using the built in FB routines or are you using a plugin for that?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[GideonLupine]

The website is http://cantmisshwp.com/

We are using Login Radius http://www.loginradius.com/

Not sure what we missed and where. Did we miss a flag or setting somewhere?

[sharmstr]

No, you didnt. https://archived.seventhqueen.com/forums/topic/issue-displaying-image

Copy the contents of the attached file and paste into your childs functions.php file. Also put this css in your child css file.

COPY CODE

kleo-rounded-noborder {
border: none !important;
}

The css is off the top of my head. I cant remember the exact css I used. Let me know if it doesnt work.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[GideonLupine]

The image matches now but it appears square not round as it was.

I think the CSS will need a little tweaking.

I will give the CSS a go, and let you know my results.

[GideonLupine]

I just noticed something about the class:

<img src="http://lh3.googleusercontent.com/-wy1AFyJuXMo/AAAAAAAAAAI/AAAAAAAASHs/C72PY3xdNC0/photo.jpg" alt="Profile picture of Gideon Lupine" class="avatar avatar-social-login" height="25" width="25" style="float:left; margin-right:10px">

[GideonLupine]

I just noticed something about the class:

COPY CODE

<img 
src="http://lh3.googleusercontent.com/-wy1AFyJuXMo/AAAAAAAAAAI/AAAAAAAASHs/C72PY3xdNC0/photo.jpg" 
alt="Profile picture of Gideon Lupine" 
class="avatar avatar-social-login" 
height="25" width="25" 
style="float:left; margin-right:10px">

[GideonLupine]

Is there a way to edit or delete a previous post?

Anyway, this is my current output.

COPY CODE

<a title="Gideon Lupine" 
class="kleo-bp-user-avatar kleo-rounded-noborder kleo-avatar-menu js-activated" 
href="http://cantmisshwp.com/members/gideonlupine/" 
style="line-height: 88px;">
<img 
src="http://lh3.googleusercontent.com/-wy1AFyJuXMo/AAAAAAAAAAI/AAAAAAAASHs/C72PY3xdNC0/photo.jpg" 
alt="Profile picture of Gideon Lupine" 
class="avatar avatar-social-login" 
height="25" width="25" 
style="float:left; margin-right:10px">
</a>

[sharmstr]

Try this

COPY CODE

.kleo-rounded-noborder {
border-radius: 100%;
border: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[GideonLupine]

Very strange. You wrote the same thing I wrote, and it still does not work.

I actually prefer the square, but I would still like to know why our CSS does not work.

Not it is just a challenge.

Using inspector I see CSS inspector:

COPY CODE

.kleo-bp-user-avatar img {
width: 25px;
border-radius: 100%;
}

[sharmstr]

Because. Login Radius puts “avatar avatar-social-login” for the classes on the img, not “kleo-bp-user-avatar”

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[GideonLupine]

Ah, so what do you think of this? It seems to work. Do I need both CSS changes or just the one?

I ask this because I am not clear on the exact nature of your PHP if-then changes in the child theme.

I get the first part, but not the last two.

COPY CODE

.kleo-rounded-noborder {
border-radius: 100%;
border: none;
}

.avatar-social-login {
border-radius: 100%;
border: none;
}

[sharmstr]

I added the .kleo-rounded-noborder class because I didnt want to set any css on radius’ classes. I have no idea where else they use it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[GideonLupine]

Now it all makes sense. Thanks.

In this instance, because I am using LoginRadius I will use only .avatar-social-login.

I looked through, and modifying it is not causing any issues.

[Author]

Posts