Mini-Profile help - profile sections on hover?

[Water Crystals]

Site: zyver-rpg.com
I've been trying to find something for this for a while. Will try my best to explain. In the picture below, I'd like the yellow part of the mini-profile to be seen by mouse-over on the member's avatar. I want it to look like how Wormopolis has on here. And then the "member is online" when it's there to be aligned left but beside the gender icon (aligned right, where it is now) if it's there.

Note: I'm also using this plugin: support.proboards.com/thread/551258/custom-profile-field-image-dropdowns ironically done by Wormopolis, which needs to display on hover with everything else too. But yeah, look at Wormopolis' mini-profile in that thread and it's how I want my mini-profiles to look (but matching my site colours obviously, and maybe a black border if not inherited?



I hope that makes sense! The mini-profiles are just so long as they are now and I want to make this a way to save room yet look nice. To be clear, I don't want to replace the avatar on hover just have a box appear beside it with all the custom fields and monetary amount etc. I have the awards plugin and others below that I'd like left untouched.

[tis ✻ bry]

Hey Water Crystals!

what you want to accomplish here is definitely possible. I'll try to explain best I can what I believe is the cleanest and simplest way to do it using a screenshot from your site and a default mini-profile layout template code.



Alright so I've kind of marked out the different sections you'll need to encompass. the yellow is the big container that will allow the mini profile to hover. the red is the box that will hover. and finally, the sky blue is the things that will have to be moved.

if you go to admin > themes > layout templates > mini-profile, if you haven't touched it in the past, the code should be a default one:

SPOILER: Click to show

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>


The sections that need editing are:

SPOILER: Click to show

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />

{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}

</div>

Wrap everything in yellow in a container, like so:

SPOILER: Click to show

<div class="minip-hover">
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>

For ease, we're going to move the gender and online status sections first. take the codes corresponding to those two sections and move them right underneath the closing {/if} for the {if $[user.avatar]}:

SPOILER: Click to show

<div class="minip-hover">
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.is_member]}{if $[user.is_online]}<span class="italic">Member is Online</span>{/if}{/if}{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>

Now, wrap everything underneath that in another div:

SPOILER: Click to show

<div class="minip-hover">
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.is_member]}{if $[user.is_online]}<span class="italic">Member is Online</span>{/if}{/if}{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
<div class="minip-info">
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>
</div>

So now your entire mini-profile template should look like:

SPOILER: Click to show

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
<div class="minip-hover">
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
       {if $[user.is_member]}{if $[user.is_online]}<span class="italic">Member is Online</span>{/if}{/if}{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
<div class="minip-info">
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
                       Posts: $[user.posts]
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>
</div>
</div>


Now add this to the bottom of your stylesheet (admin > themes > advanced styles and css > stylesheet (tab))

.minip-info { display:none; }
.minip-hover:hover .minip-info { display:block !important }

or, if you want it to show when hovering over the mini-profile itself:

.minip-info { display:none; }
.mini-profile:hover .minip-info { display:block !important }

Unfortunately, I'm not sure if this will hide the pokemon inventory--as that code is added in via plugin and not directly through the layout templates.

Let me know if this doesn't work or you want something changed--I might have inadvertently made a mistake lol

[Water Crystals]

Thanks for the reply! I haven't tried this out yet. Wanted to mention two things.
1) I have edited the mini-profiles in the past. I don't want to replace anything not default so hoping that can be avoided. Will save a copy of everything before I make any adjustments, just in case.
2) I do not want the Pokemon/Inventory to appear in mouse-over; I want those to stay where they are. I only want from Money to Stealth section (though some of those do use plugins).

Here's my mini-profile, if that helps.

SPOILER: Click to show

<div class="$[miniprofile_class]">

$[user]<br />

{if $[user.is_guest]}Guest<br />{/if}

{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}

{if $[user.group]}

$[user.group.name]<br />$[user.group.stars]<br />

{elseif $[user.rank]}

$[user.rank.name]<br />

{if $[user.rank.stars]}

$[user.rank.stars]<br />

{/if}

{/if}

{if $[user.custom_title]}$[user.custom_title]<br />{/if}

$[user.warning.bar]

<br />

{if $[user.avatar]}

<div class="avatar">$[user.avatar]</div><br />

{/if}

{if $[user.personal_text.message]}

$[user.personal_text]<br />

{/if}

{if $[user.is_member]}

{if $[user.is_member]}

<div class="info"><span><span style="font-weight: bold;" class="money_text"></span><span class="money_symbol"></span><span class="money_amount"></span></span><br />

<span class="headings">Posts:</span> $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}

{foreach $[user.mini_custom_field]}

