تعارضات CSS في الترويسة

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// custom search banner customizations
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: #f9f9f9;
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
  h1 {
    font-size: 4em;
  }

ولكن هذا يتسبب في تلاشي نص شريط البحث إلى لون الخلفية.

<div> id="ember16" class="ember-view"><!----><div> class="search-widget"><div> class="search-menu" data-mouse-down-outside="true"><button class="widget-button btn search-icon no-text btn-icon"> <svg class="fa d-icon d-icon-search svg-icon svg-node" aria-hidden="true"> <use xlink:href="#search"></use> </svg></button><div class="search-input"><input id="search-term" type="text" value="" autocomplete="off" placeholder="Search" aria-label="Search"> <div class="searching"> <a class="widget-link show-advanced-search" href="/search?expanded=true" title="Open advanced search"> <svg class="fa d-icon d-icon-sliders-h svg-icon svg-node" aria-hidden="true"> <use xlink:href="#sliders-h"></use> </svg> </a></div></div></div></div></div></div>

[chrispine1991 (Chocoboe Studios)]

لقد وجدت حلاً بديلاً بالفعل ولكني بحاجة إلى المساعدة في تحديد موقع الملف المصدر.

لذلك إذا استخدمت وحدة التحكم لفرض فئة رأس كما هو موضح أدناه:

<h1>Welcome to our community</h1>

ثم أنشأت CSS المرتبط به:

.main-title-text {
    background: -webkit-gradient(linear, left center, right bottom, from(#484848), to(#0097ff), to(#ffffff));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

يبدو أن كل شيء يعمل. الآن بعد أن اكتشفت الحل البديل، كيف يمكنني العثور على الملف الضروري لتعديله تحت div “ember14” حيث يتم عرض نص “Welcome to the community”؟

هل هناك ملف محدد، مثل index.js؟

(أنا أنقل من Flarum وجديد على هذه المنصة)
شكرا

[Don]

مرحباً،

لست متأكدًا من أنني فهمت تمامًا ولكن يمكنك استهداف h1 و p في البحث المخصص حتى لا يؤثر ذلك على حقل الإدخال.
لا تحتاج إلى تغيير ملف المصدر المحدد. في هذه الحالات، يمكنك إنشاء مكون سمة جديد يتجاوز جزءًا معينًا من رمز CSS. ولكن إذا كنت تريد حقًا تغييره، فعليك عمل نسخة من مكون السمة GitHub - discourse/discourse-search-banner وبعد النسخ يمكنك تغيير ملف القالب.

ولكن هناك طريقة أسهل وأكثر قابلية للصيانة:

إنشاء مكون جديد.

1. انتقل إلى /admin/customize/themes/
   تخصيص → السمات
2. انقر فوق علامة التبويب المكونات ثم زر تثبيت
3. في النافذة المنبثقة، انقر فوق زر إنشاء جديد واكتب اسم المكون الجديد.

4. انقر فوق زر إنشاء.

5. تم إنشاء المكون. الآن حدد السمة (السمات) التي تريد تفعيلها. هنا أعتقد أنه يجب عليك تحديد سمة Discourse Air.
   

   

6. الآن انقر فوق زر تحرير CSS/HTML.
   

   

7. الآن انقر فوق علامة التبويب عام والصق الرمز أدناه في قسم CSS.

.custom-search-banner-wrap {
  h1, p {
    background: -webkit-gradient(linear, right top, left bottom, from(#eaf0ff), to(#0932a5), to(#060064));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

انقر فوق حفظ. تم!

ولا تنس إزالة الرمز السابق الخاص بك

.custom-search-banner-wrap {
  // remove this part because we add this to the h1 and p
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
}

---

قبل

بعد

[chrispine1991 (Chocoboe Studios)]

أنت ساحر. شكراً جزيلاً. أقوم بالترحيل من Flarum والمنحنى التعليمي حاد في رأيي.

وشكراً لك على التذكير بإزالة الكود السابق.