Personal Rank Titles

This tutorial will help teach you how to setup a profile field that allows your members to give themselves their own personal rank title.


If you've modified your viewtopic_body template this modification may not work for you. If that's the case please provide the following information in a reply if this tutorial isn't working for you.

Code:

[b]URL of topic on your forum :[/b]
[b]Explanation of problem :[/b]

Otherwise, follow the installation normally !

1. Creating the profile field

To start, we first need to create a new field for our users. Go to Admin Panel > Users & Groups > Profiles and create a new profile field with the following settings.

Type : Text zone ( DO NOT PICK text field )
Name : Title
Description : Your personal title
URL icon : None
Necessarily filled ? : You choose
Display : Profile, Messages
Display type : Icon
Who can modify the profile field value ? : Members, Moderators ( in case of questionable titles )
Display this field for users that are at least : You choose
Separator : No choice

Down below there should be additional information under text zone.

Default content :
Paste the follow content as the default value for the field.

Code:

[table class="fa_personal_title"][tr][td][/td][/tr][/table]

You can set the max length as you like.

When you're finished your field should look similar to this :


If everything looks okay to you click the save button. Then edit the newly created field and click the "Replace the content" button at the very bottom to force the default value. Once you've done this you're ready to move onto the script installation.

2. Installing the JavaScript

So the field functions properly and the personal rank title is placed in the correct position we need to install a small script. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Personal Rank Title
Placement : In all the pages
Paste the code below and submit :

Code:

$(function() {
  var formatBBCode = true;
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_title"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table class="fa_personal_title"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };
 
        a[i].onblur = function() {
          this.value = '[table class="fa_personal_title"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
 
  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('phpbb') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('modernbb') ? 4 : document.getElementById('fa_edge') ? 5 : 'badapple',
        closest = ['.poster-profile', '.postprofile', '.user', '.postdetails', '.postprofile', '.postprofile'][version],
        find = ['br:first', 'dt + dd', '.user-basic-info', 'dt + dd', '.postprofile-rank', '.rank-title'][version],
 
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;
 
    if (version == 'badapple') {
      if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
      return;
    }
 
    for (; i < j; i++) {
      title = $('td', a[i]).eq(0);
      title = formatBBCode ? title.html() : title.text();
      if (title) {
        node = $(a[i]).closest(closest).find(find);
        str = '<span class="personal_title">' + title + '</span>';
 
        version == 0 ? node.before(str) : node.append(str);
 
        a[i].style.display = 'none';
      }
    }
  }
});

At the top of the script is a variable named formatBBCode. If you want your members to use bbcode in their rank titles ( color, bold, size, etc.. ) then keep this variable set to true, otherwise if you want the rank to remain as plain text set this variable to false.

Once the script is installed everything should function properly. See the final section for information on how it works !

3. Notes

Inputting a title
To input your own personal title go to the edit profile page which should be accessible from the navbar. Find the field and insert your personal title.
If JavaScript is enabled, the rank title will automatically be wrapped with the necessary tags. Otherwise, you should type the rank title between the table tags manually.


Why should my rank be between table tags ?
It's necessary for your rank to be between table tags so that the script can quickly identify your rank title and place it in the correct position. Removing the table tags will prevent your rank title from being moved to the correct position.


Where does my personal title go ?
Your personal title will go directly below your existing rank title. If it doesn't, then your viewtopic_body template may not be compatible with the script, or you removed the necessary table tags.


Can I color my personal title ?
Yes ! Any bbcode should work in the personal title field, so you can change the color, size, font, etc.. Note that this is only applicable if the Administrator allows you to use bbcode.


If you have any questions or comments feel free to leave a reply below. Now go give yourselves some awesome titles !!

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

My forum can not do it , although I have to follow the instructions
http://viethamvui.forumvi.com

You had everything setup good, however I think you forgot to re-edit the profile field and force the default content.


I did that and it appears to be working now.

Works flawless thanks Ange

Canhraungot wrote:My forum can not do it , although I have to follow the instructions
http://viethamvui.forumvi.com

Ange Tuteur wrote:You had everything setup good, however I think you forgot to re-edit the profile field and force the default content.


I did that and it appears to be working now.

@Canhraungot
I hope that is a test account that you posted.

@Ange Tuteur
Thanks for the amazing tutorial.

@Ruzmarin thank you !

@SLGray No problem. Don't worry, I removed Canhraungot's account information. I forgot to do it when I fixed their problem earlier, so thanks for mentioning that.

I've made some modifications in view_topicbody in regards of making username and ranks below avatar, and the personal title is being displayed right next to the username for some reason. I tried to fixed this myself but no success :/

link:

@Ruzmarin in your viewtopic_body template find and replace this line :

Code:

            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />

with this :

