• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Add post count in bottom right avatar corner

dethfire

Well-known member
#1
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!!
 

dethfire

Well-known member
#4
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.
 

Mr. Goodie2Shoes

Well-known member
#6
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

Well-known member
#7
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
Code:
            <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
Code:
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>
upload_2014-10-2_12-56-2.png
 

Steve F

Well-known member
#11
Hello @Steve F would be nice share that nice css :coffee: 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 -->
Code:
<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

Code:
/* 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>