The Original Hover Mini-Profile with colors & staff!

[leif]

Hello everyone! I am Leif aka Aki! I was the first to achieve mini-profiles that hover on the ProBoards service within the day of ProBoards v5 releasing, while other designers were stuck on figuring it out, I achieved it. I would like to share with you all ProBoards v5's original advanced hover mini profile that is extremely customizable with a great deal of profile fields for all of your needs! This is a complete tutorial and code set. Please feel free to modify my code for your own, personal use. You are welcome to be creative. If you do so, please do not redistribute the original code. Please note: I did not approve adaptions to any codes distributed by Adoxography, or any service outside of ProBoards Support. charoum's horizontal profile is the only approval I have ever given.

Due to how much of my time is a commodity at this time, I do not provide much Support. But, all the answers you probably need are already in this thread. Follow the guide's installation exactly, before modifying. Once it's installed and working, than start making small changes until you achieve your desired outcome.

I apologize to those who have been asking for my new mini-profile code that's available on my test board. This code has been exclusive to a role-play I'm a part on for a while. Enough time has passed and it seems people would like it. I have decided to release it for all to use. . I just wanted to thank everyone for all their support and their eagerness to use my new code. Thank-you all for using the old set. I'm glad I was able to create one of the first fully functioning hover codes (without using JavaScript). I'm so pleased to see how many different ways it has been adapted across ProBoards. 

This code by default is set for a Harry Potter theme in mind, but it is editable. This requires some knowledge of basic editing of templates. I wasn't awesome enough to win the Profile Contest, but, I made this before the Profile Contest and have been slapping bugs out. I'm satisfied with this now. This is meant to be an entire board mini-profile revamp, not for just one person. Your admins can have different styles than members while retaining the basic look. If you want a less advance version, please check out the first version.

Notice: This entire template is designed by default for a Harry Potter site; but... Just set it up how it is in the guide to get it all working. Once it's working nice and shiny, you can go back and start editing it with your own fields. Why? Because it's easier to go back, then trying to do it all at once. Take it in steps! Thanks to ashycat! for her dropdown inspiration! 

The Information:

• 200x300 Hover Image. (widthxheight)
• Built for 150x200 avatar. (widthxheight)
• Large border based on member groups.
• Group automatically set!
• Six (6)+ customization fields. 
  
• Option to hide/add more fields via member choice! 
• Biography link
• Plotter link
• Different color schemes based on member groups. 
• MP3 player
• Hover profile
• Option to use auto sorting even if you use images for your group title! 

See it in Action:

• Another RPG: fidelius.forums.net
  

Here's a basic GIF preview without the hover effect that shows the range of colorization, for full effect just visit my test board.

Please be patient. I'm breaking this down step by step!

Changing Avatar Size (RECOMMENDED): 

1. Go to Admin > Themes > Your Theme > Advanced Styles & CSS > Style Sheet tab
2. Around 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; }
3. Now what we're gonna do is change the 150px to 200px.
4. Delete padding: 13px 10px;
   
