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”下找到需要编辑的文件？

是否有特定文件，例如 index.js？

（我正在从 Flarum 迁移过来，对这个平台还不熟悉）
谢谢

[Don]

您好，

我不确定我是否完全理解，但您可以在自定义搜索中定位 h1 和 p，这样就不会影响输入字段。

您无需更改特定的源文件。在这些情况下，您可以创建一个新的主题组件，它将覆盖 CSS 代码的特定部分。但如果您确实想更改它，那么您需要 fork 该主题组件 https://github.com/discourse/discourse-search-banner，在 fork 之后，您可以更改 模板文件。

但有一个更简单、更易于维护的方法

创建一个新组件。

1. 转到 /admin/customize/themes/
   自定义 → 主题
2. 点击 Components 选项卡，然后点击 Install 按钮
3. 在弹出窗口中，点击 Create new 按钮并键入新组件名称。

4. 点击 Create 按钮。
5. 组件已创建。现在选择您要激活它的主题。我猜您应该选择 Discourse Air 主题。
   
   
6. 现在点击 Edit CSS/HTML 按钮。
   
   
7. 现在点击 Common 选项卡，并将以下代码粘贴到 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 迁移，我认为学习曲线很陡峭。

也谢谢你提醒我删除之前的代码。