بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة
تنسيق معلومات العضو داخل المواضيع والمشاركات حسب طلب اخواننا
@MesterPerfect و
@QATFX
طبعا ً الطريقة تعتمد اعتماد كلي على الاكواد لذا
ارجو اخذ نسخة احتياطية من اي قالب قبل التعديل عليه
بسم الله نبدأ الشرح:
طبعا نريد ان نقوم بتغيير شكل معلومات العضو من هذا الشكل:
مشاهدة المرفق 2454
الى هذا الشكل
مشاهدة المرفق 2455
لذا اول ما سوف نقوم به هو اضافة ايقونات
FontAwesome كل ايقونة حسب الحقل التابعه له وتستطيع اختيار الايقونات حسب ما تشاء عن طريق هذا الرابط
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new icons, styles, and packs available in Font Awesome 7.
fontawesome.com
الان قم بفتح قالب
message_macros ولاحظ معي الصورة التالية:
مشاهدة المرفق 2456
لاحظ الكود المظلل في المربعات الثلاث
طبعا ً الكود مكرر في القالب اكثر من مرة وهذه فقط صورة توضيحية
لنأخذ كود واحد من هذه الاكواد ونقوم بشرحة بالتفصيل لكي نبين الصورة بشكل اوضح
HTML:
<xf:if is="$extras.register_date">
<dl class="pairs pairs--justified">
<dt>{{ phrase('joined') }}</dt>
<dd>{{ date($user.register_date) }}</dd>
</dl>
</xf:if>
تلاحظون في الكود السابق ان
السطر الاول هو شرط معناه انه
اذا كان تاريخ الانضمام مفعل او موجود فقم بعرض الاكواد
طبعا ً الشرط عن تاريخ الانضمام وهو معرف في الكود بهذا الخيار
register_date
يأتي بعد ذلك
السطر الثاني وهو مجرد عبارة توضيحية توضح
عنوان الحقل
ثم
السطر الثالث وهو
قيمة هذا الحقل
ثم
السطر الرابع اغلاق الشرط
وتستمر الاكود بهذه الطريقة لجميع حقول العضو
ما عدا الحقول الاضافية والتي سوف نتحدث عنها لاحقا ً
الان ما نريده هو اضافة الايقونات كما ذكرت بداية الموضوع الان نحن
نريد اضافة الايقونة قبل عنوان الحقل والذي كما اشرت له في الكود السابق يأتي في
السطر الثاني
لذا لنقم باضافاة ايقونة تاريخ الانضمام الى كودنا السابق ليصبح الكود بهذا الشكل بعد التعديل
HTML:
<xf:if is="$extras.register_date">
<dl class="pairs pairs--justified">
<dt><xf:fa icon="fa-calendar" />
{{ phrase('joined') }}</dt>
<dd>{{ date($user.register_date) }}</dd>
</dl>
</xf:if>
ويتم تطبيق نفس الفكرة مع جميع الاكواد الاخرى الخاصة بالحقول مع تغيير اسم الايقونة حسب نوع الحقل
طبعا ً هناك حقل من الحقول دائما ً ما يسبب مشاكل وهو
حقل الموقع الالكتروني حيث ان رابط الموقع عادة ما يكون طويل ويسبب تشوه في عرض القالب لذا قم بتغيير قيمة الرابط الى نفس الايقونة الخاصة بالحقل
كمثال قم باستبدال هذا الكود الخاص بالموقع اللاكتروني:
HTML:
<xf:if is="$extras.website && $user.Profile.website">
<dl class="pairs pairs--justified">
<dt>{{ phrase('website') }}</dt>
<dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
</dl>
</xf:if>
الى هذا الكود:
HTML:
<xf:if is="$extras.website && $user.Profile.website">
<dl class="pairs pairs--justified">
<dt><xf:fa icon="fa-home" />
{{ phrase('website') }}</dt>
<dd><a href="{$user.Profile.website}" rel="nofollow" data-xf-init="tooltip" title="{$user.Profile.website}" target="_blank"><xf:fa class="website-link" icon="fa-network-wired" /></a></dd>
</dl>
</xf:if>
الان نقوم بفتح قالب
extra.less ونضيف له هذه الاكواد وهي خاصة بخيارات css
CSS:
.message-userExtras{
dl {
padding: 3px 6px 3px 32px;
border-radius: 3px;
background-color: #fff;
margin: 0 0 4px;
position: relative;
height: 24px;
border: 1px solid #c8c8c8;
i{
background:#03b9e3;
line-height: 28px;
position: absolute;
top: 0;
left: 0;
width: 24px;
text-align: center;
color:#fff;
&:after{
position: absolute;
top: 0;
left: 23px;
display: block;
content: '';
border-style: solid;
border-width: 11px 0 12px 7px;
border-color:transparent;
border-left-color: #03b9e3;
clear: both;
content: "";
}
} // end i tag
.website-link{
background:transparent;
position: relative;
border: 0;
color:#000;
line-height: 0;
&:after{
border: 0;
}
}// end website-link tag
}// end dl tag
}
الان لو جربت الكود سوف ترى انه يعمل الا مع
حقول العضو الاضافية مثل سكايب وتويتر او فيسبوك وذكرت سابقا ً اننا سوف نعود الى هذه النقطة
والسبب اننا لم نقوم باضافة الايقونات الخاص به
ولتطبيق نفس الفكرة على الحقول المخصصة نقوم بفتح قالب
custom_fields_macros
ثم نقوم بالبحث عن
HTML:
<dt>{$fieldDefinition.title}</dt>
الان قبل التعديل احب اذكر نقطة وهي انه لك الحرية في ان تضع ايقونة واحدة لجميع الحقول او تضع لكل حقل ايقونته الخاصة
فمثلا ً ان اردت ان تضع
ايقونة لجميع الحقول فقم باستبدال الكود السابق بهذا الكود
HTML:
<dt><xf:fa icon="fa-angle-left" />{$fieldDefinition.title}</dt>
مع الانتباه الى استبدال الايقونة بالايقونة المناسبة لك
اما اذا كنت تريد ان تضع
ايقونة لكل حقل مخصص على حدة فسوف تحتاج الى
معرف كل حقل والمعرفات هي التي تضعها عند انشاء الحقول المخصصة كما في الصورة التالية:
مشاهدة المرفق 2457
وسوف نستخدم الحقول بالطريقة التالية:
اولا نبحث عن الكود السابق وهو :
HTML:
<dt>{$fieldDefinition.title}</dt>
ونستبدلها بهذا الكود:
HTML:
<dt>
<xf:if is="$fieldDefinition.field_id == 'skype'">
<xf:fa icon="fab fa-skype" />
<xf:elseif is="$fieldDefinition.field_id == 'twitter'" />
<xf:fa icon="fab fa-twitter" />
<xf:elseif is="$fieldDefinition.field_id == 'facebook'" />
<xf:fa icon="fab fa-facebook" />
</xf:if>
{$fieldDefinition.title}
</dt>
وهنا استخدمنا ثلاث حقول
سكايب و
تويتر و
فيسبوك وتستطيعون ان تضيفون قدر ما شئتم من الحقول بنفس الطريقة المستخدمة في الكود السابق
اخيرا ً وليس اخرا ً
اذا اردتم ان يكون حساب الشخص لاي من حسابات التواصل الاجتماعي
كرابط بحيث عند الضغط عليه يتم التوجه الى حسابه فكل ما عليكم هو التوجه
حقول العضو المخصصة واختيار اي من الحقول ولنفرض مثلا حقل
تويتر نقوم بالضغط عليه والتوجه الى اخر تبويب وهو
خيارات عامة
ونضيف الكود التالي في حقل
عرض قيمة HTML :
HTML:
<a href="https://twitter.com/{$value}" data-xf-init="tooltip" title="{$fieldId}" target="_blank">{$value}</a>
وطبق نفس الطريقة لجميع مواقع التواصل الاجتماعي مع تغيير رابط الموقع فقط من تويتر الى اي رابط اخر
والنتيجة سوف تكون بعد تعديلاتنا التي قمنا باجرائها كالتالي:
مشاهدة المرفق 2458
اتمنى من الله العلي القدير ان اكون وفقت في الشرح واكون قد اوصلت الفكرة واتمنى المعذر في الاطالة في الشرح فالقصد هو ايصال الفكرة وكيفية التعديل وليس لصق الاكواد فقط
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لايخطأ
احترامي وتقديري
اخوكم
شقاوي
