Message Icon and Member Card

Mason K. · Dec 21, 2015

So I've been trying to figure out ways to cut down clutter in the postbit, but still keeping the user post count until i saw Gamer Exit and noticed how the post count is placed in the right hand corner of the avatar. How could I achieve this?

Also I was wondering how I could move all the information in the member card so that it's placed from left to right instead of top to bottom. Here is a picture from TAZ showing what I want to achieve and a picture from my site showing how the information is currently arranged. If needed I can try to explain it better.

Russ · Dec 21, 2015

I believe TAZ is using: https://xenforo.com/community/resources/member-card-stats-and-last-activity-in-two-columns.1655/

For the message count, it's pretty easy to do, inside message_user_info:

Find:

Code:

       <!-- slot: message_user_info_avatar -->

Add above:
[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>

CSS:

Code:

span.avatarMessageCount
{
  background: @primaryMedium;
  color: #fff;
  border: 1px solid @xbColor2;
  border-bottom: none;
  border-right: none;
  font-size: 11px;
  padding: 1px 4px;
  position: absolute;
  bottom: 2px;
  right: 17px;
  /*opacity: 0;*/
  transition: all ease-in-out 0.5s;
  border-radius: 4px 0 4px 0;
}

span.avatarMessageCount a:before
{
   content: "\f27b";
   margin-right: 3px;
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 1.2em;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
}

Should do it

Mason K. · Dec 21, 2015

I think I may have misunderstood because nothing changed.

So I add:

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>

Above:

Code:

 <!-- slot: message_user_info_avatar -->

Then I add this after the xen:if or before it in the css for message user info.

Russ said:
span.avatarMessageCount

{

background: @primaryMedium;

color: #fff;

border: 1px solid @xbColor2;

border-bottom: none;

border-right: none;

font-size: 11px;

padding: 1px 4px;

position: absolute;

bottom: 2px;

right: 17px;

/*opacity: 0;*/

transition: all ease-in-out 0.5s;

border-radius: 4px 0 4px 0;

}

span.avatarMessageCount a:before

{

content: "\f27b";

margin-right: 3px;

display: inline-block;

font: normal normal normal 14px/1 FontAwesome;

font-size: 1.2em;

text-rendering: auto;

-webkit-font-smoothing: antialiased;

}

Mason K. · Dec 21, 2015

It seems that for some reason when I try to save the html template it does nothing.... That could be the problem, but I wonder why it's doing that.

An error log was generated:

Code:

Error Info
ErrorException: Fatal Error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 269947 bytes) - library/XenForo/Template/Compiler/Statement/Collection.php:30
Generated By: Mason, A moment ago
Stack Trace
#0 [internal function]: XenForo_Application::handleFatalError()
#1 {main}
Request State
array(3) {
  ["url"] => string(66) "http://www.pokevolution.net/admin.php?templates/save-multiple.json"
  ["_GET"] => array(1) {
    ["templates/save-multiple_json"] => string(0) ""
  }
  ["_POST"] => array(13) {
    ["titleArray"] => array(2) {
      [1541] => string(17) "message_user_info"
      [5109] => string(21) "message_user_info.css"
    }
    ["styleidArray"] => array(2) {
      [1541] => string(2) "11"
      [5109] => string(2) "54"
    }
    ["templateArray"] => array(2) {
      [1541] => string(6740) "<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">   
<div class="messageUserBlock {xen:if $user.isOnline, online} {xen:if @xb_animated_online, 'xbOnlineAnimated', 'xbOnlineRegular'}">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <div class="avatarHolder">
            <span class="helper"><span></span></span>
            <xen:if is="in_array(@xb_message_layout, array(2, 3))">
            <xen:avatar user="$user" size="m" img="true" />
            <xen:else />
            <xen:avatar user="$user" size="@xb_avatarSize" img="true" />
            </xen:if>
            <xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-10" data-offsetY="-8"></span></xen:if>
            <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>
            <!-- slot: message_user_info_avatar -->
        </div>
    </xen:hook>

<xen:if is="!{$isQuickReply}">
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <h3 class="userText">
            <xen:username user="$user" itemprop="name" rich="true" />
            <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
            {xen:helper userBanner, $user, 'wrapped'}
            <!-- slot: message_user_info_text -->
        </h3>
    </xen:hook>
       
    <xen:if hascontent="true">
        <div class="extraUserInfo{xen:if @xb_famessageuser_boxed, ' xbBoxedFA'}">
            <xen:contentcheck>
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">       
                <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                    <dl class="pairsJustified xbMessages">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase messages}:</xen:if></dt>
                        <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
                    </dl>
                </xen:if>
                <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                    <dl class="pairsJustified xbLikes">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase likes_received}:</xen:if></dt>
                        <dd>{xen:number $user.like_count}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
                    <dl class="pairsJustified xbTrophyPoints">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase trophy_points}:</xen:if></dt>
                        <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                    </dl>
                </xen:if>
           
                <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                    <dl class="pairsJustified xbJoinDate">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-calendar fa-fw Tooltip" title="{xen:phrase joined}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase joined}:</xen:if></dt>
                        <dd>{xen:date $user.register_date}</dd>
                    </dl>
                </xen:if>
           
                <xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsJustified xbGender">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-user fa-fw Tooltip" title="{xen:phrase gender}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase gender}:</xen:if></dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsJustified xbOccupation">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-university fa-fw Tooltip" title="{xen:phrase occupation}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase occupation}:</xen:if></dt>
                        <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsJustified xbLocation">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-map-marker fa-fw Tooltip" title="{xen:phrase location}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase location}:</xen:if></dt>
                        <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
                    </dl>
                </xen:if>
           
                <xen:if is="@messageShowHomepage AND {$user.homepage}">
                    <dl class="pairsJustified xbHomepage">
                        <dt><xen:if is="@xb_fa_messageUserInfo"><i class="fa fa-globe fa-fw Tooltip" title="{xen:phrase home_page}" data-offsetX="-6" data-offsetY="0"></i><xen:else />{xen:phrase home_page}:</xen:if></dt>
                        <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:phrase visit_site}</a></dd>
                    </dl>
                </xen:if>
                           
            </xen:hook>           
            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
            <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
           
                <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                    <xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
                        <xen:if hascontent="true">
                            <dl class="pairsJustified userField_{$fieldId} xbCustomField">
                                <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                            </dl>
                        </xen:if>
                    </xen:if>
                </xen:foreach>
               
            </xen:hook>
            </xen:if>
            </xen:contentcheck>
        </div>
    </xen:if>
       
