[Tutorial] Invisible profile fields except for staff and the user himself

Today I'll show you how to make an invisible profile field except for the admins, moderators and the user himself.
I'm not sure where but I saw someone claiming for this, so probably some of you will find it useful.
It's easier than it may seem at first.

1) Create the profile field

To do that you have to go to:
Users & Groups  Users  Profiles  Profile fields  Add

Image:

Activate it only in Profile, the trick would not work on posts, and it doesn't make much sense to me neither...

2) Get the ID of the profile field

You have to inspect the element in a profile page of the forum itself, as far as I know it's the only way...
There you will see which ID corresponds to this field, that's a crucial step.

Image:

3) Time for a bit of CSS magic!

Go to Display  Colors  CSS Stylesheet

Add these lines in your CSS. This will hide completely that profile field.

Code:

/* Hide the profile field and its separator */
dl#field_id3, dl#field_id3 + div.separator { display: none }

As you can see the ID (in my case ID=3) appears there twice, you have to edit both to the one you got in the previous step.

4) Create a new Javascript

Modules  HTML & Javascript  Javascript codes management

Create a new Javascript
Title: Hidden Profile Field
Placement: In all pages

Code:

$(function() {
  var field_id = 3; // (!) Change here the ID of the profile field
  var field = $('#field_id' + field_id)[0];
  if (!field) return;
  var separator = field.nextSibling;
  // Shows the field to the user himself
  if (window.location.href.match(/\/u(\d*)/)[1] == _userdata.user_id) {
    field.style.display = "block";
    separator.style.display = "block";
  }
  // If the viewer can change the value of that profile field, it means he should see it too (admins and mods)
  if (field.querySelector('.field_editable')) {
    field.style.display = "block";
    separator.style.display = "block";
  }
});

In the second line, change that 3 for the ID of the profile field again.

And that's it? Wait, yes, that's it!

5) Result

Who will see that profile tag?...

User in his profile: Yes
User in others profile: No
Staff in his profile: Yes
Staff in others profile: Yes

Tested in basic profile and advanced profile.

- Why could I use this?

Maybe admins and users need some field for something that is not other users concern but staff has to know
This could be used for a warning bar, for example.

I hope you like it

So from what I understand since you can already set permissions on profile fields via the admin panel so only staff can see certain ones, this allows that to happen and the user to view it as well?

Exactly! I just found the topic where I read the suggestion some time ago: Warning bar only visible to individual member

That's what this is for.

The other users will just not see that particular field on the user profile, it's like it doesn't exist. They will only see it in theirs.
I made it for only one field but it can be expanded for as many as you want.

Not bad, with this can for example hide a Warning log
Good work dude