شرح اضافة ايقونات بجانب الاسماء

[codeNET]

إضافة أيقونات مجموعات المستخدمين بجانب اسم العضو​

بداية نقوم بانشاء قالب جديد وليكن باسم user_groups_icons
عن طريق التوجه الى المظهر > القوالب > اضافة قالب

بعد ذلك نقوم بالتوجه الى قالب message_macros ونبحث عن هذا الكود

<h4 class="message-name">

ونضيف بعده القالب الذي قمنا بانشائه ليكون الكود النهائي بهذا الشكل

<h4 class="message-name">
<xf:include template="user_groups_icons" />

والكود الكامل كما هو موجود في هذه الصورة والمحدد باللون اﻻصفر.

اﻻن نقوم بحفظ قالب message_macros ونعود الى قالبنا الذي قمنا بانشائه اﻻ وهو user_groups_icons ونضع فيه هذا الكود

<xf:if is="user.user_group_id == 2">
<xf:fa icon="fa-user icon_user" />
<xf:elseif is="user.user_group_id == 4" />
<xf:fa icon="fab fa-modx icon_mod" />
<xf:elseif is="$user.user_group_id == 3" />
<xf:fa icon="fa-crown icon_admin" />
</xf:if>

شرح الكود​

في السطر اﻻول وهو هذا السطر

<xf:if is="$user.user_group_id == 2">

قمنا بالتحقق اذا كانت مجموعة العضو تساوي 2 وهو رقم مجموعة اﻻعضاء فضع هذه الايقونة

<xf:fa icon="fa-user icon_user" />

وفي السطر الثالث وهو هذا السطر

<xf:elseif is="$user.user_group_id == 4" />

قمنا بالتحقق اذا كانت مجموعة العضو تساوي 4 وهي مجموعة المشرفين فضع هذه الايقونة

<xf:fa icon="fab fa-modx icon_mod" />

وفي السطر الخامس وهو هذا السطر

<xf:elseif is="$user.user_group_id == 3" />

قمنا بالتحقق اذا كانت مجموعة العضو تساوي 3 وهي مجموعة اﻻدارة فضع هذه الايقونة

<xf:fa icon="fa-crown icon_admin" />

وتستطيع تكرار الكود اكثر من مرة ولكن ﻻبد ان تلاحظ ان اول سطر استخدمنا

<xf:if is=

بينما باقي السطور استخدمنا

<xf:elseif is=

ايضا يمكنك اضافة كلاس css لكل ايقونة كما هو موضح في المثال السابق فتجد انه تمت اضافة كلاس لكل ايقونة

فايقونات اﻻعضاء تحمل الكلاس icon_user

وايقونات المشرفين تحمل الكلاس icon_mod

وايقونات اﻻدارة تحمل الكلاس icon_admin

وباستخدام هذه الكلاسات تستطيع التحكم بلون اﻻيقونات عبر اضافة هذه الكلاسات الى قالب extra.less وكمثال بنفس هذا الكود

.icon_user {
color: blue;
}

.icon_mod {
color: green;
}

.icon_admin {
color: red;
}

والى هنا ينتهي شرحنا الى هذا الدرس واي نقطة غير مفهومة اسعد واتشرف باﻻسهاب في شرحها حتى تصل المعلومة

منقول من موقع : شقاوي .