</xen:if>

    <span class="arrow"><span></span></span>
</div>
</div>"
      [5109] => string(6034) "<xen:if is="@xb_fa_messageUserInfo">

.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints
{
        @property "xb_famessageuser_dl";
        font-size: 120%;
        margin: 2px 0px;
        border: 1px solid @xbPrimaryBorder;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
        min-width: 29%;
        @property "/xb_famessageuser_dl";
}
.messageUserBlock .extraUserInfo.xbBoxedFA
{
    text-align: center;
}

.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dt
{
    @property "xb_famessageuser_dt";
    font-size: @xb_fontsizel;
    color: @primaryMedium;
    margin-right: 0px;
    float: none;
    text-align: center;
    width: auto;
    @property "/xb_famessageuser_dt";
}
.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dd
{   
    @property "xb_famessageuser_dd";
    margin-right: 0px;
    float: none;
    text-align: center;
    width: auto;
    @property "/xb_famessageuser_dd";
}
.Responsive .messageUserBlock .extraUserInfo .fa
{
    color: @xb_famessageuser_dt.color;
    font-size: @xb_famessageuser_dt.font-size;
}
</xen:if>
.dark_postrating_bar
{
    padding: 0px 1px 2px;
}

.messageUserInfo
{
    @property "messageUserInfo";
    float: left;
    width: 180px;
    @property "/messageUserInfo";
}

    .messageUserBlock
    {
        @property "messageUserBlock";
        background-color: @xbPrimaryContent;
        border: 1px solid @xbPrimaryBorder;
        border-radius: @xb_borderradiuss;
        @property "/messageUserBlock";
       
        position: relative;
    }
       
        .messageUserBlock div.avatarHolder
        {
            @property "messageAvatarHolder";
            background-color: @xbPrimaryContent;
            padding: 10px;
            border-radius: @xb_borderradiuss;
            text-align: center;
            @property "/messageAvatarHolder";   
            position: relative;   
        }
       
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
           
   
           
        .messageUserBlock h3.userText
        {
            @property "messageUserText";
            background-color: @primaryLightest;
            padding: 6px;
            @property "/messageUserText";
        }
       
        .messageUserBlock .userBanner
        {
            display: block;
            margin-bottom: 5px;
            margin-left: -{xen:calc '@messageUserText.padding-left + 6'}px;
            margin-right: -{xen:calc '@messageUserText.padding-right + 6'}px;
        }
       
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
        }
   
        .messageUserBlock a.username
        {
            @property "messageUsername";
            font-weight: bold;
            font-size: @xb_fontsizem;
            display: block;
            overflow: hidden;
            line-height: 18px;
            text-align: center;
            @property "/messageUsername";
           
        }
       
        .messageUserBlock .userTitle
        {
            @property "messageUserTitle";
            font-size: @xb_fontsizes;
            padding-bottom: 5px;
            display: block;
            text-align: center;
            @property "/messageUserTitle";
        }
       
        .messageUserBlock .extraUserInfo
        {
            @property "messageExtraUserInfo";
            font-size: @xb_fontsizes;
            background-color: @xbPrimaryContent;
            padding: 4px 6px;
            border-radius: @xb_borderradiuss;
            @property "/messageExtraUserInfo";
        }
       
            .messageUserBlock .extraUserInfo dl
            {
                margin: 2px 0 0;
            }
                           
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
       
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
           
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
           
            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            -moz-border-left-colors: @messageUserBlock.border-color;
            border-right: none;
           
            /* Hide from IE6 */
            _display: none;
        }
       
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
               
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
               
                border: 10px solid transparent;
                border-left-color: @messageAvatarHolder.background-color;
                -moz-border-left-colors: @messageAvatarHolder.background-color;
                border-right: none;
            }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }
    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
   
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
   
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}

