User Avatar Styling Help

[tmh23]

I would like to make some changes to the avatar images. I’ve attached a screen shot of what I’d like to accomplish for both the activity stream in buddypress and with the buddypress activity widget that I am using on the home page.

See screen shot…

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

To provide you correct CSS solution please provide me URL from the screenshot and an admin credentials if the page is private.

Best Regards

Radu

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 ?

[tmh23]

This reply has been set as private.

[Radu]

Hi,

Add this css snipet to wp-admin -> theme options -> general settings -> quick CSS or in kleo-child/style.css

COPY CODE

.alternate-color .activity-list .activity-avatar, .alternate-color .comment-wrap .comment-avatar {
    box-shadow: 0 0 0 3px #f7f7f7 !important;
}

Regards

Radu

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 ?

[tmh23]

That works great! Is there a way to make the avatar a little bigger?

Troy

[tmh23]

I also have one other issue that I noticed last night.
On mobile, the contact envelop button doesn’t appear next to the up arrow?

Troy

[Radu]

Hi,

Please provide a screenshot that pointing out that problem.

Cheers

Radu

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 ?

[tmh23]

I’d like to increase the size of the avatar circles that kleo uses for buddypress avatars throughout the site.
I’ve attached screenshots.

Attachments:

You must be logged in to view attached files.

[tmh23]

I’ve attached screenshots also of how the contact envelope does not appear on mobile. If the phone is held normally it does not appear but if you rotate the phone horizontal it shows.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

For large avatars in activity use this CSS

COPY CODE

#buddypress .activity-list .activity-avatar {
    width: 100px !important;
    height: 100px !important;
}

#buddypress .activity-list .activity-avatar a img {
    width: 90px !important;
    height: 90px !important;
}

#buddypress .activity-list .activity-avatar { margin-left:0 !important; }

#buddypress .activity-list .activity-content { margin: 0 0 0 115px !important; }

And for the quick contact use this CSS

COPY CODE

@media screen and (max-width: 480px)
.kleo-quick-contact-wrapper {
    display: block !important;
}

Regards

RAdu

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 ?

[tmh23]

Added the CSS for the contact fix above but I still don’t see the contact icon showing on mobile with the screen in portrait.

Troy

[Radu]

Oh sorry,

I’ve forgot a { and }

The correct CSS is :

COPY CODE

@media screen and (max-width: 480px){
.kleo-quick-contact-wrapper { display: block !important; }
}

Regards

Radu

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 ?

[keyandcee]

The Code for a lager Avatar is great, but the quality them are low? any solutions for the better quality?

COPY CODE

#buddypress .activity-list .activity-avatar {
    width: 100px !important;
    height: 100px !important;
}
 
#buddypress .activity-list .activity-avatar a img {
    width: 90px !important;
    height: 90px !important;
}
 
#buddypress .activity-list .activity-avatar { margin-left:0 !important; }
 
#buddypress .activity-list .activity-content { margin: 0 0 0 115px !important; }

[Radu]

HI,

Follow this

https://codex.buddypress.org/themes/guides/customizing-buddypress-avatars/

Chers

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