Recent Tutorials
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Personal Rank Titles

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 22 Mar 2016, 10:34

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() {
  '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 = ['br:first', '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]).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 ! Wink


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 !! Rock


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


Last edited by Ange Tuteur on Tue 25 Oct 2016, 12:56; edited 1 time in total
Canhraungot
Member
Title : Anh nhớ em Gender : Female
Posts : 20
Points : 327
Reputation : 7
Language : Viet Nam
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCanhraungot on Tue 22 Mar 2016, 11:12

My forum can not do it , although I have to follow the instructions
http://viethamvui.forumvi.com
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 22 Mar 2016, 11:17

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. Thumb right
Ruzmarin

Title :
Assassin⚓
Gender : Male
Age : 21
Posts : 381
Points : 788
Reputation : 70
Language : Serbian, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

PostRuzmarin on Tue 22 Mar 2016, 13:05

Works flawless thanks Ange Party

--------

SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Tue 22 Mar 2016, 14:57

@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. Thumb right
@Canhraungot
I hope that is a test account that you posted.

@Ange Tuteur
Thanks for the amazing tutorial.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 22 Mar 2016, 17:53

@Ruzmarin thank you ! Yes

@SLGray No problem. Smile 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. Shocked
Ruzmarin

Title :
Assassin⚓
Gender : Male
Age : 21
Posts : 381
Points : 788
Reputation : 70
Language : Serbian, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

PostRuzmarin on Tue 26 Apr 2016, 08:02

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:

--------

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 26 Apr 2016, 08:55

@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';
      }
    }
  }
});
Ruzmarin

Title :
Assassin⚓
Gender : Male
Age : 21
Posts : 381
Points : 788
Reputation : 70
Language : Serbian, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

PostRuzmarin on Tue 26 Apr 2016, 12:01

It did the job, but here is this:

Title is visible

--------

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 26 Apr 2016, 20:17

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


It'll hide the label texts on the profile.
Ruzmarin

Title :
Assassin⚓
Gender : Male
Age : 21
Posts : 381
Points : 788
Reputation : 70
Language : Serbian, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

PostRuzmarin on Wed 27 Apr 2016, 04:13


--------

Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 28 Jun 2016, 04:15

Is there a way to hide the BBCode tags on blur?
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Wed 12 Oct 2016, 13:34

I think I forgot to tag you @Ange Tuteur
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 12 Oct 2016, 13:37

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.. Think
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 17 Oct 2016, 08:36

@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).
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 25 Oct 2016, 12:28

Hmm.. yeah you're right, I didn't think about that. How does this work ?
Code:
$('td', a[i]).eq(0);
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 25 Oct 2016, 12:46

Oh duh Razz

I was overthinking it. It's great now.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 25 Oct 2016, 12:57

Cool 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.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum