Change Layout Mini-Profile (with added Custom Fields)

[Anna-Bo]

Hello!
For my site I have added a bunch of Custom Fields to the Profile and Mini-Profile via the Admin->Member-section.

We also have some NPC-profiles (via a plugin) en I was able to create groups of the information, which I am not able in the Mini-Profiles of the members.

This is what I mean, first one is a member-profile, the second is a NPC-profile. I like to create a simular profile for my members, but I am stuck as to how I can create this.



This is my page btw link

[Brian]

This is gonna be a tad complicated, so bear with me here.

In the default mini-profile template custom fields are output by the following bit of template code:

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

The way foreach loops work is they go through all of the custom fields you have filled out in your profile. If you haven't filled out one of your custom fields it won't be part of the loop at all. That means that if you want to include a bunch of <br /> tags after a specific field to separate them as groups it won't work because there's no way to check if that field is the last one in a group or if it's even present at all. You don't have this problem in the NPC Profiles plugin because you can guarantee that all of the fields within it will be present at all times.

To combat this you can add the code below anywhere you want a specific group of fields to show in the mini-profile. The set of fields you specify the names of here will be within their own container element. You'll need to duplicate this code over and over for each new group of fields you wish to add. Substitute the field names in green with your actual custom field names in that particular group, adding or removing field names as necessary.

<div class="custom-fields-container">
    {foreach $[user.mini_custom_field]}
        {if $[user.mini_custom_field.name] == "Field 1" || $[user.mini_custom_field.name] == "Field 2" || $[user.mini_custom_field.name] == "Field 3"} 
            <div class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</div>
        {/if}
    {/foreach}
</div>

Since div elements are block level elements you can use CSS to make them appear separated using margins or padding. The cool thing about this is that you can make the CSS target just the first or last field in a container using pseudo-classes. This means that if there are no custom fields filled out in that particular container the container will take up no space at all in the mini-profile because nothing exists within it, giving the mini-profile the appearance of the container not being present at all.

Adding this CSS to the bottom of Themes > Advanced Styles & CSS > Style Sheet will handle the spacing between each group of custom fields in this example.

.mini-profile .custom-fields-container > div:first-child { margin-top: 10px; }
.mini-profile .custom-fields-container > div:last-child { margin-bottom: 10px; }

[Anna-Bo]

Great!!! Thank you so much!

It will be a lot of work, but worth it. Will let you know how it turns out!!

[Anna-Bo]

Works perfect! Even without adding the CSS, I added <br /> after each group, but I might use that to make the space between the groups smaller.
I did ran into another thing.... the font size is now larger then before. I tried to add the <font size =".."> code, but it didn't worked.... or do I need to put that in the Style Sheet? I didn't want to mess things up....

First on is the changed mini profile, second the old one. I like to have the same font size as the old one.

[Brian]

The purpose of the CSS was so that you didn't have to use <br /> tags. If no custom fields are filled out you're going to have a huge blank space because of all of the <br /> tags you added.

The original font size was due to the HTML that produced the custom fields being present in the <div class="info"> element. If the HTML you added does not exist within that element it won't inherit that font size.

[Anna-Bo]

Right! Will try the CSS then and the <div class> if needed.

Thank you for your reply!

[Anna-Bo]

So sorry to bother again...
But I can't seem to get the CSS to work....
I added it at the very bottom of the Style Sheet and tried it in the part where it said Mini-Profile, but nothing changed??

I have this in the Layout Template for the Miniprofile:

{if $[user.is_member]}
<div class="custom-fields-container">{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Age" || $[user.mini_custom_field.name] == "Soulname" || $[user.mini_custom_field.name] == "magic"}
<div class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</div>
{/if}
</div>
<div class="custom-fields-container">{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "hunt" || $[user.mini_custom_field.name] == "tribal" || $[user.mini_custom_field.name] == "sending"}
<div class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</div>
{/if}
</div>

Thx in advance!

[Brian]

You're missing the closing {/foreach} after the closing {/if} in both of your containers. Other than that I don't see any issues.

[Anna-Bo]

Ah Thx! It works .

Haven't added the CSS yet, but the spacing is good, also with the characters who haven't filled in every field.

Awesome!