Tweaking the @mention feature

www.bellsareringing.forumotion.com
phpBB3

Hi all,

I have the mention feature working and when I hover over it, it gives me a profile box.
The @mention feature also appears in quote boxes with the users name but when I hover over that, it only says "Viewing Profile Username" but doesn't actually view the profile.
See the screen grabs below.

A couple of queries if I may:
1. With the profile it pops up, is there any way to modify the look of that as it's a bit dull. I'd like the avatar to have the circle that I'm using in the regular profile box, change the font colour and change the PM/Email icons. Where do I change those?
2. With the @mention itself, I can see how I change the colour but how do I put it inside a box to highlight it more? Like this...

Screenshots:
The @mention: pop up works ok.


The @mention in the quote box: pop up doesn't work

The profile will only work on tagged usernames that have not been quoted.

So why does hover-over bring up the "Viewing profile: User" thing? If it said "View profile" I'd assume you have to click to view. But it says "Viewing". That says to me that something isn't working properly.

I was wrong.  I just tested it on my forum, and it works in quotes.

Have you modified anything related to posts and/or quotes?

The quote box is redesigned a little (colorised block) but that's about it. Obviously something is interfering.

I'll remove a few things to testbandcreport back. Thanks for confirming.

Hopefully someone can help the other aspects too

By default the profile popup on the quote header doesn't work, you'd need to use this plugin to get it working. Although that plugin implements it on all usernames. If you don't want that lemme know.

Also, the "Viewing profile: username" is most likely a bad translation. The company is French first and I'm not sure if they have a good English translator. You're correct in assuming that it should be "View profile: username" rather the former. It's like the Visitor Messages title : "1 Messages from 10 on 51" that one hurts my head.

I forgot I added the code by Ange Tuteur to have the popup profile on usernames everywhere on my forum.

Yes! That plugin worked a treat! Thanks, Ange. Is it supposed to send a PM as well or just a notification?

Now, is there any way to customise that pop-up box as per the original post (see below):

1. With the profile it pops up, is there any way to modify the look of that as it's a bit dull. I'd like the avatar to have the circle that I'm using in the regular profile box, change the font colour and change the PM/Email icons. Where do I change those?
2. With the @mention itself, I can see how I change the colour but how do I put it inside a box to highlight it more? Like this...

For your first question here's some CSS rules.

You can use these to change the overall colors :

Code:

body .tooltipster-default {
  background:#DEF;
}

body .tooltip-actions {
  background:#CDE;
}

.tooltipster-arrow span {
  border-top-color:#CDE !important;
}

add

Code: color:#FFF;

to change the font colors.

The avatar can be modified with this rule :

Code:

.tooltip-content img {
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 100px;
  height: 80px;
  overflow: hidden;
  padding: 2px;
  width: 80px;
}

Lastly Ape wrote a topic for the icons :
https://help.forumotion.com/t146118-change-the-icons-of-your-new-tagging-popup-to-your-own


For your second question see my reply to Ape's question here :
http://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions#9309

Thanks Ange. I'll give it a go later. I'm about to head overseas so if I don't reply again today please don't close this topic just yet. Ta.

@Ange Tutuer Looking good. I can modify that. Thanks.
I've used the tutorials you linked to. Thanks again.

But...on the hover over (quote) there's a circle around the avatar (good!) but also one around the rank image (bad!).
Have a look at the top post here and hover over the username in the quote: http://bellsareringing.forumotion.com/t1800p1050-avfc-takeover-thread-rumours-gossip-and-hearsay-all-goes-here

Any way to fix that?

Thanks a million again!

Replace the CSS with this one:

Code:

.tooltip-avatar img {  background: #FFF;  border: 1px solid #CCC;  border-radius: 100px;  height: 80px;  overflow: hidden;  padding: 2px;  width: 80px;}

Ok that's fixed (thank you!) but here's an odd thing...

Rank:
Posts:
Friends:

For some reason it's showing the rank image BEFORE the "Rank:"




Also, does the mention system not work if the user has a space in the name?
Here are two examples from my site. First username (Trotters) has no spaces. Second one (Alf T) has a space.

Exactly I believe the rank image is too big.  Because of this, it exactly is being pushed down to the next line, but it looks like it is in front of the rank text.

If an username is not just one word, you have to add quotes around it.

Code:

@"Example Spcace"
@"Example.Space"

Sorry @SLGray I edited my post as you were typing a reply.

What you've said makes sense. I can't reduce the rank image size but I'll see if I can make the pop-up box bigger.

I can't make the profile pop-up box bigger. I've adjusted the sized in the javascript from 300x300 to 800x800 and it had no effect.
I'm obviously looking in the wrong place.