Xf2 Modifikasyon Orbits Message User Info

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<xen:require css="message_user_info.css" />
<xen:require css="EXTRA.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <div class="avatarHolder">
            <span class="helper"></span>
            <xen:avatar user="$user" size="m" img="true" />
            <!-- 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:if is="@messageShowMessageCount AND {$user.user_id}">
                <dl class="pairsJustified xMessage">
                    <i class="fa fa-comment fa-3x"><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed"><p class="xText">{xen:number $user.message_count}</p></a></i>
                </dl>
            </xen:if>
     
            <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                <dl class="pairsJustified xThumbs">
                    <i class="fa fa-thumbs-up fa-3x"><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed"><p class="xText">{xen:number $user.like_count}</p></a></i>
             
                </dl>
            </xen:if>
     
            <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
                <dl class="pairsJustified xTrophy">
                    <i class="fa fa-trophy fa-3x"><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed"><p class="xText">{xen:number $user.trophy_points}</p></a></i>
             
         
             
                </dl>
            </xen:if>
     
            <xen:if is="@messageShowGender AND {$user.gender}">
                <dl class="pairsJustified">
                    <dd itemprop="gender" class="xGender"><xen:if is="{$user.gender} == 'male'"><i class="fa fa-male"></i><xen:else /><i class="fa fa-female"></i></xen:if></dd>
                </dl>
            </xen:if>
     
            <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:contentcheck>
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt class="xField"><i class="fa fa-calendar fa-lg"></i></dt>
                        <dd>{xen:date $user.register_date}</dd>
                    </dl>
                </xen:if>
         
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsJustified">
                        <dt class="xField"><i class="fa fa-cog fa-lg"></i></dt>
                        <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                </xen:if>
         
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsJustified">
                        <dt class="xField"><i class="fa fa-thumb-tack fa-lg"></i></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">
                        <dt class="xField"><i class="fa fa-home fa-lg"></i></dt>
                        <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</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}">
                        <xen:if hascontent="true">
                            <dl class="pairsJustified userField_{$fieldId}">
                                <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>

.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50% !important;
}

.messageContent
{
    margin-left:60px!important;
}
.privateControls
{
    margin-left:100px!important;
}
.redactor_box
{
    margin-left:100px!important;
}
.userBanner
{
    display:none!important;
}

.messageUserBlock
{
width:215px;
background-color:transparent !important;
border: 1px solid transparent  !important;
margin-top:20px !important;
}

.avatarHolder{
border-radius: 50% !important;
width:48% !important;
margin-left:25% !important;
}



.messageUserInfo .arrow {
top:50px!important;
left:175px !important;
}


.concealed{
margin-left:-15px !important;
color:#333 !important;
font-size:12px !important;
text-align:center !important;

}

i.fa{
margin-left: -15px!important;
margin-top: 10%!important;
color:#fff !important;

}

i.fa-male , i.fa-female{
color:#333 !important;
margin-left:6px!important;

}



.xText{
margin:-24px 0px 0px 15px !important;

}

.xMessage{
margin:-142px 0px 0px 25px !important;
z-index:10000!important;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
height:50px!important;
width:25%!important;
margin-right:5px !important;
border-radius:50% !important;
line-height:50px !important;
text-align:center !important;
}

.xThumbs{
margin:0px 0px 0px 5px !important;
z-index:10000!important;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
height:50px!important;
width:25%!important;
margin-right:5px !important;
border-radius:50% !important;
line-height:50px !important;
text-align:center !important;
}

.xTrophy{
margin:0px 0px 0px 25px !important;
z-index:10000!important;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
height:50px!important;
width:25%!important;
margin-right:5px !important;
border-radius:50% !important;
line-height:50px !important;
text-align:center !important;
}

.xGender{
margin:-18px 0px 0px 78px !important;
position: absolute;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
height:20px;
width:20px;
border-radius:50% !important;
}

.messageUserBlock a.username {
margin: -15px 0px 0px 100px !important;
}

.messageUserBlock .userTitle {
  margin: -0px 0px 0px 100px !important;
}

.extraUserInfo{
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
max-width:65% !important;
margin-left:20%!important;
background-color:transparent !important;
border: 1px solid transparent  !important;

}

.extraUserInfo .pairsJustified {
margin-bottom:10px!important;
}

.xField{
margin:0px 0px 0px 0px !important;
position: relative;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
height:20px;
width:20px;
border-radius:50% !important;

}

i.fa-lg{
color:#333 !important;
margin:4px 0px 0px 4px !important;
line-height:10px!important;
}

.pairsJustified dd {

  max-width:78% !important;
text-align: left!important;
}