Конфликты CSS в заголовке

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// Настройки пользовательского баннера поиска
.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="Поиск" aria-label="Поиск"><div class="searching"><a class="widget-link show-advanced-search" href="/search?expanded=true" title="Открыть расширенный поиск"><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>

[chrispine1991 (Chocoboe Studios)]

На самом деле я нашел обходной путь, но мне нужна помощь в поиске исходного файла.

Итак, если я использую консоль, чтобы принудительно задать класс заголовка, как показано ниже:

<h1 class="main-title-text">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 · GitHub, а после форка вы сможете изменить шаблонный файл.

Однако существует гораздо более простой и поддерживаемый метод

Создайте новый компонент.

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 {
  // удалите эту часть, так как мы добавили её к h1 и 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 — это, на мой взгляд, довольно крутая кривая обучения.

И спасибо за напоминание удалить старый код.