Tweaking the @mention feature Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Tweaking the @mention feature

    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Tweaking the @mention feature

    Post by troyeccles June 11th 2016, 3:31 am

    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...Tweaking the @mention feature Untitl10

    Screenshots:
    The @mention: pop up works ok.
    Tweaking the @mention feature Screen10

    The @mention in the quote box: pop up doesn't work
    Tweaking the @mention feature Screen11
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 11th 2016, 5:43 am

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




    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 11th 2016, 5:51 am

    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.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 11th 2016, 9:55 pm

    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?



    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 12th 2016, 1:24 am

    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
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by Ange Tuteur June 12th 2016, 3:42 pm

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

    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. Razz
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 12th 2016, 9:50 pm

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



    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 13th 2016, 7:02 am

    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...Tweaking the @mention feature Untitl10
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by Ange Tuteur June 13th 2016, 6:17 pm

    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
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 13th 2016, 10:48 pm

    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.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 14th 2016, 5:36 am

    @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! Smile
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 14th 2016, 6:12 am

    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;}



    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 14th 2016, 6:27 am

    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:"

    Tweaking the @mention feature Screen12


    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.

    Tweaking the @mention feature Screen14
    Tweaking the @mention feature Screen13


    Last edited by troyeccles on June 14th 2016, 6:32 am; edited 1 time in total
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 14th 2016, 6:31 am

    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.



    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3524
    Language : English
    Location : United States

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by SLGray June 14th 2016, 6:33 am

    If an username is not just one word, you have to add quotes around it.
    Code:
    @"Example Spcace"
    @"Example.Space"



    Tweaking the @mention feature Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 14th 2016, 6:44 am

    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.
    avatar
    troyeccles
    Forumember


    Posts : 301
    Reputation : 5
    Language : English

    Tweaking the @mention feature Empty Re: Tweaking the @mention feature

    Post by troyeccles June 14th 2016, 6:56 am

    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.