شرح التعرف على واجهة الاستايلات في XenForo والتحكم بالإعدادات الأساسية 01

[codeNET]-094AEB52-D091-4B05-9BF2-30E64D897D1E.webp
الدرس الأول: التعرف على واجهة الاستايلات في XenForo والتحكم بالإعدادات الأساسية

سلسلة احترافية لتعلم تعديل وتصميم استايلات XenForo | الدرس 01 من 05

مقدمة السلسلة
مرحباً بكم في أولى دروس سلسلتنا الجديدة المخصصة لتعلم تصميم وتعديل استايلات منتديات XenForo، والتي سنبدأ فيها من الأساسيات، ثم ننتقل تدريجياً إلى التعديلات الاحترافية باستخدام القوالب وأكواد CSS وLESS، وصولاً إلى بناء مظهر متكامل للمنتدى من الهيدر وحتى الفوتر.

الهدف من هذه السلسلة ليس مجرد تغيير ألوان المنتدى أو إضافة بعض الأكواد الجاهزة، بل أن تتعلم كيف يعمل نظام المظهر في XenForo، وكيف تستطيع الوصول إلى أي عنصر تريد تعديله، ومعرفة القالب المسؤول عنه، ثم تنفيذ التعديل بالطريقة الصحيحة.

سنستخدم في الشروحات أمثلة عملية وأكواد قابلة للتطبيق، مع توضيح وظيفة كل كود وطريقة استخدامه.


1- ما هو نظام الاستايلات في XenForo؟

يعتمد XenForo على نظام متكامل لإدارة المظهر، يتيح لك التحكم في شكل المنتدى دون الحاجة إلى تعديل ملفات النظام الأساسية.

ومن خلال لوحة تحكم الإدارة تستطيع إنشاء استايلات جديدة، تعديل الألوان، تغيير الخطوط، التحكم في المسافات والأحجام، وتخصيص القوالب التي تتحكم في طريقة ظهور عناصر المنتدى.

لفهم هذا النظام، يجب أن تعرف أن المظهر يتكون من عدة أجزاء أساسية:

أولاً: خصائص الاستايل Style Properties

وهي الإعدادات التي تتحكم في الخصائص المرئية للمنتدى، مثل:

  • []ألوان الخلفيات والنصوص.
    []ألوان الروابط والأزرار.
    []الخطوط وأحجام الكتابة.
    []حدود العناصر والإطارات.
    []المسافات الداخلية والخارجية.
    []شكل الهيدر والقوائم.
  • تصميم صناديق الأقسام والمواضيع.

ثانياً: القوالب Templates

القوالب هي المسؤولة عن بناء الهيكل الذي تظهر من خلاله عناصر المنتدى.

على سبيل المثال، يوجد قالب مسؤول عن عرض قائمة المواضيع، وقالب آخر مسؤول عن عرض المشاركات، وقوالب خاصة بالهيدر والفوتر والقوائم الجانبية.

ثالثاً: أكواد CSS وLESS
تستخدم هذه الأكواد للتحكم في التفاصيل الدقيقة للمظهر، مثل الألوان والأبعاد والحدود والخلفيات والتأثيرات والحركات.
وسنتعلم خلال هذه السلسلة كيف نكتب الأكواد بأنفسنا، وكيف نستهدف العناصر باستخدام Classes وIDs.

2- الدخول إلى واجهة إدارة الاستايلات

للبدء بالتطبيق، ادخل إلى لوحة تحكم الإدارة Admin Control Panel.

ثم اتبع المسار التالي:
كود: 
لوحة تحكم الإدارة
← المظهر Appearance
← الاستايلات Style
ستظهر لك قائمة الاستايلات الموجودة في المنتدى.

من هذه الصفحة تستطيع:

  • []مشاهدة الاستايلات المثبتة.
    []تعديل أي استايل موجود.
    []إنشاء استايل جديد.
    []استيراد استايل من ملف XML.
    []تحديد الاستايل الافتراضي للمنتدى.
    []إنشاء استايل فرعي اعتماداً على استايل آخر.

نصيحة مهمة:

لا أنصحك بالتعديل مباشرة على الاستايل الأصلي، خصوصاً إذا كنت تستخدم استايل مدفوعاً أو مستورداً من مطور خارجي.

الأفضل إنشاء استايل فرعي Child Style، حتى تحتفظ بالاستايل الأصلي وتستطيع الرجوع إليه عند حدوث أي مشكلة.

3- إنشاء استايل فرعي Child Style

هذه من أهم الخطوات التي يجب أن تتعلمها قبل البدء في أي تعديل.

الاستايل الفرعي يسمح لك بإجراء التعديلات دون المساس بالاستايل الأساسي.

