Profile avatar on Hover
2 posters
Page 1 of 1
Profile avatar on Hover
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:
https://help.forumotion.com/t143444-profile-field-on-hover
https://help.forumotion.com/t143627-hover-over-avatar
My Forum: thelosteden.com
Forum Version: Invision
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
Last edited by yayayes on November 11th 2015, 6:38 am; edited 1 time in total
yayayes- Forumember
- Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong
Re: Profile avatar on Hover
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.
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.
Re: Profile avatar on Hover
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
- Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong
Re: Profile avatar on Hover
Thanks.
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. ^^
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. ^^
Re: Profile avatar on Hover
Oh sorry >< I changed it just now
yayayes- Forumember
- Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong
Re: Profile avatar on Hover
Try adding this script :
Modules > JS codes management > New
Placement : In the topics
Then add this to your CSS :
Display > Colors > CSS stylesheet
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 :
Doing so should give this result :
You might need to add some line breaks though.
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.
Re: Profile avatar on Hover
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
- Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong
Re: Profile avatar on Hover
You'll have to update the CSS a bit. Try replacing it with this :
For the vertical alignment, try adjusting it with
, at the moment I have it with 10px. As for the gap on the bottom, try adjusting that with
; 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.
- 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
|
|
Re: Profile avatar on Hover
It looks very nice. Thank you again Ange Tuteur!
yayayes- Forumember
- Posts : 49
Reputation : 1
Language : Thai
Location : Bangkok, London & Hong Kong
Similar topics
» Hover over Avatar
» Profile Rank and Avatar profile problem
» Profile Field On Hover
» Post Profile Appear On Hover
» Last visit Profile on hover
» Profile Rank and Avatar profile problem
» Profile Field On Hover
» Post Profile Appear On Hover
» Last visit Profile on hover
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum