inj3ct0rj0
عضو فعال
- إنضم
- 11 أكتوبر 2023
- المشاركات
- 232
- مستوى التفاعل
- 37
- النقاط
- 28

كيف حال الجميع عساكم انتم والاهل بألف خير وصحة يارب؟
اليوم ان شاء الله بنشرح كيف نضيف حقول خاصة مثل نظام المستخدم ومتصفح المستخدم في معلومات العضو ويتم اضافتها بشكل يدوي من العضو نفسه حفاظاً على خصوصيته.
هذا مثال:

الحين نبدأ على بركة الله:
اول شي نتوجه الى لوحة التحكم ثم المستخديم ثم اضافة حقول المستخدمين المخصصة
والحين نضيف حقل جديد

الخيارات مثل اللي بالصورة بالضبط تأكد من كتابة المعرف بشكل صحيح بدون احرف كبيرة ومكان عرض الحقل وتأكد انها قائمة منسدلة وتأكد من كتابة اسماء المتصفحات في الخانة الاولى بدون احرف كبيرة والخانة الثانية عادي اكتبها على راحتك احرف كبيرة وصغيرة ما تفرق وتأكد انك مش عامل check في خانة عرض بالمشاركة في معلومات المستخدم لأنه احنا نريدها تحت البانر للمستخدم
ثم بعد ذلك تضيف userOS ونفس الخيارات يا غالي.
الحين بعد ما انتهينا
نتوجه الى قالب message_macros ونبحث عن هذا الكود :
كود:
<div class="message-userDetails">
<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="{{ $includeMicrodata ? 'name' : '' }}" /></h4>
<xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
<xf:if is="$xf.visitor.user_id">
<xf:macro name="eut_macros::eut_user_title_view" arg-user="{$user}" />
</xf:if>
<xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="{{ $includeMicrodata ? 'jobTitle' : '' }}" />
</div>
زين الان تحته مباشرة تضيف هذا الكود :
كود:
<div class="user_custom_fileds_container">
<xf:if is="$user.Profile.custom_fields.getDefinitionSet().userbrowser">
<div class="user_browsers" title="متصفح المستخدم" data-xf-init="tooltip">
<img src="{$xf.options.boardUrl}/styles/shqawe-sh3ll/{$user.Profile.custom_fields.userbrowser}.png"
alt="{$user.Profile.custom_fields.userbrowser}"/>
</div>
</xf:if>
<xf:if is="$user.Profile.custom_fields.getDefinitionSet().userOS">
<div class="user_browsers user_os" title="نظام المستخدم" data-xf-init="tooltip">
<img src="{$xf.options.boardUrl}/styles/shqawe-sh3ll/{$user.Profile.custom_fields.userOS}.png"
alt="{$user.Profile.custom_fields.userOS}"/>
</div>
</xf:if>
</div>
ركز معي الحين بالكود عشان اشرحلك اياه
بالبداية عندي container يجمع الايقونات في سطر واحد
ثم بعد ذلك انا استدعيت $user.Profile.custom_fields.getDefinitionSet().userbrowser وضفت اسم المعرف مثل ما هو اللي ضفته بالحقول المخصصة ومن بعدها سوينا كلاس بالاسم user_broswe وسوينا tooltip عشان لما أأِر على الايقونة يطلعلي الكلام اللي اريده ومن بعد ذلك ضفت مكان تواجد الايقونة المراد اضافتها للمتصفح وهي على شكل متغير وتأكد انك وضعت الرابط الصحيح يعني انا وضعت الصور في مجلد shqawe-sh3ll الموجود بداخل مجلد styles
ومن بعد ذلك تروح لل extra.less وتضيف هذا الكود
بالبداية عندي container يجمع الايقونات في سطر واحد
ثم بعد ذلك انا استدعيت $user.Profile.custom_fields.getDefinitionSet().userbrowser وضفت اسم المعرف مثل ما هو اللي ضفته بالحقول المخصصة ومن بعدها سوينا كلاس بالاسم user_broswe وسوينا tooltip عشان لما أأِر على الايقونة يطلعلي الكلام اللي اريده ومن بعد ذلك ضفت مكان تواجد الايقونة المراد اضافتها للمتصفح وهي على شكل متغير وتأكد انك وضعت الرابط الصحيح يعني انا وضعت الصور في مجلد shqawe-sh3ll الموجود بداخل مجلد styles
ومن بعد ذلك تروح لل extra.less وتضيف هذا الكود
CSS:
.user_custom_fileds_container{
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.user_browsers {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.user_browsers img{
max-width: 20px;
}
@media (max-width: 480px )
{
.user_custom_fileds_container{
display: none;
}
}
وانا بالcss اعتمدت على ان الايقونات كلها تكون ضمن كلاس user_broswers
ومُبارك عليك اضافة اي حقل تريده انت وهذا كان مثال ليس اكثر
وهذه الايقونات اللي تلزمكم بإذن الله
هذا الشرح كان برعاية الحبيب الغالي تركي الودعاني - شقاوي
تحياتي للجميع
وأتمنى من الجميع اللي يعرف بحاجة لا يبخل علينا بالشروحات لنرتقي بمنتدى اخونا شقاوي
ومُبارك عليك اضافة اي حقل تريده انت وهذا كان مثال ليس اكثر
وهذه الايقونات اللي تلزمكم بإذن الله
هذا الشرح كان برعاية الحبيب الغالي تركي الودعاني - شقاوي
تحياتي للجميع
وأتمنى من الجميع اللي يعرف بحاجة لا يبخل علينا بالشروحات لنرتقي بمنتدى اخونا شقاوي






