بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم طريقة وضع كلمة متواجد وغير متواجد فوق صورة العضو بحيث تكون بهذا الشكل
نفتح قالب message_macros
ونبحث عن :
ونضيف تحته بالضبط هذا الكود:
ثم حفظ وخروج .
وافتح قالب extra.less والصق هذا الكود فيه:
واحفظ القالب وتمتع بالنتيجة
احترامي وتقديري
اخوكم
شقاوي
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم طريقة وضع كلمة متواجد وغير متواجد فوق صورة العضو بحيث تكون بهذا الشكل
نفتح قالب message_macros
ونبحث عن :
HTML:
<xf:macro name="user_info"
arg-user="!"
arg-fallbackName="">ونضيف تحته بالضبط هذا الكود:
HTML:
<xf:if is="$user && $user.isOnline()">
<div class="online_user">
متواجد
</div>
<xf:else />
<div class="offline_user">
غير متواجد
</div>
</xf:if>
<div class="clear_point"></div>ثم حفظ وخروج .
وافتح قالب extra.less والصق هذا الكود فيه:
CSS:
.online_user{
position: relative;
height: 26px;
background: #54ab73;
width: max-content;
transform: rotate(41deg);
right: 34px;
padding: 0px 30px 5px 30px;
color: #fff;
font-weight: bold;
vertical-align: middle;
clip-path: polygon(33.25% -15.12%, 75.71% 6.97%, 88.38% 58.94%, 96.08% 89.95%, 104.63% 129.95%, -2.74% 95.64%, -39.94% 228.87%, 30.22% 0.9%);
}
.offline_user{
position: relative;
height: 26px;
background: #af1515;
width: max-content;
transform: rotate(41deg);
right: 39px;
padding: 0px 30px 5px 30px;
color: #fff;
font-weight: bold;
vertical-align: middle;
clip-path: polygon(33.25% -15.12%, 76.87% -2.26%, 97.85% 107.44%, -4.51% 114.10%, 26.68% -5.9%);
top: 7px;
}
.clear_point{
display: inline-block;
}واحفظ القالب وتمتع بالنتيجة
احترامي وتقديري
اخوكم
شقاوي
