The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Profile avatar on Hover

2 posters

Go down

Solved Profile avatar on Hover

Post by yayayes Tue Nov 10, 2015 8:30 am

Hello guys  Profile avatar on Hover 1f601 

I have seen two similar topics about this. (see link below) However, what I want here is a little different. I hope to display only one specific profile field called 'RPG Stat' whenever someone rollover the profile avatar. So it would show somethink like the image I attached below. Thank you very much in advance, very much appreciated!

,Yaya

The two topic:
https://help.forumotion.com/t143444-profile-field-on-hover
https://help.forumotion.com/t143627-hover-over-avatar
My Forum: thelosteden.com
Forum Version: Invision

Profile avatar on Hover Sample
Profile avatar on Hover Screen%20Shot%202015-11-10%20at%203.01.59%20PM


Last edited by yayayes on Wed Nov 11, 2015 5:38 am; edited 1 time in total
yayayes
yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Solved Re: Profile avatar on Hover

Post by Ange Tuteur Tue Nov 10, 2015 9:44 am

Hi @yayayes,

It should be possible as long as the profile field as a unique id or class to make modifications. However, do you have a test account that I can use to see the forum ? Having one should make it easier to figure out what I need to do. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes Tue Nov 10, 2015 10:12 am

Thank you Ange Tuteur. Here is the ID  Profile avatar on Hover 1f600 
ID: TestNPC
PASSWORD: 


Last edited by yayayes on Wed Nov 11, 2015 5:39 am; edited 1 time in total
yayayes
yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Solved Re: Profile avatar on Hover

Post by Ange Tuteur Tue Nov 10, 2015 10:20 am

Thanks. Smile

Could you display the content you want to show over the avatar in the messages ? I notice I can only see it on the profile page. ^^
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes Tue Nov 10, 2015 10:28 am

Oh sorry >< I changed it just now
yayayes
yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Solved Re: Profile avatar on Hover

Post by Ange Tuteur Tue Nov 10, 2015 10:46 am

Try adding this script :
Modules > JS codes management > New

Placement : In the topics
Code:
$(function() {
  $('.postprofile td[background] > div > .codebox').each(function() {
    $(this).closest('.postprofile').find('.postdetails > center > a').append(this);
  });
});

Then add this to your CSS :
Display > Colors > CSS stylesheet
Code:
.postprofile center > a {
  display:inline-block;
  position:relative;
}

.postprofile center > a > .codebox dd {
  background:rgba(0, 0, 0, 0.8);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.postprofile center > a:hover > .codebox dd {
  opacity:1;
  visibility:visible;
}

I'm not sure if all the fields are using the hide codebox as the container, but if they're not, try adding it around them. This :
Code:
[hide][/hide]

Doing so should give this result :
Profile avatar on Hover Captu126

You might need to add some line breaks though. Think
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes Tue Nov 10, 2015 2:02 pm

It's working! You are amazing as ever Profile avatar on Hover 1f60a  Though I notice a little gap under profile picture that wasn't there before.. could you please help me get rid of it? Also.. how can I move the text down a tiny bit more so it can be in the center and add a round corner to it?

Profile avatar on Hover Textedit_1
yayayes
yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Solved Re: Profile avatar on Hover

Post by Ange Tuteur Tue Nov 10, 2015 4:31 pm

You'll have to update the CSS a bit. Try replacing it with this :
Code:
.postprofile center > a {
  display:inline-block;
  position:relative;
}
 
.postprofile center > a > .codebox dd {
  background:rgba(0, 0, 0, 0.8);
  border-radius:10px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:10px;
  opacity:0;
  visibility:hidden;
  transition:300ms;
  padding-top:10px;
}
 
.postprofile center > a:hover > .codebox dd {
  opacity:1;
  visibility:visible;
}

For the vertical alignment, try adjusting it with
Code:
padding-top
, at the moment I have it with 10px. As for the gap on the bottom, try adjusting that with
Code:
bottom:10px;
; I already added a small offset for this. Just so you know, the size of the container depends on the size of the user avatar, so it may appear differently on different users.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes Wed Nov 11, 2015 5:38 am

It looks very nice. Thank you again Ange Tuteur!  Profile avatar on Hover 1f601
yayayes
yayayes
Forumember

Female Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong

Back to top Go down

Solved Re: Profile avatar on Hover

Post by Ange Tuteur Wed Nov 11, 2015 9:50 am

You're welcome ^^

Topic archived

Have a nice day. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum