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>
我实际上找到了一个变通方法，但需要帮助定位源文件。
因此，如果我使用控制台强制一个标题类，如下所示：
<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 迁移过来，对这个平台还不熟悉）
谢谢
您好，
我不确定我是否完全理解，但您可以在自定义搜索中定位 h1 和 p，这样就不会影响输入字段。
您无需更改特定的源文件。在这些情况下，您可以创建一个新的主题组件，它将覆盖 CSS 代码的特定部分。但如果您确实想更改它，那么您需要 fork 该主题组件 https://github.com/discourse/discourse-search-banner，在 fork 之后，您可以更改 模板文件。
但有一个更简单、更易于维护的方法 
创建一个新组件。
- 转到
/admin/customize/themes/
自定义 → 主题
- 点击 Components 选项卡，然后点击 Install 按钮
- 在弹出窗口中，点击 Create new 按钮并键入新组件名称。
- 点击 Create 按钮。
- 组件已创建。现在选择您要激活它的主题。我猜您应该选择 Discourse Air 主题。
- 现在点击 Edit CSS/HTML 按钮。
- 现在点击 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;
}
之前
之后
你是一位巫师。万分感谢。我正在从 Flarum 迁移，我认为学习曲线很陡峭。
也谢谢你提醒我删除之前的代码。