Code:

            <span class="rank_title">{postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</span><br /><br />

Save and publish the template.

Then replace your personal rank title script with this one :

Code:

$(function() {
  'Personal Title - Give yourself your own personal title !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t413-personal-rank-titles#3302';
 
  var formatBBCode = true;
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_title"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table class="fa_personal_title"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };
 
        a[i].onblur = function() {
          this.value = '[table class="fa_personal_title"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
 
  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple',
        closest = ['.poster-profile', '.postprofile', '.user', '.postdetails'][version],
        find = ['.rank_title', 'dt + dd', '.user-basic-info', 'dt + dd'][version],
 
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;
 
    if (version == 'badapple') {
      if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
      return;
    }
 
    for (; i < j; i++) {
      title = $('td', a[i]);
      title = formatBBCode ? title.html() : title.text();
      if (title) {
        node = $(a[i]).closest(closest).find(find);
        str = '<span class="personal_title">' + title + '</span>';
 
        node.append(str);
 
        a[i].style.display = 'none';
      }
    }
  }
});

It did the job, but here is this:

Title is visible

Oh, edit the profile field and for display type choose "icon" :


It'll hide the label texts on the profile.

Is there a way to hide the BBCode tags on blur?

I think I forgot to tag you @Ange Tuteur

Hmm.. well yeah I suppose there is. For example, you could add the tags when you click the save button instead. Never thought about it that way..

@Ange Tuteur You might wanna change this line boo

Code:

title = $('td', a[i]);

to this

Code:

title = $(a[i]).children('tbody').children('tr').children('td');

I tried other selectors but this was the only one that really works fr.

Because when a user uses the

Code: [table]

BBCode for title stylization, the

Code: $('td')

selector is picking up the text from the

Code: <td>

element within the

Code: $('fa_personal_title')

and the one within itself (that the user entered in the textarea on their profile).

Hmm.. yeah you're right, I didn't think about that. How does this work ?

Code:

$('td', a[i]).eq(0);

Oh duh

I was overthinking it. It's great now.

Cool

I was thinking of doing

Code: $('td', a[i])[0]

, but I noticed the variable was using jQuery methods, so had to use eq() instead.

First i tried the code of tutorial.
I've changed JavaScript, post in this message

https://fmdesign.forumotion.com/t413-personal-rank-titles#7536

I did not get results http://prntscr.com/elozon

http://antenadogames.forumeiros.com

@Harleen try the script below instead :

Code:

$(function() {
  'Personal Title - Give yourself your own personal title !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/';

  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_title"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        $(a[i]).focus(function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table class="fa_personal_title"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        });

        $(a[i]).blur(function() {
          if (/\[url|!important|founder|administrator|moderator|graphic designer|fmd-admin|fmd-modo|fmd-desi/ig.test(this.value)) {
            alert('A word in your title has been forbidden from use as a personal title. Please choose a different title.');
            this.value = '';
          }

          this.value = '[table class="fa_personal_title"][tr][td]' + this.value + '[/td][/tr][/table]';
        });
      }
    }
  }

  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var html = true,
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;

    for (; i < j; i++) {
      title = $('td', a[i]).eq(0).filter(function() {
        return html ? $(this).html() : $(this).text();
      });

      if (title) {
        $(a[i]).hide().closest('.postprofile').find('.rank-title').append($('<span class="personal_title" />').filter(function() {
          return html ? $(this).html(title) : $(this).text(title);
        }));
      }
    }
  }
});

I'll need to update the first post to support FAE.

Thanks, work fine

Edit

I had to remove the ranks in CSS, to get results.

I followed all the steps correctly but i'm getting a persistant problem with it displaying correctly.
As you can see from the link below, the rank is displaying where it is supposed to. Its after the achievement profile.
I would appreciate it if someone can help me fix this please. Thanks in advance.


http://necrofinitygaming.forumotion.com/t6-new-topic-testing

Hi @1337Exodus,

It looks like an issue with modernbb, I've made some optimizations for it. Try the script below instead.

Code:

$(function() {
  'Personal Title - Give yourself your own personal title !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t413-personal-rank-titles#3302';
 
  var formatBBCode = true;
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_title"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table class="fa_personal_title"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };
 
        a[i].onblur = function() {
          this.value = '[table class="fa_personal_title"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
 
  // parsing in messages
  else if (/\/t\d+/.test(window.location.href)) {
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('phpbb') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('modernbb') ? 4 : document.getElementById('fa_edge') ? 5 : 'badapple',
        closest = ['.poster-profile', '.postprofile', '.user', '.postdetails', '.postprofile', '.postprofile'][version],
        find = ['br:first', 'dt + dd', '.user-basic-info', 'dt + dd', '.postprofile-rank', '.rank-title'][version],
 
        a = $('.fa_personal_title'),
        i = 0,
        j = a.length,
        node, str, title;
 
    if (version == 'badapple') {
      if (window.console && console.warn) console.warn('Your forum version is not supported for the "Personal Title" plugin.');
      return;
    }
 
    for (; i < j; i++) {
      title = $('td', a[i]).eq(0);
      title = formatBBCode ? title.html() : title.text();
      if (title) {
        node = $(a[i]).closest(closest).find(find);
        str = '<span class="personal_title">' + title + '</span>';
 
        version == 0 ? node.before(str) : node.append(str);
 
        a[i].style.display = 'none';
      }
    }
  }
});

P.S.
I updated the script in the first post, with optimizations for Modernbb and Forumactif Edge.

Mine works, however it doesn't do the automatic wrapped in tags when you type it into the box. It is just plain black text that lines up with the profile info rather than in the center. I left the following true?

Code:

 var formatBBCode = true;