AVATAR – SQUARE/CIRCLE

[kjcarleo]

How can I change the avatar shape in the menu to be a square shape vice circle?

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

By adding this css

COPY CODE

li.kleo-user_avatar-nav a img {
    border-radius: 0 !important;
}

Cheers
R.

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

What support service includes ? What not ?

[kjcarleo]

I applied that code but the avatar is still round in the menu. Did you see my previous screenshot, it still looks like that.

Kevin

[Radu]

That it’s the correct selector, provide admin credentials to take a closer look please

try to copy again the code maybe you have paste with some wired characters before or after check, please , now i’ve checked and i cannot see that css loaded into your site so, paste it again and save theme options it should work

Cheers
R

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

What support service includes ? What not ?

[kjcarleo]

Yes! That fixed it for the menu.

But how do I make the one next to “log out” in the sidebar and other places? See attached.

Attachments:

You must be logged in to view attached files.

[Radu]

Use this css

COPY CODE

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 0;
}

#item-header > #item-header-avatar {
    border: 0;
}

The second rule will remove the border for the user profile pic

Cheers
R.

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

What support service includes ? What not ?

[kjcarleo]

Great thanks, is it possible to put any type of border around the square though?

Kevin

[Radu]

Yes, replace border:0; with border:2px solid #ddd;

Cheers
R.

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

What support service includes ? What not ?

[kjcarleo]

I applied that setting in the following places, and it looks like the attachment, did I do something wrong:

.bp-login-widget-user-avatar {
border-radius: 0;
border: 2px solid #ddd;
}

#item-header > #item-header-avatar {
border: 2px solid #ddd;
}

Attachments:

You must be logged in to view attached files.

[Radu]

REplace that css-s with those

COPY CODE

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 5px solid #ddd;
}

#buddypress .rounded, .buddypress .rounded {
    border-radius: 0 !important;
}

Cheers
R.

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

What support service includes ? What not ?

[kjcarleo]

That did the trick, but can I put a white border around the avatar on the menu?

Kevin

[Radu]

Sure, with this css

COPY CODE

li.kleo-user_avatar-nav a img { border:2px solid #ddd;}

Cheers

R.

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

What support service includes ? What not ?

[kjcarleo]

Thanks so much – looks great!!!

[Radu]

Great

Have a nice week

Cheers
R.

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

What support service includes ? What not ?

[Author]

Posts