أهلاً بالجميع! أستخدم Discourse جزئيًا كويكي لمجموعة اهتمامي - أود حقًا الحصول على صناديق معلومات للارتقاء بهذه المقالات إلى المستوى التالي.\n\nهل قام أي شخص بدمج هذا في Discourse؟ لا يمكنني العثور على أي إضافات أو مكونات سمات لذلك.\n\nوجدت شخصًا نجح في قالب صندوق معلومات بأسلوب الويكي على Obsidian - لذا ربما يكون هذا مكانًا جيدًا للبدء.
إعجابَين (2)
ربما استخدم مُغلف BBCode عام.
أنشئ مكون Customization > Theme component وأضف هذا إلى CSS Common.
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
//* قم بإلغاء التعليق عن السطر أدناه لتغيير لون الخلفية. رغم أنه في هذه الحالة يمكن استخدام لون خلفية BBCode.
// background-color: var(--secondary);
//* لون وسمك الصندوق
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #808080;
border-radius: 0.40em;
}
ملاحظة: تم إنشاء عدة نسخ من الكود أعلاه لألوان مختلفة. أي «greenbox»، «yellowbox»، «bluebox» و«box» (رمادي).
كيفية الاستخدام في المنشور
[wrap=redbox]
> ## صندوق معلومات
اختبار الصناديق
[/wrap]
استبدل «red» باللون المناسب. وللون الرمادي استخدم فقط «box»
ملاحظة 2: إذا كنت تستخدم لون BBCode عبر Customization > Plugin أو Customization > Theme component بدلاً من استخدام «>» (مطلوب سطر فارغ كفصل)، أو يمكنك استخدام bgcolor=
نص ملون TC نظرًا لأن هذا مكون سمة، فيمكن تثبيته بغض النظر عن الاستضافة.
يوجد اثنان من #plugins يدعمان لون BBCode. لون BBCode أو شريط تنسيق. تحذير: قم بتثبيت أحد هذين الإضافتين فقط؛ أعتقد أن شريط التنسيق يحذر من أن تثبيت كلاهما قد يعطل موقعك.
تمت إضافة ألوان خلفية للكود المعدل
- لاحظ أن هذا الكود يحتوي على كل الكود من المنشور السابق.
كود CSS المشترك
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ff0000;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #00ff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #0000ff;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ffff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ffff00;
border-radius: 0.40em;
}
استخدم هذا الكود في المنشورات لصناديق الخلفية:
[Wrap="redboxbg"]
> معلومات
اختبار الصناديق
[/wrap]
خيارات ألوان الخلفية الجديدة استبدل “red” بـ:
- “green”, “blue”, “yellow”
لون خلفية. حد رمادي.
- “grey”, “grey#” #=1-4.
جميع الخلفيات الرمادية، حد رمادي، حد أحمر 1، حد أخضر 2، حد أزرق 3، حد أصفر 4
