يشرح هذا الدليل كيفية تخصيص مظهر مربعات الفئات الفرعية في Discourse، بما في ذلك تعديل الأنماط للمواضيع المميزة، وتعديل نمط “المربعات”، وإدارة اقتطاع وصف الفئة.
مستوى المستخدم المطلوب: المسؤول
يمكن تخصيص مربعات الفئات الفرعية في Discourse لتعزيز الجاذبية البصرية وتنظيم منتداك. سيأخذك هذا الدليل خلال خيارات التخصيص المختلفة لمربعات الفئات الفرعية، بما في ذلك الأنماط للمواضيع المميزة، ونمط “المربعات”، واقتطاع وصف الفئة.
تخصيص المربعات مع المواضيع المميزة
لإنشاء مظهر جريء وملون لمربعات الفئات الفرعية التي تحتوي على مواضيع مميزة، يمكنك استخدام CSS مخصص. تزيل هذه الطريقة الشعارات وتطبق ألوان خلفية مميزة لكل فئة فرعية.
إليك كيفية جعل مربعات الفئات الفرعية تبدو مثل هذا:
- انتقل إلى لوحة تحكم الموقع الخاصة بك
- انتقل إلى تخصيص > السمات (Themes)
- أنشئ سمة جديدة أو عدل سمة موجودة
- أضف كود CSS التالي إلى سمتك:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
قم بتعديل محددات CSS والألوان لتتوافق مع أسماء الفئات المحددة الخاصة بك ونظام الألوان المطلوب.
تخصيص نمط “المربعات”
إذا كنت تستخدم نمط “المربعات” للفئات الفرعية، فيمكنك تخصيصه بشكل مماثل:
في كود CSS الخاص بسمتك، أضف الكود التالي:
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading h3 {
color: white;
}
}
}
مرة أخرى، قم بتعديل المحددات والألوان لتناسب بنية منتداك وتفضيلات التصميم.
إدارة اقتطاع وصف الفئة
بشكل افتراضي، يقوم Discourse باقتطاع أوصاف الفئات إلى 4 أسطر في مربعات الفئات. يمكنك تعديل ذلك باستخدام CSS مخصص:
لتقصير الوصف إلى سطرين، أضف كود CSS التالي إلى سمتك:
.category-boxes .description {
-webkit-line-clamp: 2;
}
قم بتعديل قيمة -webkit-line-clamp لتحقيق عدد الأسطر المرئية المطلوب.
اعتبارات للأجهزة المحمولة
عند استخدام نمط “المربعات مع الفئات الفرعية” على سطح المكتب، انتبه إلى أنه قد تظل المواضيع مرئية على الأجهزة المحمولة. قد يكون هذا السلوك مقصودًا في تصميم Discourse للحفاظ على قابلية القراءة على الشاشات الأصغر.
إذا كنت بحاجة إلى تعديل تخطيط الأجهزة المحمولة، فقد تحتاج إلى إضافة CSS محدد لعرض الأجهزة المحمولة أو استشارة مطور سمات Discourse للحصول على حل أكثر تخصيصًا.
