Jump to content

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

  • 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:

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

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>

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:


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>

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



  • Love 2

Related Guides

User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.


Kit the Human


Worked perfectly! Thank you so much!

  • You're Welcome 1

Share this review

Link to review

Search In
  • More options...
Find results that contain...
Find results in...
  • Create New...

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.