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

[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;
}

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

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