CSS مخصص داخل المنشور / إضافة فئات مخصصة

[Chris_McLaughlin (Chris)]

هل من الممكن تطبيق تنسيق مخصص على عنصر div داخل منشور؟
لقد رأيت أن أي class غير مدرج في القائمة البيضاء يتم إزالته، وقد حاولت إضافة style= إلى عناصر div و span الخاصة بي دون جدوى، فهل يعرف أحد ما إذا كان هناك طريقة للقيام بذلك؟

في الأساس، لدي روبوت ينشر من أداة داخلية، وأود أن ينشر بشكل يشبه الأداة ليكون واضحًا أنه ليس منشورًا عاديًا في discourse، شيء مثل هذا:

يحتوي على عدة عناصر div/span متداخلة لجعل المظهر جميلاً، وكل منها له تنسيق CSS مرتبط به.

مثاليًا، إذا كان بإمكان الروبوت نشر شيء مثل هذا:

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">تم تنفيذ العملية السرية بنجاح</div>
  </div>
  <div class="item">
    <div class="name">Device 08</div>
    <div class="message">فشل الاختبار في الساعة 16:22</div>
  </div>
</div>

سيتم تحديد هذه class الإضافية في تنسيقات CSS العالمية لـ discourse، ولكن حتى لو تمكنت من تجميع كل تنسيقاتي في وسوم style، فسيحل ذلك مشكلتي.

هل لديك أي أفكار حول كيفية تحقيق ذلك؟ شكرًا!

[Chris_McLaughlin (Chris)]

قد لا يكون هذا مناسبًا لـ dev، لكنني لم أكن متأكدًا من المكان الأنسب له لأنه ليس متعلقًا بالمظهر ولا بالإضافة! يرجى نقله إذا كان في المكان الخطأ

[david (David Taylor)]

@Chris_McLaughlin

لقد لاحظت أن أي class غير مدرجة في القائمة البيضاء يتم حذفها

يتم حذف الأنماط/الفئات، لكن يمكنك استخدام سمات data-theme-* لاستهداف عناصر في المنشورات:

<div data-theme-bot>
   المحتوى هنا
</div>

على سبيل المثال، هذه الفقرة محاطة بـ div data-theme-bot

ثم في سمة (theme)، استهدفها هكذا:

div[data-theme-bot] {
  background-color: red;
}

[Chris_McLaughlin (Chris)]

هذا مثالي، شكرًا جزيلاً لك!

[Denis_Heraud]

شكرًا لك @david!

ومع ذلك، كيف يمكنني تغيير تنسيق الوسوم (مثل <a> أو <span>) داخل هذا div؟

[david (David Taylor)]

@Denis_Heraud

<a> أو <span>) داخل هذا div

في SCSS:

div[data-theme-bot] {
  a {
    background-color: red;
  }
}

أو في CSS العادي

div[data-theme-bot] a {
  background-color: red;
}

[Denis_Heraud]

@david

div[data-theme-bot] a { background-color: red; }

شكرًا لك @david! هذا ما كنت أبحث عنه.

[RichardC]

@david لقد قمت بإدراج الـ div الخاص بك تمامًا في موضوع، وأضفت هذا الـ CSS إلى مكون السمة

div[data-theme-bot] {
  color: red;
}

يُظهر المحقق div data-theme-bot (محاط بـ < >) لكن اللون المحسوب هو var(--primary) html

هل أحتاج إلى إضافة محددات إضافية، أو تغيير إعداد إداري؟ شكرًا.

[awesomerobot (Kris)]

لقد جربت نفس الكود للتو وهو يعمل بشكل جيد لدي. جرب ما يلي:

div[data-theme-bot] {
  color: red !important;
}

إذا نجح ذلك، فهذا يعني أن هناك CSS في مكان آخر (سمة، مكون، أو إضافة) كان أكثر تحديدًا من هذا النمط، وبالتالي تم تجاوزه.

[RichardC]

@awesomerobot

لقد جربت نفس الكود للتو وهو يعمل بشكل جيد بالنسبة لي.

أنت محق. أعتقد أن لدي مشكلة في ذاكرة التخزين المؤقت لمتصفحي.

هذه الحيلة عنصر مهم لنشر مشاركاتي على WordPress في Discourse وجعلها تبدو مشابهة لنسخة WordPress.

شكرًا للجميع.