<br /><span class="$[user.mini_custom_field.content_class]"><span class="headings">$[user.mini_custom_field.name]:</span> $[user.mini_custom_field.value]</span>

{/foreach}

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}

</div><br />

{/if}

{if $[user.badges_miniprofile]}

<div class="$[user.badges_miniprofile_container_class]">

{foreach $[user.badges_miniprofile]}

$[user.badges_miniprofile.icon]

{/foreach}

</div>

{/if}
<div class="pokemon_stats peep$[user.id]"></div>

<div class="awards $[user.id] $[user.name]" style="display: table; width: 100%"></div>

</div>

[tis ✻ bry]

Jul 13, 2018 9:40:36 GMT -8 Water Crystals said:

Thanks for the reply! I haven't tried this out yet. Wanted to mention two things.
1) I have edited the mini-profiles in the past. I don't want to replace anything not default so hoping that can be avoided. Will save a copy of everything before I make any adjustments, just in case.
2) I do not want the Pokemon/Inventory to appear in mouse-over; I want those to stay where they are. I only want from Money to Stealth section (though some of those do use plugins).

Oh, awesome! Your mini-profile code does help a lot. ^^

1) I promise that I am not deleting anything that's default, just moving certain sections of the mini-profile so that it can look the way you want.

2) ok, with the code you provided, I can do that.

Use this instead of what's under the final spoiler in my post above:

<div class="$[miniprofile_class]">

$[user]<br />

{if $[user.is_guest]}Guest<br />{/if}

{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}

{if $[user.group]}

$[user.group.name]<br />$[user.group.stars]<br />

{elseif $[user.rank]}

$[user.rank.name]<br />

{if $[user.rank.stars]}

$[user.rank.stars]<br />

{/if}

{/if}

{if $[user.custom_title]}$[user.custom_title]<br />{/if}

$[user.warning.bar]

<br />

<div class="minip-hover">

{if $[user.avatar]}

<div class="avatar">$[user.avatar]</div><br />

{/if}

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}

<div class="minip-info">

{if $[user.personal_text.message]}

$[user.personal_text]<br />

{/if}

{if $[user.is_member]}

{if $[user.is_member]}

<div class="info"><span><span style="font-weight: bold;" class="money_text"></span><span class="money_symbol"></span><span class="money_amount"></span></span><br />

<span class="headings">Posts:</span> $[user.posts

{foreach $[user.mini_custom_field]}

<br /><span class="$[user.mini_custom_field.content_class]"><span class="headings">$[user.mini_custom_field.name]:</span> $[user.mini_custom_field.value]</span>

{/foreach}

</div>

{/if}

</div>

</div>

{if $[user.badges_miniprofile]}

<div class="$[user.badges_miniprofile_container_class]">

{foreach $[user.badges_miniprofile]}

$[user.badges_miniprofile.icon]

{/foreach}

</div>

{/if}
<div class="pokemon_stats peep$[user.id]"></div>

<div class="awards $[user.id] $[user.name]" style="display: table; width: 100%"></div>

</div>

The css codes remain the same.

[Water Crystals]

I really appreciate you taking the time to help and your instructions are easy to follow.

However, this isn't what I wanted. Aside from a stray ] added, everything worked but I wanted it to look how Wormopolis has theirs. When you mouse-over the avatar a box appears to the right of it with the info. What happens here is when you mouse-over the profile just extends to what it is now. Okay for saving space, but again it's not really what I was looking for. 

[Water Crystals]

Bump?

[Water Crystals]

Bump

[Water Crystals]

Bump

[Water Crystals]

Bump. Anyone?

[Water Crystals]

Bump.

tis ✻ bry ?

[Water Crystals]

Bump...

[Water Crystals]

Bump

[Nscalerr 🐺]

Hi Water Crystals

This may not be totally what your after, but it is very close. Adjust the margins to have it show where you want.

/* Mini profile hover.  */
.minip-info {
   display:none;
}
.mini-profile:hover .minip-info {
   position: absolute;
   width: 199px;
   display: block !important;
   margin-top: -275px;
   margin-left: 180px;
}

[Water Crystals]

Jul 25, 2018 2:19:02 GMT -8 Nscalerr 🐺 said:

Hi Water Crystals

This may not be totally what your after, but it is very close. Adjust the margins to have it show where you want.

/* Mini profile hover.  */
.minip-info {
   display:none;
}
.mini-profile:hover .minip-info {
   position: absolute;
   width: 199px;
   display: block !important;
   margin-top: -275px;
   margin-left: 180px;
}

Where do I put it?

[Nscalerr 🐺]

Hi Water Crystals

Add this to the bottom of the stylesheet.