Leif's Mini-Profile + HOVER + ADVANCE + BACKGROUND

[leif]

Hello everyone! The long-awaited mini-profile hover is here! I originally created this for my own personal test board, and an RPG called Firewhiskey & Coke. People have found my test board have asked me for helped, taken the code themselves, modified it, made amazing things with it. I never predicted that it'd be so loved for ProBoards. This profile code has been modified a great deal over time, and has become something that is simply... Something else entirely. I apologize for the delay! I fixed a lot of bugs and it's been in active use on a few RPGs as part of a test to make sure it's functioning correctly. 

rpg.proboards.com/post/694/thread You will notice images on the side of Sterling Beaumon, one with a silhouette, and one of Max Krieger. If you hover over them you will notice the backgrounds are different for each. This is called the Rawr feature that will be explained later, it's intended for groups, but can be anything or can be disabled entirely. 

Now without further ado, I will give the code and the instructions. Please follow these carefully. This code will require editing on your part to do what you so want. It will also include editing. A lot of editing. This comes with a different avatar size of 150 width by 200 height. This code takes time to set up.

If you use or modify this code please give credit to Leif @ Delusional. Thank you. Also feel free to reply here with a link to your board! I would LOVE to see how you used it!

1. Go to Admin > Themes > Your Theme > Advance Styles & CSS > Style Sheet
2. At the very bottom add: 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; }
3. Scroll up to line 1143 (or press CTRL F and find .mini-profile { color: } The line should look like this: .mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }
4. Change the 150px at the end where it states width: 150px; to 175px; so it reads width: 175px; instead.
5. Go to line 1150 find the code that reads: .mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; } 
6. Change the max-height: 150px; to 200px to read max-height: 200px;
   
