Mini Profile Template help please. [RD]

[Welshling]

Link to a thread

The problems I'm having with creating a mini profile template are...
1) The background image, that the members are inputting seem to zoom in and or stretch the mini profile area.
- Is it possible to have a background image, that doesn't repeat and doesn't zoom/stretch please?

2) A mysterious 7 is showing in my profile in posts.
- I presume this is because of the amount of custom profile fields I have, and or I've missed off a closing tag or something really simple that I'm overlooking?

<div class="$[miniprofile_class]" style="background-image: url('http://i1052./s445/welshling/true%20blood/fang.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "MP Background Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;">    
<div class="mp" style="background-repeat: no-repeat; background-position:center top;">
<div class="mpi" style="color:#fff;margin-left:-7px;padding-left:4px;">
       
       <br />
       <center>
           $[user]<br>
        <span style="color: #fff;">
           {if $[user.custom_title]}$[user.custom_title]{/if}
           </span>
           {if $[user.personal_text.message]}
<span>
               <i>$[user.personal_text]</i>
           </span>
{/if}
       </center>

{if $[user.is_guest]}
       Guest<br />
   {/if}<br />
       
$[user.warning.bar]
       
{if $[user.is_member]}
<div class="info">
<div class="mptwo" style="color:#fff;">
<table width="100%">

{if $[user.avatar]}
    <tr>
        <td width="100%" colspan="2" align="center" style="width:180px;height:280px;margin-bottom:5px;-moz-border-radius: 15px;border-radius: 15px;" class="mpav">$[user.avatar]
    </td>
    </tr>
{/if}

</table>
 
<table style="padding:8px;margin-top:10px;background-color:#000;border-top-left-radius: 15px;">
<tr>
<td width="100%" colspan="2" align="center">
<span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>PLAYER</b>
</span>
        <br>
    </td>
</tr>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Player"}
   <tr>
    <td width="50%">
       <b>Played by:</b>
       </td>
       <td width="50%">
       $[user.mini_custom_field.value]
       </td>
   </tr>
{/foreach}
   
   {if $[user.gender]}
   <tr>
       <td width="50%">
           <b>Gender:</b>
       </td>
       <td width="50%">
           $[user.gender.text]
       </td>
   </tr>
{/if}
</table>
   <hr>
<table style="padding:8px;background-color:#000;">
<tr width="150px" cellspacing="0" cellpadding="0" style="margin-left:-5px;">
   <td width="50px" align="center">
       <b>Posts:</b>
   </td>
   <td width="50px" align="center">
       <b>Likes:</b>
   </td>
<td width="50px" align="center">
    <b>Coins:</b>
   </td>
</tr>
<tr width="150px" cellspacing="0" cellpadding="0" style="margin-left:-5px;">
   <td width="50px" align="center">
       $[user.posts]
   </td>
<td width="50px" align="center">
   $[user.likes]
   </td>
<td width="50px" align="center">
       <span class="money_symbol"></span><span class="money_amount"></span>
   </td>
</tr>
</table>
<hr>
   
<table style="padding:8px;background-color:#000;border-bottom-right-radius: 15px;">
   {foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Affiliation"}
<tr>
    <td width="50%">
       <b>Affiliation:</b>
       </td>
       <td width="50%">
       $[user.mini_custom_field.value]
       </td>
   </tr>

                 {elseif $[user.custom_field.name] == "Bio"}
<tr>
<td width="50%">
<b>Biography:</b>
</td>
<td width="50%">
<a href="$[user.custom_field.value]">Bio</a>
</td>
</tr>

{elseif $[user.custom_field.name] == "Plot"}
<tr>
<td width="50%">
<b>Plot Page:</b>
</td>
<td width="50%">
<a href="$[user.custom_field.value]">Plot</a>
</td>
</tr>

{elseif $[user.custom_field.name] == "Player"}
<tr>
<td width="50%">
<b>Played by:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
</tr>

{elseif $[user.custom_field.name] == "Status"}
<tr>
<td width="50%">
<b>Relationship:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
</tr>

{elseif $[user.custom_field.name] == "Job"}
<tr>
<td width="50%">
<b>Job:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
</tr>
{/if}
{/foreach}
       
<tr>
    <td width="150px" colspan="2" align="center">
        <span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>CURRENTLY</b>
        </span><br>
            {if $[user.is_online]}
            <font color="#$[user.group.color]">
                <b>Online</b>
            </font>
{else}
                <b>Offline</b>
            {/if}
    </td>
</tr>

</table>
</div>
</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>
   
   
   <style>
       /* MINI PROFILE CSS */
table.mptwo, .mptwo td {
   padding: 0px;
   border-collapse:collapse;
}
.mp {
   width:100%;
   height:100%;
   opacity:0;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
}
.mp:hover {
   width:100%;
   height:100%;
   opacity: 1;
}
.mpi {
   width:192px;
   margin:auto;
   text-align:center;
}
/* END MINI PROFILE CSS */

.mpav {
   overflow: hidden;
}
   </style>

[Brian]

Hi, Welshling.

The background image is stretching because of this inline CSS in the mini-profile <div>.

background-size:cover;

Can you link to a post that contains the 7 and tell me exactly where in the mini-profile to find it?

[Welshling]

Any and all posts are showing the number 7. in the fields...

affiliation
played by
relationship
&
job.

Brian, thanks.

[Brian]

You seem to be swapping out $[user.custom_field] and $[user.mini_custom_field] at random.

Every custom field in the mini-profile needs to use $[user.mini_custom_field] in its variables, as it points to the ones you've set to show on mini-profiles specifically.

The 7's are showing because you're trying to get the value for $[user.mini_custom_field] in a foreach loop for $[user.custom_field].

[Welshling]

Brian, I'm working on the height and width properties for the background image right now. Once I have that sussed, i hope to figure out the rest.

So for each of the mini profile custom fields. they need to look like this?

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

Here's what i have in the mini profile layout template as it stands now. before i do anything else and break anything else.
<div class="$[miniprofile_class]" style="width:175px;height:600px;position:abosulte-top;background-image: url('http://i1052./s445/welshling/true%20blood/fang.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "MP Background Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach};">    
<div class="mp" style="background-repeat: no-repeat; background-position:center top;">
<div class="mpi" style="color:#fff;margin-left:-7px;padding-left:4px;">
       
       <br />
       <center>
           $[user]<br>
        <span style="background:black;color:#fff;">
           {if $[user.custom_title]}$[user.custom_title]{/if}
           </span>
           {if $[user.personal_text.message]}