طريقة إنشائه:

  1. []افتح صفحة الاستايلات.
    []اختر إضافة استايل جديد.
    []اكتب اسم الاستايل الجديد.
    []حدد الاستايل الأب Parent Style.
  2. احفظ التغييرات.

مثلاً، إذا كان الاستايل الأساسي اسمه Default، يمكنك إنشاء استايل فرعي باسم My Custom Style.
وبذلك تصبح التعديلات التي تجريها على الاستايل الفرعي مستقلة عن الاستايل الأصلي قدر الإمكان.
ملاحظة:
الاستايلات الفرعية تعتمد على الاستايل الأب، لذلك قد تتأثر ببعض تحديثاته، ويجب الانتباه إلى توافق التعديلات بعد تحديث XenForo أو الاستايل الأساسي.

4- التعرف على خصائص الاستايل Style Properties
بعد الدخول إلى تعديل الاستايل، ستجد مجموعة من الخصائص والتصنيفات.
قد تختلف أسماء بعض المجموعات وترتيبها حسب إصدار XenForo والاستايل المستخدم، لكن الفكرة الأساسية واحدة.

من أهم الخصائص التي ستتعامل معها:
ألوان المنتدى
تستطيع من خلالها التحكم في الألوان الأساسية، مثل لون الخلفية ولون النصوص والروابط.

مثال على لون أزرق:
كود: 
#0C729E
هذا اللون يمكن استخدامه كلون أساسي للهوية البصرية للمنتدى.
الخطوط Typography

تستطيع التحكم في نوع الخط وحجمه
مثلاً، إذا كنت تريد استخدام خط Cairo في المنتدى، يمكن إضافة الكود التالي إلى CSS المخصص:
كود: 
@import url(‘https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap’);

body {
font-family: ‘Cairo’, sans-serif;
}

سيؤدي ذلك إلى استخدام خط Cairo في النصوص التي ترث الخط من عنصر body، وقد تحتاج بعض العناصر إلى استهدافها بشكل مستقل.
الخلفيات Backgrounds

يمكنك تغيير خلفية المنتدى أو خلفية عناصر محددة.

مثال:
كود: 
.p-body {
background-color: #f4f6fa;
}
هذا الكود يستهدف منطقة المحتوى الرئيسية في XenForo.

الحدود Borders

للتحكم في حدود الصناديق والعناصر:
كود: 
.block-container {
border: 1px solid #e5e7eb;
border-radius: 10px;
}

هنا قمنا بإضافة إطار خفيف وزوايا دائرية لصناديق المحتوى.

5- أين نضيف أكواد CSS في XenForo؟

هذه نقطة أساسية ستحتاج إليها في جميع الدروس القادمة.

يوفر XenForo إمكانية إضافة أكواد CSS وLESS المخصصة من خلال القوالب.

ادخل إلى:
كود: 
لوحة تحكم الإدارة
← المظهر Appearance
← القوالب Templates
← extra.less

افتح قالب extra.less وأضف الأكواد التي تريد استخدامها.

مثال عملي لتغيير شكل أزرار المنتدى:
كود: 
.button {
border-radius: 8px;
transition: 0.3s ease;
}

.button:hover {
transform: translateY(-2px);
opacity: 0.9;
}

ماذا يفعل هذا الكود؟

  • []
    كود: 
    border-radius
    يجعل زوايا الأزرار دائرية.
    []
    كود: 
    transition
    يضيف حركة انتقالية ناعمة.
    []
    كود: 
    transform
    يرفع الزر قليلاً عند مرور المؤشر عليه.
    []
    كود: 
    opacity
    يغير شفافية الزر عند المرور عليه.

قالب extra.less مهم جداً لأنه يسمح لك بإضافة تعديلات CSS وLESS دون الحاجة إلى تغيير ملفات النظام الأساسية.

تنبيه:
لا تضع وسوم HTML مثل
كود:
داخل extra.less، بل اكتب أكواد CSS وLESS مباشرة.

6- كيف تتعامل مع Classes وIDs؟
قبل أن نبدأ بتعديل القوالب، يجب أن نفهم كيف نستهدف العناصر باستخدام CSS.

هناك طريقتان أساسيتان:
أولاً: Class

يبدأ دائماً بالنقطة
كود: 
.

مثال:
كود: 
.block-container {
background: #ffffff;
}

هنا نستهدف جميع العناصر التي تحمل الكلاس block-container.
ثانياً: ID
يبدأ بعلامة المربع
كود: 
#
.

مثال:
كود: 
#header {
background: #0C729E;
}
هنا نستهدف العنصر الذي يحمل المعرّف header.

لكن انتبه: ليس كل عنصر في XenForo يحمل ID باسم header، لذلك يجب التأكد من اسم العنصر الفعلي قبل كتابة الكود.

