Hi Buddypress,
That is cool, I been wanted to change the sizes ,etc for the avatar for long time as well. Thanks much on this help!
However, my initial help I want is just to ADD an image above each member avatar, without touch any codes (see below link).
I only able to find the php to add this cherry image shown on the members page ONLY? Which I wanted globally on every members!
Here is the link I used for the members page, but also want to locate that (CLASS=AVATAR )for other files and directory that I can also paste the same link global for all avatar.
<div class=”search-item”>
<div class=”avatar”>
Please see before and after example for the cherry above. I needed to find that MAIN/GLOBAL area as well.
Please advise help, thanks
Ops bad input, I put a parentheses instead. hope this wouldn’t take the link away?
<div class=”search-item”>
(img src=”https://www.mysite.com/cherry.png” width=”20%” height=”20%”)
<div class=”avatar”>
Do it using CSS only. For example, try to apply the cherry as background img for all avatars ?
Hi danpb,
Ya, I did this css, it seems like is behind the member avatar? When I mouse over the background link, the cherry image shown, but can’t get it on top of the avatar? Can you possible help me what am I missing?
.message-metadata img, #whats-new-avatar img, #activity-stream div.avatar img, #activity-stream div.activity-avatar img, #groups-list li div.avatar img, .picture-gallery a.picture-thumb img, friend-item div.avatar img {
background-attachment: scroll !important;
background-clip: border-box !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image: url("https://www.mysite.com/cherry.png") !important;
background-origin: padding-box !important;
background-position: 0 0 !important;
background-repeat: repeat !important;
background-size: auto auto !important;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
}
Please advise help, thanks
No idea, but try for the div containing the img: min-height: XX px; where XX = avatar height + cherry height.
ps: use code button when inserting code in a topic. Thx.
Hi danbp,
Thanks for pointing out for your css. Yahoo! Have to play with it and now got it the way I wanted. few more other area to deal with for the same.
Anyway, thanks so much once more for helping 🙂
You have a wonderful day!