<span>
               <i>$[user.personal_text]</i>
           </span>
               {/if}
       </center>

{if $[user.is_guest]}
       Guest<br />
   {/if}<br />
       
$[user.warning.bar]
       
{if $[user.is_member]}
<div class="info">
   <div class="mptwo" style="color:#fff;">
<table width="100%">

{if $[user.avatar]}
    <tr>
        <td width="100%" colspan="2" align="center" style="width:180px;height:280px;margin-bottom:5px;-moz-border-radius: 15px;border-radius: 15px;" class="mpav">$[user.avatar]
    </td>
    </tr>
{/if}

</table>
 
<table style="padding:8px;margin-top:10px;background-color:#000;border-top-left-radius: 15px;">
<tr>
<td width="100%" colspan="2" align="center">
<span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>PLAYER</b>
</span>
        <br>
    </td>
</tr>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Player"}
   <tr>
    <td width="50%">
       <b>Played by:</b>
       </td>
       <td width="50%">
       $[user.mini_custom_field.value]
       </td>
   </tr>
   {/if}
{/foreach}
   
<tr>
   <td width="50px">
       <b>Posts:</b>
   </td>
   <td width="50px">
       $[user.posts]
   </td></tr>
   <tr><td width="50px">
       <b>Likes:</b>
   </td>
   <td width="50px">
       $[user.likes]
       </td></tr>
       <tr><td width="50px">
    <b>Coins:</b>
   </td>
<td width="50px">
       <span class="money_symbol"></span><span class="money_amount"></span>
   </td>
</tr>

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

{elseif $[user.custom_field.name] == "Bio"}
<tr>
<td width="50%">
<b>Biography:</b>
</td>
<td width="50%">
<a href="$[user.custom_field.value]">Bio</a>
</td>
   </tr>

{elseif $[user.custom_field.name] == "Plot"}
<tr>
<td width="50%">
<b>Plot Page:</b>
</td>
<td width="50%">
<a href="$[user.custom_field.value]">Plot</a>
</td>
   </tr>{/if}

{elseif $[user.custom_field.name] == "Status"}
<tr>
<td width="50%">
<b>Relationship:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
   </tr>

{elseif $[user.custom_field.name] == "Job"}
<tr>
<td width="50%">
<b>Job:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
</tr>
{/if}
{/foreach}
       
<tr>
    <td width="150px" colspan="2" align="center">
        <span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>CURRENTLY</b>
        </span><br>
            {if $[user.is_online]}
            <font color="#$[user.group.color]">
                <b>Online</b>
            </font>
{else}
                <b>Offline</b>
            {/if}
    </td>
       <td><div class="awards"></div></td></tr>

</table>
</div>
</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>
   
   
   <style>
       /* MINI PROFILE CSS */
table.mptwo, .mptwo td {
   padding: 0px;
   border-collapse:collapse;
}
.mp {
   width:100%;
   height:100%;
   opacity:0;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
}
.mp:hover {
   width:100%;
   height:100%;
   opacity: 1;
}
.mpi {
   width:165px;
   margin:auto;
   text-align:center;
}
/* END MINI PROFILE CSS */

