Tagging Members and Placing The @ beside usernames in profiles

Technical Details

Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Other
Who the problem concerns : All members
When the problem appeared : Since creation
Forum link : https://thezonegroups.forumotion.com/

Description of problem

I would like to know how I get the @ to be beside usernames in their profiles, as well as how to remove that ugly Blue outline that appears when a member is tagged in a post. Thank you.

Dear @penny¢

for both your questions can you provide a screenshot, or even better a link where we can see it live?
of course, please make the page visible to guests so that we can check

Thanks in advance

@Niko

This is my avatar in a Forumotion group where the @ is beside names in profile:



This is how it looks in our forum:



I would like the @ to be beside the names as in the first image.

This is the Blue when we tag someone:



How do I get rid of it?

The link to the group is in the main post and should be set so you can see it.

Thanks for helping.

Hello,

As Niko said, you will need to make the forum viewable to guests if you want us to help get rid of the blue outline. As the forum is set now, we can't view anything except the login page and it is impossible for us to inspect the code on the page in order to know what code we need to help you modify to get rid of it. The alternative to making the forum viewable to guests would be making a test account (no need to give it admin rights), and providing the login info via pm so that we can view the forum. Let us know which option you would like to do.

As for adding the '@' sign before your username, here is a tutorial that shows you how to add this: https://help.forumotion.com/t140358-make-the-mentioning-system-easier-to-use

-Brandon

@Brandon

Thank you. I sent the guest log in to you via pm. Let me know if I should send it to anyone else.

I will check that link now.

Thanks again.

Thanks for the test account. Also just for clarity, what exactly were you wanting to do in regards to the blue background, do you want it gone altogether or do you want it changed to a different color?

-Brandon

@Brandon

Gone completely so only the text shows.


EDIT: I had the code from the link in the wrong place. (I had it in CSS instead of Java)
I have now placed it in Java but it still is not showing the @ beside name.
Not sure I understand this part: "At the top of the script you will see a version variable. Make sure that the number corresponds to your forum version."
Mine is 4 : MODERNBB

Should that be in the 1 position instead of "/* FORUM VERSIONS"?

Ok if you want it gone completely, add the following to your CSS:

Code:

.mentiontag {
background-color: transparent;
}

.mentiontag:link, .mentiontag:visited {
color: #000;
}

Note the second part of the code with the 'color: # 000' on it is to change the text color so it is readable (the text color now is white which is unreadable on a white background once the blue is removed). I have chosen black so it matches the default text color on your forum. If you would like the text to be a different color just let me know and I can adjust the code accordingly.

As for the issue your having with the code from the tutorial, the problem is you put the code in your CSS stylesheet when it needed to be added as a Javascript. I would recommend re reading that portion of the tutorial in full, it walks through step by step exactly what to do to properly add the code. In the meantime, remove the code from the tutorial you added in the CSS stylesheet and that error will go away.

@Brandon

Yes sir, I saw I had it in the wrong place and have since moved it. Please refer to edit above.

Your code:

I placed it in CSS but it did not change the Blue.

Here is my code sheet:



There are 3 codes there...should there be a blank space between them?

If not too much trouble, can you change the color to Red instead of Black?
Or I can by just changing the numbers, correct?

Yes I realized after I posted the code that I had made a mistake and put 'None' instead of transparent.
Sorry about that. I edited the code in my previous post with the correct code that for sure will work.

To save you the scrolling though, replace the code I gave you before with this one:

Code:

.mentiontag {
background-color: transparent;
}

.mentiontag:link, .mentiontag:visited {
color: #000;
}

Edit: Just saw you wanted the text color red. To do that, all you have to do is change '#000' to '#FF0000' and that should make it red for you.

@Brandon

LOL I just copy/pasted the new code and it worked.
I did change the color and that worked too.
Thank you!

Your welcome, glad I could help .

As for your issue with the Javascript, try replacing the code you added from the tutorial to this one, I changed the version number in the code for you.

Code:

  /* FORUM VERSIONS
                * 0 = PHPBB2
                * 1 = PHPBB3
                * 2 = PUNBB
                * 3 = INVISION
                * 4 = MODERNBB
                * 5 = AWESOMEBB
                */
                $(function() {
                  var version = 4;
             
                  if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
                    document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
                    my_setcookie('fa_mention','');
                  } if (!/\/t\d+/.test(window.location.pathname)) return;
             
                  for (var a = $(['.name strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a', '.postprofile-name a', '.post-author-name a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
                    b = document.createElement('A');
                    b.title = 'Mention ' + $(a[i]).text();
                    b.style.marginRight = '3px';
                    b.className = 'fa-mention';
                    b.innerHTML = '@';
                    b.href = '#';
                    b.onclick = function() {
                      var n = this.title.replace(/^.*?\s/,'');
                 
                      if (version == 5) {
                        var area = document.getElementById('quick-reply-textarea');
                   
                        if (area) {
                          area.value += '@"' + n + '" ';
                          area.focus();
                        }
                   
                        return false;
                   
                      } {
                        if ($.sceditor) t.insertText('@"' + n + '" ');
                        else {
                          my_setcookie('fa_mention', n);
                          window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
                        }
                      }
                 
                      return false;
                    };
             
                    a[i].parentNode.insertBefore(b, a[i]);
                  }
             
                  $(function(){
                    if (!$.sceditor) return;
                    t=$(t).sceditor('instance');
                  });
                });

@Brandon

Yes! It worked!
I see now where I should have put the "4".
I do thank you for all your help.

Your very welcome, glad I could help.

P.S if you want to reply to my post on your topic about the zodiac problem and I will attempt to help fix that one for you next.

Problem solved & topic archived. Please read our forum rules: ESF General Rules