shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة تنسيق معلومات العضو داخل المواضيع والمشاركات حسب طلب اخواننا @MesterPerfect و @QATFX
طبعا ً الطريقة تعتمد اعتماد كلي على الاكواد لذا ارجو اخذ نسخة احتياطية من اي قالب قبل التعديل عليه
بسم الله نبدأ الشرح:
طبعا نريد ان نقوم بتغيير شكل معلومات العضو من هذا الشكل:
الى هذا الشكل
لذا اول ما سوف نقوم به هو اضافة ايقونات FontAwesome كل ايقونة حسب الحقل التابعه له وتستطيع اختيار الايقونات حسب ما تشاء عن طريق هذا الرابط
fontawesome.com
الان قم بفتح قالب
لاحظ الكود المظلل في المربعات الثلاث طبعا ً الكود مكرر في القالب اكثر من مرة وهذه فقط صورة توضيحية
لنأخذ كود واحد من هذه الاكواد ونقوم بشرحة بالتفصيل لكي نبين الصورة بشكل اوضح
تلاحظون في الكود السابق ان السطر الاول هو شرط معناه انه اذا كان تاريخ الانضمام مفعل او موجود فقم بعرض الاكواد
طبعا ً الشرط عن تاريخ الانضمام وهو معرف في الكود بهذا الخيار register_date
يأتي بعد ذلك السطر الثاني وهو مجرد عبارة توضيحية توضح عنوان الحقل
ثم السطر الثالث وهو قيمة هذا الحقل
ثم السطر الرابع اغلاق الشرط
وتستمر الاكود بهذه الطريقة لجميع حقول العضو ما عدا الحقول الاضافية والتي سوف نتحدث عنها لاحقا ً
الان ما نريده هو اضافة الايقونات كما ذكرت بداية الموضوع الان نحن نريد اضافة الايقونة قبل عنوان الحقل والذي كما اشرت له في الكود السابق يأتي في السطر الثاني
لذا لنقم باضافاة ايقونة تاريخ الانضمام الى كودنا السابق ليصبح الكود بهذا الشكل بعد التعديل
ويتم تطبيق نفس الفكرة مع جميع الاكواد الاخرى الخاصة بالحقول مع تغيير اسم الايقونة حسب نوع الحقل
طبعا ً هناك حقل من الحقول دائما ً ما يسبب مشاكل وهو حقل الموقع الالكتروني حيث ان رابط الموقع عادة ما يكون طويل ويسبب تشوه في عرض القالب لذا قم بتغيير قيمة الرابط الى نفس الايقونة الخاصة بالحقل
كمثال قم باستبدال هذا الكود الخاص بالموقع اللاكتروني:
الى هذا الكود:
الان نقوم بفتح قالب
الان لو جربت الكود سوف ترى انه يعمل الا مع حقول العضو الاضافية مثل سكايب وتويتر او فيسبوك وذكرت سابقا ً اننا سوف نعود الى هذه النقطة والسبب اننا لم نقوم باضافة الايقونات الخاص به
ولتطبيق نفس الفكرة على الحقول المخصصة نقوم بفتح قالب
ثم نقوم بالبحث عن
الان قبل التعديل احب اذكر نقطة وهي انه لك الحرية في ان تضع ايقونة واحدة لجميع الحقول او تضع لكل حقل ايقونته الخاصة
فمثلا ً ان اردت ان تضع ايقونة لجميع الحقول فقم باستبدال الكود السابق بهذا الكود
مع الانتباه الى استبدال الايقونة بالايقونة المناسبة لك
اما اذا كنت تريد ان تضع ايقونة لكل حقل مخصص على حدة فسوف تحتاج الى معرف كل حقل والمعرفات هي التي تضعها عند انشاء الحقول المخصصة كما في الصورة التالية:
وسوف نستخدم الحقول بالطريقة التالية:
اولا نبحث عن الكود السابق وهو :
ونستبدلها بهذا الكود:
وهنا استخدمنا ثلاث حقول سكايب و تويتر و فيسبوك وتستطيعون ان تضيفون قدر ما شئتم من الحقول بنفس الطريقة المستخدمة في الكود السابق
اخيرا ً وليس اخرا ً
اذا اردتم ان يكون حساب الشخص لاي من حسابات التواصل الاجتماعي كرابط بحيث عند الضغط عليه يتم التوجه الى حسابه فكل ما عليكم هو التوجه
حقول العضو المخصصة واختيار اي من الحقول ولنفرض مثلا حقل تويتر نقوم بالضغط عليه والتوجه الى اخر تبويب وهو خيارات عامة
ونضيف الكود التالي في حقل عرض قيمة HTML :
وطبق نفس الطريقة لجميع مواقع التواصل الاجتماعي مع تغيير رابط الموقع فقط من تويتر الى اي رابط اخر
والنتيجة سوف تكون بعد تعديلاتنا التي قمنا باجرائها كالتالي:
اتمنى من الله العلي القدير ان اكون وفقت في الشرح واكون قد اوصلت الفكرة واتمنى المعذر في الاطالة في الشرح فالقصد هو ايصال الفكرة وكيفية التعديل وليس لصق الاكواد فقط
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لايخطأ
احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة تنسيق معلومات العضو داخل المواضيع والمشاركات حسب طلب اخواننا @MesterPerfect و @QATFX
طبعا ً الطريقة تعتمد اعتماد كلي على الاكواد لذا ارجو اخذ نسخة احتياطية من اي قالب قبل التعديل عليه
بسم الله نبدأ الشرح:
طبعا نريد ان نقوم بتغيير شكل معلومات العضو من هذا الشكل:
الى هذا الشكل
لذا اول ما سوف نقوم به هو اضافة ايقونات FontAwesome كل ايقونة حسب الحقل التابعه له وتستطيع اختيار الايقونات حسب ما تشاء عن طريق هذا الرابط
Find Icons with the Perfect Look & Feel | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.
الان قم بفتح قالب
message_macros ولاحظ معي الصورة التالية:لاحظ الكود المظلل في المربعات الثلاث طبعا ً الكود مكرر في القالب اكثر من مرة وهذه فقط صورة توضيحية
لنأخذ كود واحد من هذه الاكواد ونقوم بشرحة بالتفصيل لكي نبين الصورة بشكل اوضح
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>مع الانتباه الى استبدال الايقونة بالايقونة المناسبة لك
اما اذا كنت تريد ان تضع ايقونة لكل حقل مخصص على حدة فسوف تحتاج الى معرف كل حقل والمعرفات هي التي تضعها عند انشاء الحقول المخصصة كما في الصورة التالية:
وسوف نستخدم الحقول بالطريقة التالية:
اولا نبحث عن الكود السابق وهو :
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>وطبق نفس الطريقة لجميع مواقع التواصل الاجتماعي مع تغيير رابط الموقع فقط من تويتر الى اي رابط اخر
والنتيجة سوف تكون بعد تعديلاتنا التي قمنا باجرائها كالتالي:
اتمنى من الله العلي القدير ان اكون وفقت في الشرح واكون قد اوصلت الفكرة واتمنى المعذر في الاطالة في الشرح فالقصد هو ايصال الفكرة وكيفية التعديل وليس لصق الاكواد فقط
ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لايخطأ
احترامي وتقديري
اخوكم
شقاوي
التعديل الأخير:
