The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Profile avatar on Hover

View previous topic View next topic Go down

Solved Profile avatar on Hover

Post by yayayes on November 10th 2015, 9:30 am

Hello guys

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:
http://help.forumotion.com/t143444-profile-field-on-hover
http://help.forumotion.com/t143627-hover-over-avatar
My Forum: thelosteden.com
Forum Version: Invision




Last edited by yayayes on November 11th 2015, 6:38 am; edited 1 time in total

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 on November 10th 2015, 10: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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes on November 10th 2015, 11:12 am

Thank you Ange Tuteur. Here is the ID
ID: TestNPC
PASSWORD:


Last edited by yayayes on November 11th 2015, 6:39 am; edited 1 time in total

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 on November 10th 2015, 11: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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes on November 10th 2015, 11:28 am

Oh sorry >< I changed it just now

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 on November 10th 2015, 11: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 :


You might need to add some line breaks though. Think

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes on November 10th 2015, 3:02 pm

It's working! You are amazing as ever 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?


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 on November 10th 2015, 5: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
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile avatar on Hover

Post by yayayes on November 11th 2015, 6:38 am

It looks very nice. Thank youagain Ange Tuteur!

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 on November 11th 2015, 10:50 am

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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