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="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>
回避策を見つけましたが、ソースファイルの場所を見つけるのに助けが必要です。
以下に示すようにコンソールを使用してヘッダークラスを強制すると：
<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;
すべて機能するようです。「Welcome to the community」テキストがレンダリングされるdiv「ember14」の下にある必要なファイルを見つけるにはどうすればよいですか？
特定のファイル、つまりindex.jsはありますか？
（Flarumから移行してきたばかりで、このプラットフォームには慣れていません）
Don
2022 年 10 月 14 日午後 7:06
3
こんにちは。
よく理解できていないかもしれませんが、カスタム検索で h1 と p をターゲットにできるため、入力フィールドには影響しません。
特定のソースファイルを変更する必要はありません。このような場合は、CSSコードの特定の部分を上書きする新しいテーマコンポーネントを作成できます。ただし、どうしても変更したい場合は、テーマコンポーネントをフォークする必要があります: https://github.com/discourse/discourse-search-banner。フォークした後、[テンプレートファイル](https://github.com/discourse/discourse-search-banner/blob/main/javascripts/discourse/templates/components/search-banner.hbs)を変更できます。
しかし、もっと簡単で保守性の高い方法があります:arrow_down_small:
新しいコンポーネントを作成します。
/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 {
// 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;
}
Before
After
「いいね！」 2
あなたは魔法使いですね。本当にありがとうございます。Flarumからの移行で、私の意見では学習曲線がきついです。
また、以前のコードを削除するようにリマインドしていただきありがとうございます。
「いいね！」 1