.mpav {
   overflow: hidden;
}
   </style>

Sorry for being a pain in the butt with this, but I have no clue e.e
& thanks by the way.

[Brian]

Every single instance of user.custom_field needs to be changed to user.mini_custom_field, as the former is for the View Profile page.

[Welshling]

blergh. I need to get going, there's no rush with your reply here. I know you have more important "stuff" to fix so I will check in again sometime later tonight. Here's what I've got now, with adding in the mini_ to all that.

<div class="$[miniprofile_class]" style="width:175px;height:600px;position:abosulte-top;background-image: url('http://i1052./s445/welshling/true%20blood/fang.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "MP Background Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach};">    
<div class="mp" style="background-repeat: no-repeat; background-position:center top;">
<div class="mpi" style="color:#fff;margin-left:-7px;padding-left:4px;">
       
       <br />
       <center>
           $[user]<br>
        <span style="background:black;color:#fff;">
           {if $[user.custom_title]}$[user.custom_title]{/if}
           </span>
           {if $[user.personal_text.message]}
<span>
               <i>$[user.personal_text]</i>
           </span>
               {/if}
       </center>

{if $[user.is_guest]}
       Guest<br />
   {/if}<br />
       
$[user.warning.bar]
       
{if $[user.is_member]}
<div class="info">
   <div class="mptwo" style="color:#fff;">
<table width="100%">

{if $[user.avatar]}
    <tr>
        <td width="100%" colspan="2" align="center" style="width:180px;height:280px;margin-bottom:5px;-moz-border-radius: 15px;border-radius: 15px;" class="mpav">$[user.avatar]
    </td>
    </tr>
{/if}

</table>
 
<table style="padding:8px;margin-top:10px;background-color:#000;border-top-left-radius: 15px;">
<tr>
<td width="100%" colspan="2" align="center">
<span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>PLAYER</b>
</span>
        <br>
    </td>
</tr>

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Player"}
   <tr>
    <td width="50%">
       <b>Played by:</b>
       </td>
       <td width="50%">
       $[user.mini_custom_field.value]
       </td>
   </tr>
   {/if}
{/foreach}
   
<tr>
   <td width="50px">
       <b>Posts:</b>
   </td>
   <td width="50px">
       $[user.posts]
   </td></tr>
   <tr><td width="50px">
       <b>Likes:</b>
   </td>
   <td width="50px">
       $[user.likes]
       </td></tr>
       <tr><td width="50px">
    <b>Coins:</b>
   </td>
<td width="50px">
       <span class="money_symbol"></span><span class="money_amount"></span>
   </td>
</tr>

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

{elseif $[user.mini_custom_field.name] == "Bio"}
<tr>
<td width="50%">
<b>Biography:</b>
</td>
<td width="50%">
<a href="$[user.mini_custom_field.value]">Bio</a>
</td>
   </tr>

{elseif $[user.mini_custom_field.name] == "Plot"}
<tr>
<td width="50%">
<b>Plot Page:</b>
</td>
<td width="50%">
<a href="$[user.mini_custom_field.value]">Plot</a>
</td>
   </tr>{/if}

{elseif $[user.mini_custom_field.name] == "Status"}
<tr>
<td width="50%">
<b>Relationship:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
   </tr>

{elseif $[user.mini_custom_field.name] == "Job"}
<tr>
<td width="50%">
<b>Job:</b>
</td>
<td width="50%">
$[user.mini_custom_field.value]
</td>
</tr>
{/if}
{/foreach}
       
<tr>
    <td width="150px" colspan="2" align="center">
        <span style="color:#311e23;letter-spacing:5px;border-bottom:1px solid #311e23;margin-bottom:10px;text-align:center;">
            <b>CURRENTLY</b>
        </span><br>
            {if $[user.is_online]}
            <font color="#$[user.group.color]">
                <b>Online</b>
            </font>
{else}
                <b>Offline</b>
            {/if}
    </td>
       <td><div class="awards"></div></td></tr>

</table>
</div>
</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>
   
   
   <style>
       /* MINI PROFILE CSS */
table.mptwo, .mptwo td {
   padding: 0px;
   border-collapse:collapse;
}
.mp {
   width:100%;
   height:100%;
   opacity:0;
   -webkit-transition-duration: 1s;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
}
.mp:hover {
   width:100%;
   height:100%;
   opacity: 1;
}
.mpi {
   width:165px;
   margin:auto;
   text-align:center;
}
/* END MINI PROFILE CSS */

.mpav {
   overflow: hidden;
}
   </style>

Thank you.

[Brian]

You missed one on line 82.

There's also a stray {/if} on line 111.

[Welshling]

Brian, thank you once again for all your help. Those pesky numbers have now gone and all custom fields are working in everyone's MP. All that's left for me to do now is to style behind the user names and their custom title because they're almost impossible to read right now.

Thank you!