بعد اذنكم هذه اخواك قالب معلومات العضو في الشريط الجانبي
لم ارد ان تكون قطعة اردت ان تكون مخصصة لستايل معين
حدثت مشكلة ان التفاعلات و المشاركات و الابقونات لا تضهر
مع العلم هو يعمل جيدا بالهاك بس لما ازيل الهاك تختفي الايقونات و المعلومات
هذه الاكواد بين يديكم
الاول قالب html
xentr_sidebar_visitor_card
الكود الثاني الخاصcss
xentr_sidebar_visitor_card.less
صورة بالهاك
و الصورة بدون هاك
فالرجاء لا تبخلو علينا بالمساعدة
لم ارد ان تكون قطعة اردت ان تكون مخصصة لستايل معين
حدثت مشكلة ان التفاعلات و المشاركات و الابقونات لا تضهر
مع العلم هو يعمل جيدا بالهاك بس لما ازيل الهاك تختفي الايقونات و المعلومات
هذه الاكواد بين يديكم
الاول قالب html
xentr_sidebar_visitor_card
HTML:
<xf:css src="xentr_sidebar_visitor_card.less" />
<xf:if is="$xf.visitor.user_id">
<div class="block">
<div class="block-container">
<div class="visitor-card">
<div class="visitor-card-main">
<div class="visitor-card-content">
<div class="visitor-card-img">
<xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
</div>
<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
<div class="contentRow-lesser">
<xf:usertitle user="$xf.visitor" />
</div>
</div>
</div>
<div class="visitor-card-icons">
<xf:if is="{$xf.options.xentr_reaction_score}">
<div class="reaction-stats">
<div class="reaction-stat">
<i class="{$xf.options.xentr_reaction_score_icon}" data-xf-init="tooltip" title="{{ phrase('reaction_score') }}"></i>
<div class="reaction-stat-count">
<a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.reaction_score|number}
</a>
</div>
</div>
</div>
</xf:if>
<xf:if is="{$xf.options.xentr_trophy_points}">
<div class="reaction-stats">
<div class="reaction-stat">
<i class="{$xf.options.xentr_trophy_points_icon}" data-xf-init="tooltip" title="{{ phrase('trophy_points') }}"></i>
<div class="reaction-stat-count">
<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.trophy_points|number}
</a>
</div>
</div>
</div>
</xf:if>
<xf:if is="{$xf.options.xentr_messages}">
<div class="reaction-stats">
<div class="reaction-stat">
<i class="{$xf.options.xentr_messages_icon}" data-xf-init="tooltip" title="{{ phrase('messages') }}"></i>
<div class="reaction-stat-count">
<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.message_count|number}
</a>
</div>
</div>
</div>
</xf:if>
<xf:if is="$xf.options.xentr_question_solution && $xf.visitor.question_solution_count">
<div class="reaction-stats">
<div class="reaction-stat">
<i class="{$xf.options.xentr_question_solution_icon}" data-xf-init="tooltip" title="{{ phrase('solutions') }}"></i>
<div class="reaction-stat-count">
{$xf.visitor.question_solution_count|number}
</div>
</div>
</div>
</xf:if>
<xf:if is="is_addon_active('DBTech/Credits')">
<div class="reaction-stats">
<div class="reaction-stat">
<i class="{$xf.options.xentr_dbtech_credits_icon}" data-xf-init="tooltip" title="{{ phrase('dbtech_credits_credits') }}"></i>
<div class="reaction-stat-count">
<xf:include template="dbtech_credits_postbit" />
</div>
</div>
</div>
</xf:if>
</div>
</div>
<xf:if is="{$xf.options.xentr_user_reaction_enable} && count($xf.reactionsActive) > 1">
<xf:include template="xentr_sidebar_user_reaction" />
</xf:if>
</div>
</div>
</xf:if>الكود الثاني الخاصcss
xentr_sidebar_visitor_card.less
CSS:
/*---------------------------------
VISITOR CARD
---------------------------------*/
.visitor-card
{background-image: linear-gradient(-0deg, #ff2846 0%, #6944ff 100%);
width: 100%;
border-bottom: 5px solid #6944ff;
height: 100%;
margin: auto;
position: relative;
overflow: hidden;
text-align: center;
border-radius: 5px;
img
{
object-fit: cover;
margin: 10pxauto;
border-radius:50%;
position: relative;
transition: all 0.25s linear;
&:hover
{
transform: scale(1.1);
}
}
&:before,
&:after
{
content: "";
position: absolute;
top: 0;
right: 0px;
left: 0px;
height: 50px;
margin-top: (@xf-paddingMedium - 1);
border-radius: @xf-borderRadiusMedium;
background:#fff;
}
.visitor-card-main
{
padding-top: 20px;
overflow: hidden;
position: relative;
.visitor-card-content
{
position: relative;
background: #f1f1f1;
padding: 100px 0px 30px 0px;
text-align: center;
}
.visitor-card-img
{
position: absolute;
left: 0px;
right: 0px;
z-index: 10;
top: 0;
transition: all .25s linear;
transform-style: preserve-3d;
.avatar
{
border: 3px solid @xf-contentBg;
box-shadow: 0px 5px 30px 0px rgb(108, 68, 252), 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}
}
}
.visitor-card-icons
{ border-top: 5px #ff2846 ;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
top: 10px;
.fab
{
margin: 7px;
color: @xf-paletteColor3;
font-size: 20px;
transition: 250ms ease;
&:hover
{
transform: translateY(-.5rem)
}
}
}
}
// Reaction Stats
.reaction-stats
{
flex: 1 1 auto;
justify-content: center;
align-items: center;
.reaction-stat
{
position: relative;
color: @xf-textColorDimmed;
i
{
font-size: 20px;
color: @xf-textColorDimmed;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
&:hover
{
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.reaction-stat-count
{
display: flex;
justify-content: center;
margin: 10px 0;
}
.pairs>dt
{
display: none;
}
&:after
{
content: '';
width: 1px;
height: 40px;
background-color: @xf-borderColor;
position: absolute;
top: 32px;
right: 0;
}
&:last-child
{
&::after
{
display: none;
}
}
}
}صورة بالهاك
و الصورة بدون هاك
فالرجاء لا تبخلو علينا بالمساعدة
