Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
Sign in to follow this  

Simple custom fields change for the Mini-Profile in the Character Mod
   (1 review)

Morrigan
  • Centered custom fields, while default for IPS, normally look a little messy when you have more than one or two things listed, this is a simple guide on how to make some minor changes to make a big difference, feel free to adjust as you like.

    Software: Invision Power Services (IPS) 166,165,164

For some the character mods centering isn't exactly what they were looking for this guide is a means to show you that some minor alterations can make a big difference.

 

So the first thing you're going to edit is the Mini Profile which is in characters > front > character > AuthorPane

 

Search for:

	<li class="ipsType_light">{lang="character_owner"}: {$character->owner()->link()|raw}</li>
    {{foreach $character->customFieldsForDisplay( 'topic' ) as $field}}
    {{if !empty( $field['value'] )}}
    <li>
        {$field['title']}: {$field['value']|raw}
    </li>
    {{endif}}
    {{endforeach}}

The title is the title of the field and the value is the what was entered. Now what I recommend is changing are a few things and by that I mean lets make it a details list instead of just a simple li.

 

What you will do is change it to the following (note this includes changing the Player/owner so that it fits the scheme but is not required):

<li>
    <dl class='charPane'>
    
  <dt>{lang="character_owner"}</dt> <dd>{$character->owner()->link()|raw}</dd>
    {{foreach $character->customFieldsForDisplay( 'topic' ) as $field}}
    {{if !empty( $field['value'] )}}
    <dt>
      {$field['title']}</dt> <dd>{$field['value']|raw}
    </dd>
    {{endif}}
    {{endforeach}}
</dl>
  </li>

 

From here it's just simple CSS to make the fields appear how you want. In the one I did the dt field is text-aligned left and the dd field is text-aligned right. We also probably want them on the same line so the following CSS accomplished all of that:

.charPane {
  max-width: 275px;
  margin: 0 auto;
}
.charPane dt {
  width: 45%;
  display: inline-block;
  float: left;
  text-align: left;
  padding: 3px;
  font-weight: 700;
}
.charPane dd {
  width: 45%;
  display: inline-block;
  margin-left: 0;
  text-align: right;
  padding: 3px;
}

Mind you, your max-width should match what you have on your site so that it doesn't unintentionally overflow into the post.

 

There is actually way more that you can do to make a very custom mini-profile just like on JCink (or here on the Initiative) and whatnot so look forward to another guide about it.

 


Sign in to follow this  

Related Guides



User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Gota

Report ·

  

Great guide, works without problems

Share this review


Link to review

×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.