شرح طريقة عرض ملاحظات في موضوع معين أو عدة مواضيع،
في هذا الموضوع سنقوم بالتعرف على طريقة عرض ملاحظة في موضوع معين أو عدة مواضيع، لان في بعض الأحيان تكون مظطرا لإضافة ملاحظة وعرضها بموضوع معين دون ظهورها في باقي المواضيع الاخرى من نفس القسم ، لذا من خلال هذا الموضوع ستتمكن من التعرف على طريقة إضافة ملاحظة وعرضها في موضوع معين دون ظهورها في القسم بالكامل.
في البداية نقوم بإنشاء ملاحظة بشكل عادي و ذلك من خلال : لوحة تحكم المنتدى ---> تواصل ---> الملاحظات .. كما مبين في الصورة التالية
بعد الإنتقال لصفحة الملاحظات نضغظ على زر
ستظهر النافذة التالية الخاصة بخيارات الملاحظة وما يهمنا فقط ما تم ترقيمه
1. هنا ضع عنوان للملاحظة حتى تقوم بالرجوع الى الملاحظة و تعديلها بسهولة، خصوصا إذا كنت تستخدم الكثير من الملاحظات.
2. هنا ستضع رسالة الملاحظة و يمكنك تنسيقها بكود HTML على حسب رغبتك لكن ما يهمنا هنا هو إعطاء للملاحظة كلاس Class معين حتى يتم تطبيق كود CSS عليه.
و يكون بالشكل التالي :
3. هنا نضع اسم كلاس CSS.
و الان سننتقل إلى الكود الذي سيتم وضعه في قالب
في حالة أردت عرض نفس الملاحظة في عدة مواضيع مختلفة فيكفي تكرار الكود [data-content-key="thread-9"] و تغير الرقم 9 برقم الموضوع كما في الكود التالي
و يمكنك أيضا عرض الملاحظة في مواضيع معينة وكذلك في قسم معين أو في صفحة معينة إذا كانت تحتوي على معرف خاص بها و يتم ذلك من خلال الضغط على زر F12 لمعرفة معرف كل قسم أو صفحة.
مثال خاص بأحد أقسام المعرض
مثال خاص باحد أقسام المنتدى
وهذا مثال على الكود الخاص بعرض الملاحظة في مواضيع و أقسام مختلفة
في هذا الموضوع سنقوم بالتعرف على طريقة عرض ملاحظة في موضوع معين أو عدة مواضيع، لان في بعض الأحيان تكون مظطرا لإضافة ملاحظة وعرضها بموضوع معين دون ظهورها في باقي المواضيع الاخرى من نفس القسم ، لذا من خلال هذا الموضوع ستتمكن من التعرف على طريقة إضافة ملاحظة وعرضها في موضوع معين دون ظهورها في القسم بالكامل.
في البداية نقوم بإنشاء ملاحظة بشكل عادي و ذلك من خلال : لوحة تحكم المنتدى ---> تواصل ---> الملاحظات .. كما مبين في الصورة التالية
بعد الإنتقال لصفحة الملاحظات نضغظ على زر
ستظهر النافذة التالية الخاصة بخيارات الملاحظة وما يهمنا فقط ما تم ترقيمه
1. هنا ضع عنوان للملاحظة حتى تقوم بالرجوع الى الملاحظة و تعديلها بسهولة، خصوصا إذا كنت تستخدم الكثير من الملاحظات.
2. هنا ستضع رسالة الملاحظة و يمكنك تنسيقها بكود HTML على حسب رغبتك لكن ما يهمنا هنا هو إعطاء للملاحظة كلاس Class معين حتى يتم تطبيق كود CSS عليه.
و يكون بالشكل التالي :
HTML:
<div class="XA-Thread9">
هذه الملاحظة خاصة بالموضوع رقم 3
</div>3. هنا نضع اسم كلاس CSS.
و الان سننتقل إلى الكود الذي سيتم وضعه في قالب
Extra.less و سيكون كالتالي .. و لاحظ أن الكود المسؤول عن إظهار الملاحظة في الموضوع رقم 9 هو [data-content-key="thread-9"] كما أنه يمكنك تطبيق أي تعديلات CSS بعد الكود display: block;
CSS:
.XA-Thread9
{
display: none;
}
[data-content-key="thread-9"]
{
.XA-Thread9
{
display: block;
background-color: green;
color: #fff;
font-weight: 650;
}
}في حالة أردت عرض نفس الملاحظة في عدة مواضيع مختلفة فيكفي تكرار الكود [data-content-key="thread-9"] و تغير الرقم 9 برقم الموضوع كما في الكود التالي
CSS:
[data-content-key="thread-9"],
[data-content-key="thread-12"],
[data-content-key="thread-15"]
{
.XA-Thread9
{
display: block;
background-color: green;
color: #fff;
font-weight: 650;
}
}و يمكنك أيضا عرض الملاحظة في مواضيع معينة وكذلك في قسم معين أو في صفحة معينة إذا كانت تحتوي على معرف خاص بها و يتم ذلك من خلال الضغط على زر F12 لمعرفة معرف كل قسم أو صفحة.
مثال خاص بأحد أقسام المعرض
مثال خاص باحد أقسام المنتدى
وهذا مثال على الكود الخاص بعرض الملاحظة في مواضيع و أقسام مختلفة
CSS:
[data-content-key="thread-9"],
[data-content-key="thread-15"],
[data-container-key="node-1"]
{
.XA-Thread9
{
display: block;
}
}و بهذا نكون قد تعرفنا على طريقة إظهار ملاحظة في موضوع معين.
و إلى اللقاء مع درس و شرح اخر بإذن الله
و إلى اللقاء مع درس و شرح اخر بإذن الله
محبكم أبو غَيْث