XF 1.4 Add post count in bottom right avatar corner

[dethfire]

Any tips on how to add the member's post count to the bottom right corner of their avatar? I've been trying to study the online indicator to gain ideas, but I can't figure it out. thanks!!

 

[Steve F]

I could probably help you out with this later, should be fairly simple to do. I'm on my iPad at the moment so I can't do much.

 

[Mr. Goodie2Shoes]

What things you can't figure out? Have you figured out how to add the post count?

 

[dethfire]

What things you can't figure out? Have you figured out how to add the post count?

I add this under the marker span in the avatar div.

<xen:if is="{$user.isOnline}"><span class="Tooltip avpc" title="Post Count" data-offsetX="-22" data-offsetY="-8">10,321</span></xen:if>


avpc css is


#avpc {
position: absolute;
top: 30px;
left: 9px;
width:50px;
height:20px;
color:#000;
background-color:#fff;
border:1px solid #ccc;
}


The coordinates aren't right but I just want to test to see what happens. The text ends up under the avatar, seemingly outside the div container. Not sure what to do about the data-offsets.

 

[Steve F]

The offsets are for the tooltip.

 

[Mr. Goodie2Shoes]

owh... what is wrong with the css is that you've added 'avpc' as a class, but you used it as a id selector... change the css selector from '#avpc' to '.avpc'
and for fetching the message count, use {$user.message_count}

 

[Steve F]

Here you go. I don't have your style on our dev board anymore so you may need to adjust the "top" and "right" css to make it look right.

Revert your current changes you have done.

In the message_user_info template

Find:
<!-- slot: message_user_info_avatar -->

Above it add

            <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                <span class="avatarMessageCount"><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed Tooltip" title="{xen:phrase messages}" data-offsetX="-10" data-offsetY="-8" rel="nofollow">{xen:number $user.message_count}</a></span>
            </xen:if>

Add this CSS to EXTRA.css template

span.avatarMessageCount
{
    background: @primaryLightest;
    border: 1px solid @primaryLighter;
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 2px 2px 0 1px;
    border-radius: 2px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    span.avatarMessageCount
    {
        bottom: 10px;
        right: 10px;
    }
}
</xen:if>

 

[Steve F]

If you are interested in hiding it unless the user block is hovered I can give that CSS as well

 

[Allan]

If you are interested in hiding it unless the user block is hovered I can give that CSS as well

Interested

 

[rafass]

If you are interested in hiding it unless the user block is hovered I can give that CSS as well
View attachment 85676

Hello @Steve F would be nice share that nice css Thank you.

 

[Steve F]

Hello @Steve F would be nice share that nice css Thank you.

I've changed it so the default message count isn't displayed.


In the message_user_info template

Find:
<!-- slot: message_user_info_avatar -->

<xen:if is="!{$isQuickReply} AND {$user.user_id}">
                        <span class="avatarMessageCount"><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed Tooltip" title="{xen:phrase messages}" data-offsetX="-10" data-offsetY="-8" rel="nofollow">{xen:number $user.message_count}</a></span>
                    </xen:if>

Add to EXTRA.css

/* Hover messageUserBlock to display */
.messageUserBlock:hover span.avatarMessageCount
{
    opacity: 1;
}

span.avatarMessageCount
{
    background: @primaryLightest;
    border: 1px solid @primaryLighter;
    font-size: 11px;
    padding: 0px 2px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    opacity: 0;
    transition: all ease-in-out 0.5s;
    border-radius: 2px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    span.avatarMessageCount
    {
        bottom: 10px;
        right: 10px;
        opacity: 1;
    }
}
</xen:if>

 

[rafass]

Thank you so much @Steve F appreciate it.
I love this customisation, is really nice.

 

[dethfire]

Here is what it does for me