hi, does anyone know the functions code that add Change Avatar on mouseover. have seen it on some buddypress site and i love the function.

thanks

[@funmi-omoba Participant 13 years, 7 months ago]

Anyone?

[@djpaul Keymaster 13 years, 7 months ago]

We have no idea what site you might be referring to when you say “some buddypress site.” I think I know what you mean, which the answer is http://jetpack.me/, but that’s a total guess.

[@timothyjunior Participant 13 years, 7 months ago]

are you talking about facebook profile pages? how the “change picture” link shows onmouseover?

[@funmi-omoba Participant 13 years, 7 months ago]

thanks for your reply, you can check : http://www.lovethistune.com its a buddypress site. and the function is cool. there is a link to change avatar on profile avatar on a mouseover.

regards

[@timothyjunior Participant 13 years, 7 months ago]

it looks like they wrote the code themselves. If you know a little about jquery and bp codex you could just right a simple function to perform this.

give me a link to your site, and i’ll try to right the function for you or you could tell me what the css width/height/margin/padding of your item-header-avatar.

[@timothyjunior Participant 13 years, 7 months ago]

@naijaping . Ok this is what i came up with based on your sites css.

go to your theme’s /member-header.php

find `

`

replace it with this
`

<a href="profile/change-avatar/”>Change Picture

// change avatar
$(document).ready(function(){
$(“#item-header-avatar”).hover(function(){
$(“span”, this).stop().animate({top:”130px”},{queue:false,duration:200});
}, function() {
$(“span”, this).stop().animate({top:”160px”},{queue:false,duration:200});
});
});

`

You could also remove the inline css and place this inside your css file :
`#item-header-avatar {
float: left;
height: 150px;
overflow: hidden;
padding-right: 20px;
width: 150px;
}
#item-header-avatar span {
background: none repeat scroll 0 0 #FFFFFF;
font-weight: bold;
left: 0;
padding: 4px 25px;
position: relative;
text-align: center;
top: 150px;
z-index: 10000;
}`

[@vegasparty607 Participant 13 years, 7 months ago]

Looks good, but some of the avatar on the bottom is cut off, and there is a margin at the top of the avatar.

How do i fix it?

[@timothyjunior Participant 13 years, 7 months ago]

this was meant for just one persons site, if you give me a link to your site i can adjust the css

[@vegasparty607 Participant 13 years, 7 months ago]

Sure: Link to a Profile

Thanks!

[@timothyjunior Participant 13 years, 7 months ago]

@vegasparty607 change #item-header-avatar css `width:160px;height:180px`
change span’s css `padding: 4px 30px; top:180`
in the jquery change `130px` to `160px` and `150px` to `180px`

that should do it, let me know

[@vegasparty607 Participant 13 years, 7 months ago]

Where is the “117px” in the jquery, and where is the “span’s css padding?”

[@naijaping Participant 13 years, 7 months ago]

@Timothy Tarmon Jr, thanks for you effort, just tried this as instructed but seems to have no effect, what am i doing wrong, i just copied member-header.php to my child theme and replaced

with the code provided above but no changes, what am i doing wrong.

regards

[@mikey3d Participant 13 years, 7 months ago]

@timothyjunior You have been mislead by @vegasparty607 that is not his site. It’s @gunju2221

[@gunju2221 Participant 13 years, 7 months ago]

Thanks MikeyD. Don’t quite understand why he spammed the topic with my site however.

[@timothyjunior Participant 13 years, 7 months ago]

Sorry @vegasparty607 but in order for this to look right I will need a link to “your site” . either way i meant for 117px to be 130px i edited my last update , review it.
The span’s css is ` `

@naijaping make sure you made the folders `wp-content/themes/(yourTheme)/members/single/member-header.php`
and not `wp-content/themes/(yourTheme)/member-header.php`

@mikey3d thanks for pointing that out, if that isn’t his site then he must be using the same theme, I have had alot of people wanting help but most don’t like to link to their sites. Kinda odd, since a link with help promote their site.

[@gunju2221 Participant 13 years, 7 months ago]

Well Timothy, I don’t want all of that work to go to waist! I’ll implement it on my site and see how it looks

[@timothyjunior Participant 13 years, 7 months ago]

@gunju2221 Ok, let me know if you want any mods or if it’s not working correctly. ( if its working at all, let me know, thanks)

[@cheese-1 Member 13 years, 7 months ago]

timothy or virtuali, will you help me with this
https://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/how-to-show-if-user-is-online/#post-new

[@timothyjunior Participant 13 years, 7 months ago]

So did it work correctly for anyone?

[@naijaping Participant 13 years, 7 months ago]

@Timothy Tarmon Jr am still trying to see what am i doing wrong. its not working for me right now.

regards

[@timothyjunior Participant 13 years, 6 months ago]

@naijaping where did you create the file member-header.php inside your theme

[@naijaping Participant 13 years, 6 months ago]

@Timothy : i created it at wp-content/themes/(My Theme)/members/single/member-header.php. but funny enough, i cant see members-header.php in my theme file at the wordpress dashboard. i can only see it through my FTC.

thanks

[@timothyjunior Participant 13 years, 6 months ago]

@naijaping hey my mentions tag is this ( @timothyjunior) I would have replied sooner but i really only look at my profile for mentions.

I just checked my own theme for this , and as you said it doesn’t list any folders so I can’t locate mine within wordpress either.

I edit my files threw cpanel. Did you edit your files like instructed?

[@funmi-omoba Participant 13 years, 5 months ago]

Did anyone get this working?