Horizontal Hover Mini-Profile

[charoum]

Alright this is an ADAPTATION from leif 's hover mini profile & Boy_Wonder 's horizontal profile

if you use this please be sure to credit them for the base codes <3


PREVIEW


NOW THEN THE STEPS

CUSTOM PROFILE FIELDS

Background Image - Text Field ( make sure it's URL(plain text)
Hover Image - Text Field ( make sure it's URL(plain text)

feel free to make the background & hover images staff-editable only, default or member customizable

CSS

Leif's Hover || Admin > Themes > Your Theme > Advance Styles & CSS > Style Sheet and add this to the bottom

table.fireminiTwo, .fireminiTwo td {
   border: 1px solid #5f1314;
   padding: 2px;
   border-collapse:collapse;
}


.firemini { width:100%; height:100%; opacity:0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }
.firemini:hover { width:100%; height:100%; opacity: 1; background-color:#437a6c; }
.fireminiinside { width:152px; margin:auto; text-align:center; }

.mpav { overflow: hidden; }

Code by Bronzed Hawkeye || Next find the " .mini-profile { color: " code and replace it with the following

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; text-align: @mini_text_align; overflow: hidden; padding: 3px; width: widthpx; height: heightpx !important; }

unfortunately % did NOT work with this mini profile so stick with pixels for your width and height.

( for quickly finding the code click inside the CSS ctr+f and paste " .mini-profile { color: @mini " into the box, hit "enter" and it'll highlight the code you searched for. Make sure it's the line you need and continue )


Layouts & Templates > Mini Profile || the hover and formatting - customize to your hearts content <3 this is a bare-bones mini-profile with the hover affect over it.

replace the existing code with the following

<div class="$[miniprofile_class]" style="background-image: url('http://i889./ac97/exestential/miniprofs_zpsbb74568f.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Background Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;">
<div class="firemini">
<div class="fireminiinside">
<div class="$[miniprofile_class]" style="width:845px; height: 175px;border-bottom: 1px solid white; background-image: url(http://i889./ac97/exestential/bgmini_zps0a971309.png);border-radius:15px;{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;">
     
   
<table border="1" bordercolor="" style="margin-top: -50px;" width="780" cellpadding="1" cellspacing="1">
<tr>
     
       
   <td style="text-align: center;position: relative; top: 20px; left: 25px;">
   <b>$[user]</b><br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.group]}
$[user.group.name]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
   
       <p style="font-size: x-small; text-align: center;">{if $[user.custom_title]}Custom Title:<br /> <i>$[user.custom_title]</i></p>{/if}
$[user.warning.bar]
<br />

{if $[user.gender]}Gender: $[user.gender.text] $[user.gender.image]{/if}

{if $[user.is_member]}
<div class="info" style="font-size: 9px !important; text-align: center;">
<b>Posts:</b> $[user.posts]<br />
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.miniprofile_badge]}
<div class="$[user.miniprofile_badge_container_class]">
{foreach $[user.miniprofile_badge]}
$[user.miniprofile_badge.icon]
{/foreach}
</div>
{/if}
</td>
       
<td>
   {if $[user.avatar]}
<div class="avatar" style="position: relative; top: 50px; text-align:center;left:15px;">$[user.avatar]</div><br />
{/if}
</td>
       
</tr>
</table>
   
</div>
</div>
</div>
</div>




Next go to Layout Templates - Thread - Post List

replace it with

{foreach $[post]}
<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
<td class="$[post.unblocked_class]">
<table role="grid">
<tr>
                   <td class="content">
                       <div class="left-panel">
$[post.created_by_user.miniprofile]
</div>
                       <div class="content">
<article>
<div class="content-head ui-helper-clearfix">
<div class="info">
$[post.thread]
<span class="date">$[post.date]</span>
{if $[post.how_posted]}
<span class="post-method">via $[post.how_posted]</span>
{/if}
$[post.likes]
</div>
<div class="controls">
$[post.quote_button]
$[post.edit_button]
$[post.likes.button]
$[post.select_options]
</div>
</div>
<h3 class="title aria-hidden">Post by $[post.created_by_user.name] on $[post.date]</h3>
<div class="message">$[post.message]</div>
</article>
                           <hr style="border: 1px dashed #E6861A; opacity: 0.6;">
{if $[post.edited]}
<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>
{/if}
{if $[post.created_by_user.signature]}
<div class="signature">$[post.created_by_user.signature]</div>
{/if}
</div>
                       <br style="clear: both;" />
                   </td>
</tr>
</table>
</td>
{if $[post.is_blocked]}
<td class="$[post.blocked_class] content center">
<div class="message note pad-bottom">This post is hidden</div>
$[post.display_blocked_post_button]
</td>
{/if}
</tr>
{/foreach}
{if !$[post]}
<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
{/if}

[Thomasss]

Very nice.

[charoum]

thank you <3

[mysteryandlove]

So I'm trying to use this here.

I put in all the code the right way and made sure all the numbers matched up and stuff. But the miniprofiles are being cut off. Like if you go to the rules thread you'll see what I mean. The hover and everything else is working fine but you can only see a little bit of it because it's being cut off for some reason. Idk what's going on.

Can you please help?

[Boy_Wonder]

btw I really REALLY love this code - I've had the same problem as above however

[T.C.]

I know this is an old thread, but have just started using it and found the solution to the hover aspect width issue.

Change the width here to match the width in red to match the width in the second code.

SPOILER: Click to show

<div class="$[miniprofile_class]" style="width:845px; height: 175px;border-bottom: 1px solid white; background-image: url(http://i889./ac97/exestential/bgmini_zps0a971309.png);border-radius:15px;{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;">

SPOILER: Click to show

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; text-align: @mini_text_align; overflow: hidden; padding: 3px; width: widthpx; height: heightpx !important; }

[Don't Eat This]

There are fields missing from the mini profile and there's a huge gap between different fields. There's also a problem with displaying currency in the mini profile with the Monetary System plugin. It tends to double the display of currency (and bank if I have bank visible in the mini profile).

I need a little help fixing these issues.

Without Monetary System being displayed:


With Monetary System being displayed:

[Makao]

Very helpful ^u^.