- إنضم
- 23 يوليو 2023
- المشاركات
- 894
- الحلول
- 6
- مستوى التفاعل
- 488
- النقاط
- 63
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين.
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما..
اقدم لكم اليوم طريقة اضافة ايقونات FontAwesome بجانب اسماء اﻻعضاء بحسب المجموعة التي ينتمي لها العضو حسب طلب اخونا @Abdo Hassn
بسم الله نبدأ الشرح:
بداية نقوم بانشاء قالب جديد وليكن باسم user_groups_icons
عن طريق التوجه الى المظهر > القوالب > اضافة قالب
بعد ذلك نقوم بالتوجه الى قالب message_macros ونبحث عن هذا الكود
ونضيف بعده القالب الذي قمنا بانشائه ليكون الكود النهائي بهذا الشكل
والكود الكامل كما هو موجود في هذه الصورة والمحدد باللون اﻻصفر
اﻻن نقوم بحفظ قالب message_macros ونعود الى قالبنا الذي قمنا بانشائه اﻻ وهو user_groups_icons ونضع فيه هذا الكود
ولنشرح هذا الكود
في السطر اﻻول وهو هذا السطر
قمنا بالتحقق اذا كانت مجموعة العضو تساوي 2 وهو رقم مجموعة اﻻعضاء فضع هذه الايقونة
وفي السطر الثالث وهو هذا السطر
قمنا بالتحقق اذا كانت مجموعة العضو تساوي 4 وهي مجموعة المشرفين فضع هذه الايقونة
<xf:fa icon="fab fa-modx icon_mod" />
وفي السطر الخامس وهو هذا السطر
قمنا بالتحقق اذا كانت مجموعة العضو تساوي 3 وهي مجموعة اﻻدارة فضع هذه الايقونة
<xf:fa icon="fa-crown icon_admin" />
وتستطيع تكرار الكود اكثر من مرة ولكن ﻻبد ان تلاحظ ان اول سطر استخدمنا
بينما باقي السطور استخدمنا
ايضا يمكنك اضافة كلاس css لكل ايقونة كما هو موضح في المثال السابق فتجد انه تمت اضافة كلاس لكل ايقونة
فايقونات اﻻعضاء تحمل الكلاس icon_user
وايقونات المشرفين تحمل الكلاس icon_mod
وايقونات اﻻدارة تحمل الكلاس icon_admin
وباستخدام هذه الكلاسات تستطيع التحكم لون اﻻيقونات عبر اضافة هذه الكلاسات الى قالب extra.less وكمثال بنفس هذا الكود
والى هنا ينتهي شرحنا الى هذا الدرس واي نقطة غير مفهومة اسعد واتشرف باﻻسهاب في شرحها حتى تصل المعلومة
احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على اشرف خلق الله نبينا محمد وعلى آله وصحبة أجمعين.
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما..
اقدم لكم اليوم طريقة اضافة ايقونات FontAwesome بجانب اسماء اﻻعضاء بحسب المجموعة التي ينتمي لها العضو حسب طلب اخونا @Abdo Hassn
بسم الله نبدأ الشرح:
بداية نقوم بانشاء قالب جديد وليكن باسم user_groups_icons
عن طريق التوجه الى المظهر > القوالب > اضافة قالب
بعد ذلك نقوم بالتوجه الى قالب message_macros ونبحث عن هذا الكود
HTML:
<h4 class="message-name">ونضيف بعده القالب الذي قمنا بانشائه ليكون الكود النهائي بهذا الشكل
كود:
<h4 class="message-name">
<xf:include template="user_groups_icons" />والكود الكامل كما هو موجود في هذه الصورة والمحدد باللون اﻻصفر
اﻻن نقوم بحفظ قالب message_macros ونعود الى قالبنا الذي قمنا بانشائه اﻻ وهو user_groups_icons ونضع فيه هذا الكود
HTML:
<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>ولنشرح هذا الكود
في السطر اﻻول وهو هذا السطر
HTML:
<xf:if is="$user.user_group_id == 2">قمنا بالتحقق اذا كانت مجموعة العضو تساوي 2 وهو رقم مجموعة اﻻعضاء فضع هذه الايقونة
HTML:
<xf:fa icon="fa-user icon_user" />وفي السطر الثالث وهو هذا السطر
HTML:
<xf:elseif is="$user.user_group_id == 4" />قمنا بالتحقق اذا كانت مجموعة العضو تساوي 4 وهي مجموعة المشرفين فضع هذه الايقونة
<xf:fa icon="fab fa-modx icon_mod" />
وفي السطر الخامس وهو هذا السطر
HTML:
<xf:elseif is="$user.user_group_id == 3" />قمنا بالتحقق اذا كانت مجموعة العضو تساوي 3 وهي مجموعة اﻻدارة فضع هذه الايقونة
<xf:fa icon="fa-crown icon_admin" />
وتستطيع تكرار الكود اكثر من مرة ولكن ﻻبد ان تلاحظ ان اول سطر استخدمنا
HTML:
<xf:if is=بينما باقي السطور استخدمنا
HTML:
<xf:elseif is=ايضا يمكنك اضافة كلاس css لكل ايقونة كما هو موضح في المثال السابق فتجد انه تمت اضافة كلاس لكل ايقونة
فايقونات اﻻعضاء تحمل الكلاس icon_user
وايقونات المشرفين تحمل الكلاس icon_mod
وايقونات اﻻدارة تحمل الكلاس icon_admin
وباستخدام هذه الكلاسات تستطيع التحكم لون اﻻيقونات عبر اضافة هذه الكلاسات الى قالب extra.less وكمثال بنفس هذا الكود
CSS:
.icon_user {
color: blue;
}
.icon_mod {
color: green;
}
.icon_admin {
color: red;
}والى هنا ينتهي شرحنا الى هذا الدرس واي نقطة غير مفهومة اسعد واتشرف باﻻسهاب في شرحها حتى تصل المعلومة
احترامي وتقديري
اخوكم
شقاوي
