XenForo Postbit Stili Değiştirme

<xf:if is="$extras.message_count">
<dl class="pairs pairs--justified">
<dt>{{ phrase('messages') }}</dt>
<dd>{$user.message_count|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.like_count">
<dl class="pairs pairs--justified">
<dt>{{ phrase('likes') }}</dt>
<dd>{$user.like_count|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
<dl class="pairs pairs--justified">
<dt>{{ phrase('points') }}</dt>
<dd>{$user.trophy_points|number}</dd>
</dl>
</xf:if>

<div class="WbbWupBlock WbbWupCenterBlock">
<div class="infoxi shadow_hgi">
<div class="textxi">
<h4 class="orange-texti">{$user.message_count|number}</h4>
</div>
<div class="arrowi orange-arrowi"></div>
<div class="block_hgi shadow_hgi orange-bgi">
<div class="orange-textim"><i class="fa fa-comments fa-large fa-fixed-width" style="padding-right:3px;"></i>
</div>
</div>
</div>
</div>
<div class="infoxi shadow_hgi">
<div class="textxi">
<h4 class="red-texti">{$user.trophy_points|number}</h4>
</div>
<div class="arrowi red-arrowi"></div>
<div class="block_hgi shadow_hgi red-bgi">
<div class="red-textim"><i class="fa fa-trophy fa-large fa-fixed-width" style="padding-right:3px;"></i>
</div>
</div>
</div>
<div class="infoxi shadow_hgi">
<div class="textxi">
<h4 class="green-texti">{$user.like_count|number}</h4>
</div>
<div class="arrowi green-arrowi"></div>
<div class="block_hgi shadow_hgi green-bgi">
<div class="green-textim"><i class="fa fa-thumbs-up fa-large fa-fixed-width" style="padding-right:3px;"></i>
</div>
</div>
</div>

/////////Block-by-laurent68////////////
.WbbWupBlock {
background: transparent;
}
.infoxi {
overflow: hidden;
margin: 5px auto;
height: 40px;
}
.shadow_hgi {
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),1px 1px 5px 1px rgba(0,0,0,0.1);
}
.textxi {
float: right;
font-weight: bold;
width: auto;
margin-top: -5px;
}
.textxi h4 {
margin-top: 15px;
padding-bottom: 5px;
border: none;
}
.arrowi {
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 50px;
margin-top: 10px;
}
.block_hgi {
width: 50px;
height: 50px;
text-align: center;
}
.orange-texti, .red-texti, .green-texti {
font-size: 16px;
animation: blink 1s linear;
padding-right: 10px;
}
.orange-textim, .red-textim, .green-textim {
width: 100%;
height: 100%;
font-size: 20px;
line-height: 40px;
position: aboslute;
float: left;
color: #32CD32;
}
.orange-bgi {
background: #ebb551;
}
.orange-textim, .orange-texti {
color: #f46320;
}
.orange-arrowi {
border-left: 12px solid #ebb551;
}
.red-arrowi {
border-left: 12px solid #c62642;
}
.red-bgi {
background: #c62642;
}
.red-textim, .red-texti {
color: #7b132a;
}
.green-arrowi {
border-left: 12px solid #008000;
}
.green-bgi {
background: #008000;
}
.green-textim, .green-texti {
color: #32CD32;
}
//////////fin-block///////////

{$user.like_count|number}: {$user.reaction_score|number}