span.avatarMessageCount
{
  background: @primaryMedium;
  color: #fff;
  border: 1px solid @xbColor2;
  border-bottom: none;
  border-right: none;
  font-size: 11px;
  padding: 1px 4px;
  position: absolute;
  bottom: 2px;
  right: 17px;
  /*opacity: 0;*/
  transition: all ease-in-out 0.5s;
  border-radius: 4px 0 4px 0;
}
span.avatarMessageCount a:before
{
   content: "\f27b";
   margin-right: 3px;
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 1.2em;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
}
</xen:if>
"
    }
    ["addon_id"] => string(7) "XenForo"
    ["style_id"] => string(2) "54"
    ["template_id"] => string(4) "1541"
    ["title_original"] => string(17) "message_user_info"
    ["_xfToken"] => string(8) "********"
    ["includeTitles"] => array(3) {
      [0] => string(17) "message_user_info"
      [1] => string(17) "message_user_info"
      [2] => string(21) "message_user_info.css"
    }
    ["_TemplateEditorAjax"] => string(1) "1"
    ["_xfRequestUri"] => string(60) "/admin.php?templates/message_user_info.1541/edit&style_id=54"
    ["_xfNoRedirect"] => string(1) "1"
    ["_xfResponseType"] => string(4) "json"
  }
}

Russ · Dec 22, 2015

I've never seen that error myself, if you want to start a ticket with a temp account I can take a look.

Mason K. · Dec 22, 2015

Russ said:
I've never seen that error myself, if you want to start a ticket with a temp account I can take a look.

Ticket has been created

Thanks for the help.

Lemminator · Dec 22, 2015

what was wrong ? this is very nice ! i will test it also

Russ · Dec 22, 2015

I believe in this case there may be too many styles installed on the server.

Lemminator · Dec 22, 2015

I Setup your How to, but i dont see any changes

Russ · Dec 22, 2015

Lemminator said:
I Setup your How to, but i dont see any changes

I checked your site and the CSS isn't loading, double check you've put it in your extra.css file.

Lemminator · Dec 22, 2015

Russ said:
double check you've put it in your extra.css file.

this was it .

but its not showing fine in the styl .

Message Icon and Member Card

Support Forums

Documentation

Bug Reports

Ticket Support

Mason K.

Well-Known Member

Russ

Mason K.

Well-Known Member

Mason K.

Well-Known Member

Russ

Mason K.

Well-Known Member

Lemminator

Registered

Russ

Lemminator

Registered

Russ

Lemminator

Registered

Pre-Sale Questions

Products & Services

Useful Links

Support

Important Links