Change Avatar on mouseover like Facebook
-
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
-
Anyone?
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.
are you talking about facebook profile pages? how the “change picture” link shows onmouseover?
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
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.
@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;
}`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?
this was meant for just one persons site, if you give me a link to your site i can adjust the css
Sure: Link to a Profile
Thanks!
@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
Where is the “117px” in the jquery, and where is the “span’s css padding?”
@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
@timothyjunior You have been mislead by @vegasparty607 that is not his site. It’s @gunju2221
Thanks MikeyD. Don’t quite understand why he spammed the topic with my site however.
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.
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
@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)
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-newSo did it work correctly for anyone?
@Timothy Tarmon Jr am still trying to see what am i doing wrong. its not working for me right now.
regards
@naijaping where did you create the file member-header.php inside your theme
@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
@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?
Did anyone get this working?
- The topic ‘Change Avatar on mouseover like Facebook’ is closed to new replies.