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