How to replace the xf 2.0 member card with that of xf 1.0?

PhriXion

Member
Hello.

I would like to know if you have a code or others that would allow me to replace the member card of xenforo 2.0 by that of 1.5.x

I am open to everything :)

Regards
 
Tagging devs isn't ideal :D.

To get something closer to the XF1 membercards it's a 2 part edit.

Open member_tooltip, replace entire contents with:

Code:
<xf:css src="member_tooltip.less" />

<div class="tooltip-content-inner">
    <div class="memberTooltip">
        <div class="memberTooltip-header">
            <span class="memberTooltip-avatar">
                <xf:avatar user="{$user}" size="l" notooltip="true" />
            </span>
            <div class="memberTooltip-headerInfo">
                <xf:if contentcheck="true">
                    <div class="memberTooltip-headerAction">
                        <xf:button class="button--link button--small menuTrigger"
                            data-xf-click="menu"
                            aria-label="{{ phrase('more_options') }}"
                            aria-expanded="false"
                            aria-haspopup="true">
                            <i class="fa fa-cog" aria-hidden="true"></i>
                        </xf:button>

                        <div class="menu" data-menu="menu" aria-hidden="true">
                            <div class="menu-content">
                                <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
                                <xf:contentcheck>
                                    <xf:macro template="member_macros" name="moderator_menu_actions"
                                        arg-user="{$user}"
                                        arg-context="tooltip" />
                                </xf:contentcheck>
                            </div>
                        </div>
                    </div>
                </xf:if>

                <h4 class="memberTooltip-name"><xf:username user="$user" rich="true" notooltip="true" /></h4>

                <xf:if contentcheck="true">
                    <div class="memberTooltip-banners">
                        <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
                    </div>
                </xf:if>

                <xf:if contentcheck="true">
                    <div class="memberTooltip-blurb">
                    <xf:contentcheck>
                        <xf:userblurb user="$user" tag="div" />
                    </xf:contentcheck>
                    </div>
                </xf:if>

                <xf:if contentcheck="true">
                    <dl class="pairs pairs--inline memberTooltip-blurb">
                        <dt>{{ phrase('last_seen') }}</dt>
                        <dd dir="auto">
                            <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
                        </dd>
                    </dl>
                </xf:if>
                
        <div class="memberTooltip-info">
            <div class="memberTooltip-stats">
                <div class="pairJustifier">
                    <xf:macro template="member_macros" name="member_stat_pairs"
                        arg-user="{$user}"
                        arg-context="tooltip" />
                </div>
            </div>
        </div>

        <xf:if contentcheck="true">
            <hr class="memberTooltip-separator" />

            <div class="memberTooltip-actions">
            <xf:contentcheck>
                <xf:macro template="member_macros" name="member_action_buttons"
                    arg-user="{$user}"
                    arg-context="tooltip" />
            </xf:contentcheck>
            </div>
        </xf:if>
                
            </div>

            
            
        </div>

    </div>
</div>



Then add this to your extra.less:

Code:
.tooltip.tooltip--member
{ 
    max-width: 565px;
    width: 100%;
    .memberTooltip-avatar
    {
        width: 192px;
    }
    .memberTooltip-headerInfo
    {
        padding-left: 10px;
    }
    .memberTooltip-stats dt
    {
        display: inline-block;
        margin-right: 5px;
        text-align: left;
    }
    .memberTooltip-stats dd
    {
        display: inline-block;
        text-align: left;
    }
}
@media (max-width:565px)
{
    .tooltip.tooltip--member .memberTooltip-header > * { display: block; }
    .tooltip.tooltip--member .memberTooltip-avatar { margin: 0 auto; }
}

Result:
Screenshot_12.webp
 
Back
Top Bottom