5. Seven lines below that around line 1150 find this:.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 max-height:200px; 
7. A few lines below that find this: .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. Go to line 976 (or around there) and find: .posts .post .content { padding-left: 10px; vertical-align: top; }
10. Change the 10px to 60px
11. Go to line 1036 (or around there) and find: .messages .item .content { padding-left: 10px; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
12. Change the 10px to 60px
    
13. Save. 

Adding New CSS

1. If you're not already on the style sheet, go to Admin > Themes > Your Theme > Advanced Styles & CSS > Style Sheet tab 
2. At the very end paste this code:.ppinside { width:200px; height:300px; opacity:0;
   transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
}
.ppinside:hover { width:200px; height:300px; opacity: 1; background-color:#52374d;
   transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
}
.ppinside { width:200px; height:300px; margin:auto; text-align:center; }
.leifbox { width: 85px; height:20px; overflow:hidden; float:left; z-index:1; text-align:center; margin-left:10px;line-height:20px; margin-top:5px;}
div.leifbox { background-color: #212429; color: #ffffff; text-align:center; }
.leifbox select {
  background: #212429;
  width: 75px;
  border: 0;
  border-radius: 0;
  height: 20px;
  color: #e6e8e3;
   }
.ac-container{
  width: 100%;
  margin: 5px auto 5px auto;
}
.ac-container label{
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
   margin-left:-20px;
  height: 20px;
  cursor: pointer;
//   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  line-height: 20px;
//   font-size: 19px;
}
//.ac-container label:hover{ background: #5F512E; }
.ac-container input{ display: none; }
.ac-container article{
  //background: rgba(37, 37, 39, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article.article-show{
  -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container article p{
  font-style: italic;
  color: #EFEFEF;
  line-height: 23px;
  font-size: 11px;
  padding: 3px;

}
.ac-container article.article-show{ height: 90px; overflow:hidden; margin:auto; }

.profilehead {
   width:100%;
   height:50px;
   text-align:center;
   overflow:hidden;
   background-color: #68322b;
}

// the blow is how you color your border :)
div.admin div.mini-profile { border: 4px solid #b296bd; }
div.moderator div.mini-profile { border: 4px solid #b18ec0; }
div.icow div.mini-profile { border: 4px solid #97bdc7; }
div.govt div.mini-profile { border: 4px solid #77b1a1; }
div.hydra div.mini-profile { border: 4px solid #acca97; }
div.pyralis div.mini-profile { border: 4px solid #be889d; }
div.witchhunter div.mini-profile { border: 4px solid #c99382; }
div.adult div.mini-profile { border: 4px solid #97a3b1; }
div.magicalcreature div.mini-profile { border: 4px solid #a09696; }
div.student div.mini-profile { border: 4px solid #b1a572; }
div.child div.mini-profile { border: 4px solid #a78385; }
3. Save (we'll get back to editing the colors).

The Template:

1. Go to Themes > Layout Templates > Mini-Profile
2. Select all code and press backspace or delete to empty it out
3. Copy this code in it's entirety: <!-- Mini-Profile by Nick of Fidelius -->
<div class="{if $[user.group.name] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "ICoW"}
icow
{elseif $[user.group.name] == "GovtEmployee"}
govt
{elseif $[user.group.name] == "HydraMember"}
hydra
{elseif $[user.group.name] == "Pyralis"}
pyralis
{elseif $[user.group.name] == "WitchHunter"}
witchhunter
{elseif $[user.group.name] == "Adult"}
adult
{elseif $[user.group.name] == "MagicalCreature"}
magicalcreature
{elseif $[user.group.name] == "Student"}
student
{elseif $[user.group.name] == "Child"}
child
{/if}">

   <div class="$[miniprofile_class]" style="width:200px;height:400px;">
   <div class="profilehead"><div style="padding-top:15px;text-shadow: 1px 1px 1px #000; color: #ffffff;">$[user]{if $[user.custom_title]}<br />$[user.custom_title]{/if}
</div> </div>
   <div style="width:100%;height:300px;background-image: url('http://storage.proboards.com/5598878/i/V4FVmNuKAkTX5MxkH7M9.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;text-align:center;clear:both;"><div class="pphover"><div class="ppinside">
       <div style="height:5px;clear:both;"></div>
       <div style="max-width:150px;max-height:150px;margin-left:auto;margin-right:auto;">$[user.avatar]</div>

<section class="ac-container">
     <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-5px;line-height:20px;font-size:12px;">In Character</div></label>
     <article class="ac-small article-show">
<!-- In Character -->
<!-- CUSTOM BOX ONE -->
<div class="leifbox">
<span class="magicalability" title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical Abilities"}$[user.mini_custom_field.value]{/if}{/foreach}">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX ONE-->
<!-- CUSTOM BOX TWO -->
<div class="leifbox">
<span title="Age">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX TWO-->
<!-- CUSTOM BOX THREE -->
<div class="leifbox">
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical School"}$[user.mini_custom_field.value]{/if}{/foreach}">School</span>
</div>    
<!-- END CUSTOM BOX THREE-->
<!-- CUSTOM BOX FOUR -->
<div class="leifbox">
<span class="datinghover" title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Dating"}$[user.mini_custom_field.value]{/if}{/foreach}">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}</span>
</div>
<!-- END CUSTOM BOX FOUR-->
<!-- CUSTOM BOX FIVE -->
<div class="leifbox">
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Occupation"}<span title="$[user.mini_custom_field.value]">Job</span>{/if}{/foreach}
</div>
<!-- END CUSTOM BOX FIVE -->
<!-- CUSTOM BOX SIX -->
<div class="leifbox">

       <!-- drop test-->
             
       <form name="theash">
           <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:75px;height:18px;margin-top:1px;border:0px;">
               <option selected="selected">    ------</option>
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Biography Link"}<option value="$[user.mini_custom_field.value]">biography</option>{/if}{/foreach}
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter Link"}<option value="$[user.mini_custom_field.value]">plotter</a>{/if}{/foreach}
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker Link"}<option value="$[user.mini_custom_field.value]">tracker</a>{/if}{/foreach}
       {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Diary Link"}<option value="$[user.mini_custom_field.value]">diary</a>{/if}{/foreach}
       {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Requests Link"}<option value="$[user.mini_custom_field.value]">requests</a>{/if}{/foreach}

   </select>
</form>
       
</div>
<!-- END CUSTOM BOX SIX -->

<!-- End In Character -->
     </article>
     <label><input name="accordion-1" type="radio" /><div class="leifbox" style="width:180px;height:20px;text-align:center;margin-left:10px;margin-top:-15px;line-height:20px;font-size:12px;">Out of Character</div></label>
     <article class="ac-medium">
<!-- Out of Character -->

<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:5px;margin-left:10px;line-height:20px;">
$[user.posts] posts
   </div>
<div class="leifbox" style="float:left;height:20px;text-align:center;margin-right:10px;margin-left:5px;line-height:20px;">
   $[user.likes] likes
   </div><div style="clear:both;"></div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:5px;margin-left:10px;line-height:20px;">
   <img src="http://i.imgur.com/xrTtguD.png" style="width:15px;height:14px;" /> <span class="money_amount" title="Galleons"></span>

</div>
<div class="leifbox" style="height:20px;text-align:center;margin-top:5px;margin-right:10px;margin-left:5px;line-height:20px;">

{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Alias"}{if $[user.is_online]}<span style="color:#8ccf55;" title="Online">$[user.mini_custom_field.value]</span>
{else} <span title="Offline" style="color:#cf5558;">$[user.mini_custom_field.value]</span>{/if}{/if}{/foreach}



</div>

       {foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP3 Link"}
   <div class="leifbox" style="float:left;width:180px;height:20px;text-align:center;margin-top:5px;margin-left:10px;line-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>
</div>
   {/if}
{/foreach}
         
<!-- End out of Character -->
         
     </article>
           
</section>


</div></div></div>
       <div class="profilehead">$[user.group]
</div>

</div>
</div>
4. Paste (CTRL + V) into the empty field
5. Save!

The Footers:
Edit your Global Footers and add the following:
<script>// This is for ProBoards leif's mini profile; using accordion jss via radio buttons
$(document).ready(function(){
$('.ac-container input:radio').change(function(){
var $label = $(this).parent();
$label.siblings().filter(function(){
return !!$(this).find('input:radio').length;
}).next().removeClass('article-show');
if(this.checked){
$label.next().addClass('article-show')
}
});
});
proboards.on('pageChange', function() { $(document).ready(function(){
$('.ac-container input:radio').change(function(){
var $label = $(this).parent();
$label.siblings().filter(function(){
return !!$(this).find('input:radio').length;
}).next().removeClass('article-show');
if(this.checked){
$label.next().addClass('article-show')
}
});
}); });
proboards.on('afterSearch', function() { $(document).ready(function(){
$('.ac-container input:radio').change(function(){
var $label = $(this).parent();
$label.siblings().filter(function(){
return !!$(this).find('input:radio').length;
}).next().removeClass('article-show');
if(this.checked){
$label.next().addClass('article-show')
}
});
}); });</script>
This will allow the In Character/Out of Character sections to load and load on every single page. 

Editing the Custom Profile Fields: 

Editing fields is never fun! I know, but, we gotta do this! 

1. Go to Admin > Members > Custom Profile Fields
2. Fill out profile fields as needed, keep in mind by default this template only has 4 extra spaces (5 if you delete the likes and replace it). But, you can have as many as you want on your regular profile! There are some extra hidden ones! 
3. MP3 Link is built into this template so it's simple to add.
4. Be sure to add a field titled Biography
5. Be sure to add a field titled Plotter
   
6. Be sure to add a field called Hover Image
7. Be sure to create a field called Background Group
8. Create a field called MP3 Link if you want MP3s
9. The default fields this template includes are Year, Character Age, Blood Status, Relationship Status, Dating, Player Name
10. Let's say you want to replace Year with whatever simply find this in the Mini-Profile Template: {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach}
11. Replace the word Year with whatever field you created in Custom Profile Fields
12. For the others repeat steps 10 & 11

Notice: The relationship status field is a bit different, if you hover over it it displays the Dating field. On our RPG we currently use it like "Dating" for relationship status and when hovering over it states "Julien Sol". Relationship Status = shown, Dating = hover. 

Notice: Custom box three combines the fields: Year, House, and School. Change it how you'd like. This was meant to be an example of how advanced you can get! 

Hover Image size is 200x300. This is your regular image that is shown. When hovered over it reveals the data. Avatar size is 150x200. This avatar is shown under the hover. Some asked why don't I make the avatar much, much bigger? Simple: Proportions, easier on ProBoards thumbnails to generate using smaller sizes, and I prefer setting it this way. It's personal preference to me so I don't mess around with the default avatar coding as much.

Advanced Feature: Show or Hide fields based on user choice.
There's a new feature now that's called... Hide! Do you have more than 6 options? That's no problem! You can easily hide one with a custom profile field. Sometimes showing 3 in one field like we did for School isn't enough, right? Find Custom Box Three:
<!-- CUSTOM BOX THREE -->
<div class="leifbox">
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical School"}$[user.mini_custom_field.value]{/if}{/foreach}">School</span>
</div>    
<!-- END CUSTOM BOX THREE-->
Replace that with:
<!-- CUSTOM BOX THREE -->
<div class="leifbox"{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hide School"}{if $[user.mini_custom_field.value] == "Yes"} style="display:none;"{/if}{/if}{/foreach}>
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical School"}$[user.mini_custom_field.value]{/if}{/foreach}">School</span>
</div>    
<!-- END CUSTOM BOX THREE-->
That code above will hide the 'School' field and give it an option in your profile. If Suzy selects to hide her school, nobody sees the school. You can let your members mix/match these. This is an ADVANCED feature. You will need to add a field to the Custom Profile Fields called 'Hide School' with the options Yes and No. 

If you keep doing this you can by default HIDE some extra fields and have certain ones show and let your members decide. 

Want to hide a field by default? Use this instead:
<!-- CUSTOM BOX THREE -->
<div class="leifbox"style="display:none;{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Show School"}{if $[user.mini_custom_field.value] == "Yes"} display:inline;{/if}{/if}{/foreach}">
<span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value] year{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "House"}$[user.mini_custom_field.value] at{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Magical School"}$[user.mini_custom_field.value]{/if}{/foreach}">School</span>
</div>
<!-- END CUSTOM BOX THREE-->


The above will require a field called 'Show School' instead of Hide.

Background Group/Colors: 
This feature should automatically select a border color/group based on the group the MEMBER is sorted into. I highly recommend setting the group description for each group to a single word so you can edit it into a code. 

1. Add in your groups in the header of the code using the DESCRIPTION word for each group.
   
2. For example I added ICoW for International Confederation of Wizards
3. Find this code in the Mini-Profile template:<div class="{if $[user.group.description] == "Administrator"}
admin
{elseif $[user.group.name] == "Moderator"}
moderator
{elseif $[user.group.name] == "ICoW"}
icow
{elseif $[user.group.name] == "GovtEmployee"}
govt
{elseif $[user.group.name] == "HydraMember"}
hydra
{elseif $[user.group.name] == "Pyralis"}
pyralis
{elseif $[user.group.name] == "WitchHunter"}
witchhunter
{elseif $[user.group.name] == "Adult"}
adult
{elseif $[user.group.name] == "MagicalCreature"}
magicalcreature
{elseif $[user.group.name] == "Student"}
student
{elseif $[user.group.name] == "Child"}
child
{/if}">
4. Modify the names between the groups. Our example ICoW can be changed to Human and the lowercased icow can be changed to human. For simplicity reasons keep it the same. Remember what you did here! 
5. Keep doing these until you replaced/added all of your groups. 

Help! I use images as my group name, how can I get this to work?
Many forums tend to use [img src="linkhere"] for their group titles. So, instead of this use Description to declare the group field:

Just click the group name field and a popup will come up like above that lets you set a description. Just title the Description as a regular group name field, and keep your image. Than use replace the code in the code box above with this:
<div class="{if $[user.group.description] == "Administrator"}
admin
{elseif $[user.group.description] == "Moderator"}
moderator
{elseif $[user.group.description] == "ICoW"}
icow
{elseif $[user.group.description] == "GovtEmployee"}
govt
{elseif $[user.group.description] == "HydraMember"}
hydra
{elseif $[user.group.description] == "Pyralis"}
pyralis
{elseif $[user.group.description] == "WitchHunter"}
witchhunter
{elseif $[user.group.description] == "Adult"}
adult
{elseif $[user.group.description] == "MagicalCreature"}
magicalcreature
{elseif $[user.group.description] == "Student"}
student
{elseif $[user.group.description] == "Child"}
child
{/if}">
This changes the user.group.name to user.group.description to call in the description instead.

Now Let's Paint (Adding Colors):
Okay! Now the colors! Remember that old CSS we saved at the bottom? This is going to be super simple...  Remember the Hufflepuff example above that we changed to Human? Now let's do that with colors:

1. Go back to the style sheet, at the very bottom.
2. Find the fields that look like this (There should be a few):div.admin div.mini-profile { border: 4px solid #b296bd; }
div.moderator div.mini-profile { border: 4px solid #b18ec0; }
div.icow div.mini-profile { border: 4px solid #97bdc7; }
div.govt div.mini-profile { border: 4px solid #77b1a1; }
div.hydra div.mini-profile { border: 4px solid #acca97; }
div.pyralis div.mini-profile { border: 4px solid #be889d; }
div.witchhunter div.mini-profile { border: 4px solid #c99382; }
div.adult div.mini-profile { border: 4px solid #97a3b1; }
div.magicalcreature div.mini-profile { border: 4px solid #a09696; }
div.student div.mini-profile { border: 4px solid #b1a572; }
div.child div.mini-profile { border: 4px solid #a78385; }

3. Change icow to human to match the earlier editing we did. 
4. Just change the CSS to how you want. 
5. Just do this with the others to match your groups and you're done!

I Don't Have a Mini-Profile Border Like You:
Add a border in your regular visual sheet. I like between 7 to 10 pixels. That's all. The CSS will override the border color based on groups. The border, radius, etc will all take affect. 

My Avatar Size isn't working
ProBoards' upload automatically resizes everything to 150x150 or less. This is really bad for RP forums, yes, I know. Simply link to it elsewhere on the web. There are other templates and plugins to prevent uploads. ProBoards' system does a fantastic job at resizing even web images for ProBoards purposes, however, it isn't sizes us RPers are accustomed with. So, simply link to it elsewhere.

Add Peter's Monetary System
Add this to where you want it <span class="money_symbol"></span><span class="money_amount"></span>

Edit: Please do not ask on Fidelius' cbox for help with this code.

[ashycat!]

for like. ten seconds I was all "this looks familiar" Then I had a Edna Mode moment and was all "oh it's you darling!"

THANK YOU FOR PUTTING THIS UP <3

[slave2midna]

OMG I'm so happy that this is here. I've run into a few snags with the Avatar size. I'm sure I adjusted it correctly, but it ended up looking like this:

[leif]

The avatar is likely smaller than the maximum size. The border is constant. But, you can remove the mini border if you'd like. The width is automatically set at 150 width and the border doesn't move with the width, like it does to the height.

On the div.mpavs there's a find: width:150px; max-height:200px;
max-width:150px;max-height:200px;

Try that

ashycat! Thanks! I blame HELGA.

[slave2midna]

Ok, I think maybe I messed up more than I thought. Thank you soooooo much for this help. You're making this worth everything, and I'm excited. Everything about the template is in working order, with the exception of this strange avatar issue.

I fixed it though.

There are actually 2 places in my CSS that were not listed in the instructions that had default values of 150x150. I changed those 2 hieght values to 200px and the border altered itself to look normal. But the Avatar still didn't fit.

I re-loaded the avatar a few times, still too small. But I realized that the issue with the Avatar is that I was "Uploading" it, not "Linking" is. So...future Note to anyone with the same issue. Don't upload Avatar's, link them from the web.

Everything is great! I love this!!!

On a side note, you can see in the image I use the Money Plugin - is that the intended format for it? I don't mind it there, I was just curious if this new code was configured for it like the old one was.

Also, I thought about adding the Gender symbol to the one for my site...but I can't find a good place to put it. Any suggestions?

[leif]

I gneerally keep one of them at 150x150 for ProBoards' reasons. Yeah. It states that in the official documentation. The ProBoards system automatically resizes everything to be 150x150 or smaller. It's really a shame, honestly. I wish they'd change that. There is a plugin you can make to hide the upload option.

Oh! Yes! There is a way to put the money into the code! <span class="money_symbol"></span><span class="money_amount"></span>

Place that where you want it. ^_^

Thank you for bringing those up. I added two new fields to my main post to address these issues for future persons

[slave2midna]

Wow thanks!!!!! That's perfect!! This is the best Template I've seen, I'm so glad you're letting it be used.

Everything looks great. I'm now just looking for the "Gender" line. I think imma replace one of the options with it.

[leif]

Thanks! I'm glad people are liking it. I know it's complex, but, I think it looks gorgeous when set up!

Try {if $[user.gender]}$[user.gender.text]{/if}

[slave2midna]

Yeah, I tried that before, for some reason the Gender text doesn't show up. I thought it was the tags I was using, so I instead replaced the top right most box, I removed the custom profile option and replaced with what you linked. Perhaps I'm putting it in the wrong location?

<div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;">
   {if $[user.gender]}$[user.gender.text]{/if}
   </div>

Let the record show, I can totally live without it so don't over-work it. You've done so much support for me already that I pretty much feel like crap for raising all these questions. It's great how it is, I just couldn't think of any other customer option for that one box, so i was like "OH! Gender!"

[leif]

Hmm! I'm quite tired right now! I'll take a look when I'm more wide awake. I apologize. I never use gender.

[slave2midna]

You get some rest. I'll make do. You've done enough already, thank you for all your help.

[(( Aurora !!]

I love this but I have a few questions;
1) How much editing is allowed? For my mini-profile I prefer the usernames to be larger so I have the links set at large which throws out the links to the biography and plotter so I was thinking of moving them under the avatar into those boxes by at least attempting to add more. But if you prefer your profile not to be played around with that much I will try to find a size which makes all three links behave.
2) Is it possible to have the hover transition just a fade not a spin? And if so can you please tell me how to do that? If it is too much work or not possible that is completely fine too.
3) I have not resized the avatar but I have resized the mini-profile width part and I have found that if you have a signature and your post is not long enough the line dividing the post and signature goes over too far and into the hover image. I am presuming it is because of the size I have the forum set to, but do you know if there is a way to fix this? If you need a link to the site to see what I mean I can do that for you.


slave2midna I replaced the likes part with gender and it works fine for me. This is what I have in that section:{if $[user.gender]}<div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:10px;margin-right:10px;margin-left:10px;line-height:20px;">
$[user.gender.text]{/if}
</div>Ordered that way makes the box disappear if the member has not selected their gender .

[slave2midna]

tried that, thank you for the input.

However sadly, what it does is delete the "liefbox" I assigned it too from the template.

there are 2 reasons I feel like could be happening:

1. the {if} statement indicates that the box/text will only show if Gender is selected. By showing up as blank text, or deleting the box, that first told me that maybe I didn't have a gender selected. --

I switched genders, and updated the profile to see if that would kick it into gear, but it didn't.

2. The top 4 boxes (out of 6 default if you include "Likes" & "Posts") seem to be the only ones ones that cannot be customized. I can get it show up by replace "Likes", and "Posts", but if I try replacing one of the 4 top boxes, it won't.

This wouldn't be an issue, if I didn't have the "Money" section on my board, I'd simply replce "Likes" with Gender, but If I had to choose 1 or the other, I choose money.

What I did instead was created a "Gender" mini-profile option. Yeah, that gives you 2 genders in your profile, but it seemed to be the only way to get it to work.

I feel like those 4 main "liefboxes" are pre-determined to be mini-profile options, so you can't change them to something else like gender.

[(( Aurora !!]

I believe they would be because there is a special part of the code which adds them in and anything that goes into that area that is not a custom profile field will not work. If you copy the boxes part I can try make it the first box for you so you do not need to put two genders into your profile?

[leif]

Dec 15, 2013 7:58:09 GMT -8 slave2midna said:

You get some rest. I'll make do. You've done enough already, thank you for all your help.

I still haven't really slept. ><'

Dec 18, 2013 4:20:58 GMT -8 (( Aurora !! said:

I love this but I have a few questions;
1) How much editing is allowed? For my mini-profile I prefer the usernames to be larger so I have the links set at large which throws out the links to the biography and plotter so I was thinking of moving them under the avatar into those boxes by at least attempting to add more. But if you prefer your profile not to be played around with that much I will try to find a size which makes all three links behave.
2) Is it possible to have the hover transition just a fade not a spin? And if so can you please tell me how to do that? If it is too much work or not possible that is completely fine too.
3) I have not resized the avatar but I have resized the mini-profile width part and I have found that if you have a signature and your post is not long enough the line dividing the post and signature goes over too far and into the hover image. I am presuming it is because of the size I have the forum set to, but do you know if there is a way to fix this? If you need a link to the site to see what I mean I can do that for you.


slave2midna I replaced the likes part with gender and it works fine for me. This is what I have in that section:{if $[user.gender]}<div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:10px;margin-right:10px;margin-left:10px;line-height:20px;">
$[user.gender.text]{/if}
</div>Ordered that way makes the box disappear if the member has not selected their gender .

Hi! Really tired so gonna try my best to answer.

1) Go wild. I wrote the basics of the first v5 code and now they're all over the place in custom themes, Trinity Blair's amazing work, and the folks at her site. I love seeing these creations. So, simply... Go wild. Do what you'd like. . I personally designed this the way I like it for the site I primarily play/code for. People kept begging in our cbox for it, so I just released it out to the public when I made an update to the one over at Firewhiskey & Coke. I'll release the new code when I upgrade F&C's again, which won't be for a long time.
2) Yup. .firemini { width:200px; height:400px; opacity:0;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
.firemini:hover { width:200px; height:400px; opacity: 1; background-color:#ebc6ad;
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
}
That creates the spin. For a simple fade like my legacy try:
.firemini { width:200px; height:400px; opacity:0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }
.firemini:hover { width:200px; height:400px; opacity: 1; background-color:#ebc6ad; }
Let me know if that works. .
3) I'm personally a fan of big signatures. I know the mini profile intrudes on that and that line. Here's an awesome fix: Move them to the bottom, center beneath both! Here's Stinky666's guide on it:

Placing the signature below the post + mini profile is very simple.
Layout Templates > Thread > Post List

On line 14, or there about, you should see:

<td class="left-panel" rowspan="2">
Remove the red part completely, then go down to line 33 where you will see:
<td class="foot">


Add the following: colspan="2" so that it becomes:
<td class="foot" colspan="2">


And voila. Jobs a good'n
(The above is based on a default PB V5 theme).

-------------

Okay the genders, you're absolutely right. IT slipped my mind. I talked a bit about it in the support and templates board. Ifs within ifs are really iffy with ProBoards. They should work, but they do not and aren't supported right now. Okay so slave2midna the if within if can be fixed I beleive. YOu want it to be the fourth box right?
<div class="leifbox" style="height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;">
       {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Player Name"}$[user.mini_custom_field.value]{/if}{/foreach}

</div>

That's the default for the fourth box. Okay let's rewrite that... Try this:
<div class="leifbox" style="height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;">
      $[user.gender.text]

</div>

Let me know if that works. Basically getting rid of the foreach since gender isn't a custom field either.

Also Aurora, I was wrong. No If needed for gender at all. Just use $[user.gender.text] and you'll be fine. If it's not filled in it'd leave a blank box instead of closing the entire profile prematurely which could happen with the tidbit you're using.

-- -- -- --

To anyone using this code please share the links with me! I'll be happy to add them to the previews. I'm a huge fan of cusotmization! I love to see what people can do. Also don't kill me becuse I canot type right now, i javen't slept in about 40 hours had a stroke last night and it threw me off completely.