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

Basic Profile alterations to put custom fields into their own tab
   (1 review)

Morrigan
  • This guide is a simple guide to show you how to move your profile fields out of the left column and into their own tab.

    Software: Invision Power Services (IPS)

As you'll note, with the character mod, everything is squished in the left column. Not particularly ideal for things that are long, like histories. So this guide is to help explain how to move it into a custom tab.

 

For most of this you will need custom fields setup.

 

So my personal preference, to start, is that you choose "post" and "profile separately. This way you can make a super simple adjustment and have your post related content in the left and your profile related content in it's own tab.

 

To do this make sure you only pick one or the other in the custom field area. Then you are going to edit the profile. The template is: character > front > character > profile

 

The first thing to find is this:

{{$fields = $character->customFieldsForDisplay( 'profile' );}}

Copy from that until the end of the "endif" and paste it into a notepad, you'll need it in a few.

 

Next, change the word "profile" to "topic". You can go ahead and save and if you go and look at your character template you will see that anything that you said you wanted to show in the mini-profile is now there.

 

Next we want to put the actual profile fields into a tab. You'll need to find this in the same template:

<li>
                            <a href="#" id="elCharacterRecentPosts" class="ipsTabs_item ipsType_center ipsTabs_activeItem" role="tab" aria-selected="true">{lang="character_recent_posts"}</a>
                        </li>

Honestly, the easiest thing to do is simply copy and paste it so their are two and then we will make alterations.

 

First we need to change the ID so it's unique. Something like elCharacterProfile will work perfectly. Also, Change {lang="character_recent_posts"} to the word that you want this tab to be "Profile" in our case.

 

Next you need to edit the tab that is really for the Posts. You need to remove ipsTabs_activeItem and change aria-selected="true" to aria-selected="false". This will make your new profile tab the active tab instead of Recent Posts.

 

Last thing we need to do is actually put the content into a tab. Search and copy this part (I choose to copy this one as it's simpler to explain for our needs) for this:

<div id="ipsTabs_elCharacterTabs_elCharacterOther_panel" class="ipsTabs_panel ipsAreaBackground_reset ipsPad" aria-hidden="false">
                        <h2 class="ipsType_sectionHead ipsSpacer_top">{lang="character_others_title"}</h2>
                        {$table|raw}
                    </div>

Next find this:

<div id="elCharacterTabs_content" class="ipsTabs_panels">

Directly below it paste what you just copied.

 

Now we're going to replace a few things to make this work. First find the id, in this case it's "ipsTabs_elCharacterTabs_elCharacterOther_panel" we need to make it match our previously made id. So where it says: elCharacterOther we need to make this elCharacterProfile so it will end up saying "ipsTabs_elCharacterTabs_elCharacterProfile_panel" instead.

 

You can either remove or rename the header. To remove just delete the enter h2 tag. To rename change {lang="character_others_title"} to whatever you would like at the top of your profile.

 

Last thing to do is to replace:

{$table|raw}

With the code you had copied in the first step (that should be in your notepad):

{{$fields = $character->customFieldsForDisplay( 'profile' );}}
                    {{if count( $fields )}}
                    <div class='ipsWidget ipsWidget_vertical cProfileSidebarBlock ipsBox ipsSpacer_bottom'>
                        <h2 class='ipsWidget_title ipsType_reset'>{lang="character_custom_fields"}</h2>
                        <div class='ipsWidget_inner ipsPad'>
                            <ul class='ipsDataList ipsDataList_reducedSpacing cProfileFields'>
                                {{foreach $fields as $field}}
                                {{if !empty( $field['value'] )}}
                                <li class='ipsDataItem ipsType_break'>
                                    <span class='ipsDataItem_generic ipsDataItem_size3 ipsType_break'><strong>{$field['title']}</strong></span>
                                    <div class='ipsDataItem_generic'><div class='ipsType_break ipsContained'>{$field['value']|raw}</div></div>
                                </li>
                                {{endif}}
                                {{endforeach}}
                            </ul>
                        </div>
                    </div>
                    {{endif}}

Click Save and go view your profile. It should now have a tab with all of the profile fields displayed.

 

Enjoy!


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

Kit the Human

Report ·

  

Worked perfectly! Thank you so much!

  • You're Welcome 1

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.