أهلاً بالجميع! أستخدم Discourse جزئيًا كويكي لمجموعة اهتمامي - أود حقًا الحصول على صناديق معلومات للارتقاء بهذه المقالات إلى المستوى التالي.\n\nهل قام أي شخص بدمج هذا في Discourse؟ لا يمكنني العثور على أي إضافات أو مكونات سمات لذلك.\n\nوجدت شخصًا نجح في قالب صندوق معلومات بأسلوب الويكي على Obsidian - لذا ربما يكون هذا مكانًا جيدًا للبدء.
إعجابَين (2)
ربما تستخدم غلاف Bbcode عام.
قم بإنشاء #مكون-سمة وأضف هذا إلى CSS المشترك.
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-color أو Theme component بدلاً من استخدام “>” (سطر فارغ مطلوب كفاصل) أو يمكنك استخدام bgcolor=
نص ملون TC نظرًا لأن هذا مكون سمة، يمكن تثبيته بغض النظر عن الاستضافة.
هناك مكونان إضافيان يدعمان لون 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