كيف تعرف اسم Class أو ID لأي عنصر؟

من خلال متصفح Google Chrome:

  1. []افتح المنتدى.
    []اضغط بزر الفأرة الأيمن على العنصر الذي تريد تعديله.
    []اختر Inspect أو فحص.
    []ستظهر لك أدوات المطور.
    []ابحث عن اسم الكلاس أو المعرّف داخل HTML.
    []استخدم الاسم في كود CSS داخل extra.less.

هذه المهارة ستوفر عليك الكثير من الوقت، وستجعلك قادراً على تعديل أي عنصر تقريباً في واجهة المنتدى.

7- تطبيق عملي: تغيير الشكل الأساسي للمنتدى
الآن سنطبق ما تعلمناه من خلال مجموعة أكواد بسيطة.

افتح قالب extra.less وأضف التالي:
كود: 
/* اللون الأساسي للروابط */
a {
color: #0C729E;
}
/* خلفية المنتدى */
.p-body {
background-color: #f4f6fa;
}
/* شكل صناديق المحتوى */
.block-container {
border-radius: 10px;
border: 1px solid #e5e7eb;
overflow: hidden;
}

/* شكل الأزرار */
.button {
border-radius: 8px;
}
/* لون الروابط عند المرور عليها */
a:hover {
color: #085777;
}
بعد حفظ التعديلات، افتح المنتدى وتأكد من ظهور النتائج.

إذا لم تظهر التعديلات، جرّب تحديث الصفحة تحديثاً إجبارياً، وتأكد من أنك تعدل الاستايل المستخدم فعلياً في المنتدى، وأن القالب لم تظهر فيه أخطاء.


8- نصائح مهمة قبل احتراف تعديل استايلات XenForo

هناك مجموعة من النصائح التي أنصحك بالالتزام بها منذ البداية:

  1. []احتفظ بنسخة احتياطية من الاستايل قبل التعديل.
    []استخدم استايل فرعي للتعديلات الكبيرة.
    []لا تعدل ملفات النظام الأساسية من أجل تغيير المظهر.
    []اجمع أكواد CSS وLESS المخصصة في مكان منظم.
    []اكتب تعليقاً قبل كل مجموعة أكواد حتى تعرف وظيفتها لاحقاً.
    []استخدم Inspect لمعرفة الكلاسات الصحيحة بدلاً من التخمين.
    []اختبر التعديلات على الهاتف والحاسوب.
    []لا تضف أكواد كثيرة دون معرفة تأثيرها على بقية عناصر المنتدى.


9- ماذا سنتعلم في الدرس الثاني؟
في الدرس القادم سنبدأ بالدخول إلى عالم القوالب Templates بشكل أعمق.

وسنتعرف على كيفية فهم نظام القوالب في XenForo، وكيفية الوصول إلى القالب المسؤول عن كل جزء من أجزاء المنتدى، مع شرح أهم القوالب واستخداماتها.

ومن الموضوعات التي سنتناولها:

  • []ما هي القوالب Templates وكيف تعمل؟
    []الفرق بين القوالب العامة والقوالب الخاصة.
    []شرح أهم قوالب الصفحة الرئيسية.
    []قوالب الهيدر والقوائم والفوتر.
    []كيفية البحث عن قالب معين.
    []كيفية تعديل القوالب دون إفساد تصميم المنتدى.
    []كيفية إضافة HTML وCSS داخل القوالب.
    []فهم طريقة عمل القوالب المرتبطة ببعضها.

الهدف هو أن تصل إلى مرحلة تستطيع فيها معرفة مكان أي عنصر في XenForo، وتحديد القالب المسؤول عنه، وتعديله بنفسك.

خاتمة الدرس الأول
وصلنا إلى نهاية الدرس الأول من سلسلتنا لتعلم تعديل وتصميم استايلات XenForo.

تعرفنا اليوم على نظام الاستايلات، وإنشاء الاستايل الفرعي، والتحكم في الألوان والخطوط والخلفيات، بالإضافة إلى أساسيات CSS وLESS وكيفية استخدام Classes وIDs.

تذكر أن احتراف تصميم استايلات XenForo لا يعتمد على حفظ الأكواد، بل على فهم طريقة بناء الواجهة ومعرفة العنصر الذي تريد تعديله وكيفية الوصول إليه.

تابعوا الدرس الثاني، حيث سنبدأ بشرح القوالب ومعرفة وظيفة كل قالب داخل XenForo.

نهاية الدرس الأول | سلسلة تعلم تعديل وتصميم استايلات XenForo | 01/05
 
أنقر للتوسيع...
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
احتراف تصميم واجهة XenForo بالكامل من الهيدر إلى الفوتر شروحات - Explanations · codeNET ·
عودة
أعلى أسفل