7. Seven lines below that you should find: .avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }
8. Change the max-height: 150px; to max-height: 200px;
9. Save
10. Go to Admin > Members > Custom Profile Fields
11. Fill out profile fields as needed. Anything you want to be mini-profile only use location Mini-Profiles Only, things you want staff editable, check those. This is straight forward. 
12. If you would like an MP3 Link you can include that, it's built into the template. 
13. The default fields this template includes are: Year, Character Age, Blood Status, Relationship Status, Special Ability, Clubs, Player Name, MP3 Link, Hover Image, and Rawr. Of these, Hover Image is a MUST. The order of these do not matter.
14. Once you have everything make sure you stay on the page for a few seconds so it saves. Refresh the page to make sure it's all saved.
15. Go back to Themes > Layout Templates > Mini-Profile
16. Click in the textarea of the code, press control+A to highlight it all and press the DELETE key. 
17. Copy this code in it's entirety: <!-- Mini Profile by leif for http://delusional.freeforums.net/
For live preview please check my test board: http://rpg.proboards.com -->
<div class="$[miniprofile_class]" style="background-image: url('http://i.imgur.com/DySn9Vm.png');{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;">    
   <div class="firemini"{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Rawr"} style="background-image:url('$[user.mini_custom_field.value]'); background-repeat: no-repeat; background-position:center top;"{/if}{/foreach}><div class="fireminiinside">
   <br />$[user]

{if $[user.is_guest]}Guest<br />{/if}
   <br />
$[user.warning.bar]
{if $[user.is_member]}
<div class="info">
<table width="100%" class="fireminiTwo">
<tr><td width="100%" colspan="2" align="center" style="background-color: #002627;"><span style="color: #FFFFFF;">{if $[user.custom_title]}$[user.custom_title]{/if}</span></td></tr>
{if $[user.avatar]}
   <tr><td width="100%" colspan="2" align="center" style="padding:0px;width:150px;max-height:200px;" class="mpav">$[user.avatar]
       </td></tr>
{/if}
<tr><td width="100%" colspan="2" align="center" style="background-color: #002627;"><span style="color: #FFFFFF;">In Character</span></td></tr>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Year"}<tr><td width="50%"><b>Year:</b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{if $[user.mini_custom_field.name] == "Character Age"}<tr><td width="50%"><b>Age:</b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{if $[user.mini_custom_field.name] == "Blood Status"}<tr><td width="50%"><b>Purity:</b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{if $[user.mini_custom_field.name] == "Relationship Status"}<tr><td width="50%"><b><span title="Relationship Status">Status:</span></b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{if $[user.mini_custom_field.name] == "Special Ability"}<tr><td width="50%"><b>Special Ability:</b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{if $[user.mini_custom_field.name] == "Clubs"}<tr><td width="50%"><b>Clubs:</b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
{/foreach}
<tr><td width="100%" colspan="2" align="center" style="background-color: #002627;"><span style="color: #FFFFFF;">Out of Character</span></td></tr>

</table>
<table width="100%" cellspacing="0" cellpadding="0" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;">
<tr><td width="33%" align="center"><b>Posts:</b></td>
<td width="34%" align="center" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;"><b>Likes:</b></td>
<td width="33%" align="center"><b>Coins:</b></td></tr>
<tr style="border-top: 1px solid #5f1314;"><td width="33%" align="center">$[user.posts]</td>
<td width="34%" align="center" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;">$[user.likes]</td>
<td width="33%" align="center"><span class="money_symbol"></span><span class="money_amount"></span></td></tr>
</table>
<table width="100%" class="fireminiTwo">



{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Player Name"}
<tr><td width="50%"><b>Name:</b></td>
<td width="50%">$[user.mini_custom_field.value]</td></tr>{/if}
{/foreach}


{if $[user.gender]}<tr><td width="50%"><b>Gender:</b></td><td width="50%">$[user.gender.text]</td></tr>{/if}
<tr><td width="50%"><b>Status:</b></td>
<td width="50%">{if $[user.is_online]}<font color="#8ccf55">Online</font>
{else} <font color="#cf5558">Offline</font>{/if}</td></tr>
{if $[user.personal_text.message]}<tr><td width="100%" colspan="2" align="center" style="background-color: #002627;"><span style="color: #FFFFFF;">Current Status</span></td></tr>
<tr><td width="100%" colspan="2" align="center" style="text-align: justify; padding: 3px;">
<span style="font-size:12px;">$[user.personal_text] </span>
</td></tr>{/if}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP3 Link"}
   <tr><td width="100%" colspan="2" align="center" style="background-color: #002627;"><span style="color: #FFFFFF;">Playlist</span></td></tr>

   <tr><td width="100%" colspan="2" align="center" style="height:20px;">
   
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100%" height="100%"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="wmode" value="transparent"/><param name="FlashVars" value="mp3=$[user.mini_custom_field.value]"/><br></object>


</td></tr>
{/if}
{/foreach}
</table>

</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}

   </div></div></div>
18. To Change / Add / Remove fields look for these tidbits: {if $[user.mini_custom_field.name] == "Relationship Status"}<tr><td width="50%"><b><span title="Relationship Status">Status:</span></b></td><td width="50%">$[user.mini_custom_field.value]</td></tr>
{/if}
19. Where you see == "Relationship Status", etc change that text to match the Field Name text in the Custom Profile Fields page. Do this for all the entries marked in the mini-profile code.
20. MP3 is already enabled by default, just simply make sure there's an MP3 Link option in the Field Names of the custom profile fields.
21. Personal Status is built into the mini-profile by default.
22. This Mini-Profile code has Peter's Money Code and likes count built in. If you do not want Peter's Money code simply remove it and adjust the other td widths in this section: <table width="100%" cellspacing="0" cellpadding="0" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;">
<tr><td width="33%" align="center"><b>Posts:</b></td>
<td width="34%" align="center" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;"><b>Likes:</b></td>
<td width="33%" align="center"><b>Coins:</b></td></tr>
<tr style="border-top: 1px solid #5f1314;"><td width="33%" align="center">$[user.posts]</td>
<td width="34%" align="center" style="border-right: 1px solid #5f1314;border-left: 1px solid #5f1314;">$[user.likes]</td>
<td width="33%" align="center"><span class="money_symbol"></span><span class="money_amount"></span></td></tr>
</table>
23. The titles of each section can be changed. They are by default in character/out of character. Simply change the titles. 
24. Now, for the Rawr feature... Make background images based on the length of your profile. Average should be roughly 175x600. Here are some examples: i.imgur.com/67PTBGg.png http://i.imgur.com/TmTUgb6.png http://i.imgur.com/nnyDmtk.png
25. Now in Custom Profile Fields make sure the type is drop down selection, then click View/Edit and add them as options. 
26. You can make it staff editable or not. It's up to you. It can be used as a group image or not. Or as a userselectable background. If you prefer to disable the Rawr feature, simply remove the custom profile field entirely. 
27. If you would like your group name/image displayed instead of Rawr (which Rawr was intended for) simply insert: {if $[user.group]}
$[user.group.name]<br />
{/if} where you want it. I personally prefer it over the avatar, the bottom, so let's say you use [ img]linkhere[ /img ] instead of a group title as many legacy v4 users do for v5... Simply use this: <div style="text-align:center;margin-top:-46px;">{if $[user.group]}
$[user.group.name]<br />
{/if}</div> and insert it after: $[user.avatar]
28. Save. 
29. You're done.

[♥ ℒʊ√ ♥]

What a fantastic mini profile setup you've coded, leif! I just saw it in action on your link!

[leif]

The live preview is down due to a newer version of the code being up. I apologize about this causing misconceptions. The new code is not yet released.

[slave2midna]

delete this post. I'm dense and didn't see the other open thread.

[owydelu]

My mini profile gets over the text. Can you please help me with this thing?

EDIT: NVM, I changed the 10px to 45px at the post.content line

[de Plume]

Is there a way I can change the transition... type(?) to something other than fade? I'd like to make it slide. ^^;

[Janella]

I love it. But the background of the fields is a green color. Is there a way to change that?

[Mookie]

Jul 2, 2015 6:35:36 GMT -8 Janella said:

I love it. But the background of the fields is a green color. Is there a way to change that?

Go into css!
Open up a proboards thing and use the color wheel, copy the color and paste it into the background color

It'll look like this:
background-color:#437a6c; }paste the color you want into it, then your done!

Hope I helped ^-^