Custom Fields and Mini Profiles

[isavarg]

I am trying rearrange the custom fields in the mini-profile so that they are arranged like this:

Profile

Writer Information

Plot Page

Character Stats (this is not a field, just something to break up the in character stats from the writer's information.)

Race | Sex

Location | Age

Played By:

Mini Profile I put some text in the mini-profile template to show where I want to place them.

However, when I look at the template, the custom fields all seem to be lumped together in one group that I cannot edit. Is there a way of manually reordering them?

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
   
   PROFILE<BR>
   WRITER INFO<BR>
   PLOT PAGE<BR>
   <BR>
   CHARACTER STATS:<BR>
   RACE | SEX <BR>
   LOCATION | AGE <BR>
   PLAYED BY: <BR><BR>
   
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}
{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}
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>


Also, I would like to change the font, font size and colour of the text in the mini profile. What do I need to look for in the css to achieve this? Thanks.

[Brian]

You can reorder custom fields in Members > Custom Profile Fields in your admin area by clicking and dragging the arrows beside them.

The appearance of plain text in the forum's mini-profiles can be changed in the Mini-Profiles > Text section in Themes > Advanced Styles & CSS.

[isavarg]

I still don't know what code I'm looking for.

[Kami]

Feb 16, 2019 12:54:59 GMT -8 isavarg said:

I still don't know what code I'm looking for.

What Brian is trying to say is that you're not looking for a code. I've reiterated what he said below, hopefully in a way that elaborates a little more as to why a code is not needed.

Reordering the fields is accomplished by clicking and dragging the arrows beside each option in the Custom Profile Fields​ page. You do not need a code to accomplish this because the order content that the layout template outputs is determined by the order of the content in your custom profile fields page.

To change the appearance of text in each field, you can change that by going to the Advanced Styles & CSS ​page and scrolling to the Mini Profiles​ section, under which there will be another section called Text​. Fields will appear here that will allow you to fill in size, colour, and font family. This also does not need a code to accomplish this, as the user interface in this area will update your CSS automatically with the values you put in.​​​​​​​​​​​​

Is there something specific you're thinking of doing with custom fields that makes it so that the above two options are not what you need?

[isavarg]

I need to know how to edit the css code as it's not in a format I am used to seeing. I don't know how to change the colours when I have tags like this in it: color: @mini_text_color; - CSS code is normally like this: color: #000000(hex code for colour); not with the @ tag. I don't want to remove the @tags in case it messes up the layout.

.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; height: 550px; width: 300px; }
.mini-profile .personal-text { color: @mini_personal_text_color; display: block; font: @mini_personal_text_font; text-align: @mini_personal_text_align; }
.mini-profile .info { color: @mini_info_text_color; font: @mini_info_text_font; text-align: @mini_info_text_align; }
div.mini-profile a { color: @mini_links_color; font: @mini_links_font; text-decoration: @mini_links_decoration; }
.even .mini-profile { color: @mini_even_text_color; font: @mini_even_text_font; background: @mini_even_background; border: @mini_even_border; .rounded-corners(@mini_even_border_radius); text-align: @mini_even_text_align; }
.even .mini-profile .personal-text { color: @mini_even_personal_text_color; font: @mini_even_personal_text_font; text-align: @mini_even_personal_text_align; }
.even .mini-profile .info { color: @mini_even_info_text_color; font: @mini_even_info_text_font; text-align: @mini_even_info_text_align; }
.even div.mini-profile a { color: @mini_even_links_color; font: @mini_even_links_font; text-decoration: @mini_even_links_decoration; }
.warning-bar { background: @mini_warning_background; border: @mini_warning_border; .rounded-corners(@mini_warning_border_radius); padding-bottom: 2px; height: 14px; line-height: 100%; text-align: @mini_warning_text_align; min-width: 40px !important; }
.warning-bar .number { color: @mini_warning_number_text_color; font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; background-color: @mini_warning_number_background_color; .rounded-corners(@mini_warning_number_border_radius); opacity: 0.5; font-size: 0.6em; margin-right: 1px; padding: 0px 2px 1px 2px; }

(And before, I wasn't asking about how to arrange the custom fields in the acp panel as it only appears in a block which is uneditable in the mini profile template code - I was wanting the code for the fields indivually so that I could arrange them in the layout I'd specified.)

[Lynx]

Templates are editable - even {foreach} loops. If you want them listed in the order you have in your OP, here's one possible solution:

1. Rearrange the custom fields in your admin panel to the order you want them in from top to bottom. This will get them in the order for the next step.

2. Find these lines in the template you posted in your OP:


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


and replace those lines with this:

{foreach $[user.mini_custom_field]}
   {if $[user.mini_custom_field.name] == "PLOT PAGE"}
      <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
      <br /><br /><span>CHARACTER STATS: (put info here)</span>
   {else}
      <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
   {/if}
{/foreach}

This will look for the custom field named PLOT PAGE, insert it's info, then will do the 2 <br />'s and place the CHARACTER STATS next. Otherwise, it just goes to the next field. Be sure you replace the (put info here) with the actual info you want - and it all needs to come before the </span> there.

The parts in red are the new parts. There is no CSS involved as far as listing those in the order you want.

[Kami]

since there are multiple issues, let’s sort them one at a time. since MSG is posting the templates structure at the moment, let’s let that finish before we address the CSS as I have follow up questions and don’t want to muddle the issue further.