サインアップボタンの色を変更する方法

[hequaye (Henry Herbert)]

皆さん、こんにちは！サインアップボタンをカスタマイズする方法を知りたいです。ヘッダーのすべてのボタンではなく、サインアップボタンの色だけを緑色に変更したいです。

Discourseホストフォーラムを使用しています。初心者向けの質問かもしれませんが、私は本当に初心者で、一晩中これを理解しようとしていました。

AIRテーマを使用しています。

[Steven]

こんにちは！

ホストされているフォーラムでどのようなオプションが利用可能か分かりませんが、管理パネルにカスタマイズセクションがあると思います。

テーマのCSS/HTMLを編集し、共通セクションに以下を追加してください。

.d-header .sign-up-button {
    background: #48bb6a;
}

それでも機能しない場合は、この色に優先順位を付けるために!importantを追加する必要があるかもしれません。その場合は以下のようになります。

.d-header .sign-up-button {
    background: #48bb6a !important;
}

[hequaye (Henry Herbert)]

@Stevenさん、ありがとうございます。うまくいきました！ただ、サインアップ変数が見つかりませんでした。CSSの変数と、HTMLでそれらを見つける方法に慣れる必要があります。ありがとうございます！

[Steven]

変数を特定するのは難しい場合があります。私が進歩するのに大いに役立ったのは、ブラウザの「検証」機能です。コードやCSSを調べたり、ライブで変更を試したりできます。

この場合、Discourseの開発者は、サインアップボタンとログインボタンに特定のクラスを追加しました。これは役立ちます。

しかし、遠慮なくここで質問してください。コミュニティは常に助けようとします。

[hequaye (Henry Herbert)]

@Steven　すごいですね！！！本当にありがとうございます！サインアップボタンが緑になりました！

インスペクトツールを使ったのですが、「All Tags」というメニューボタンの名前を、私のユースケースに合わせて「LFX Tools」のように変更する方法はありますか？フォーラム全体がタグベースであるため、HTMLで探す必要があるかもしれませんが、タグ機能をツールに変更するのはどのくらい複雑だと思いますか？

[Steven]

この特定のテキストは、管理パネルの「カスタマイズ」>「テキスト」で編集できます。

検索バーに「js.tagging.selector_all_tags」と入力し、テキストを検証してください。

しかし、一般的な文脈でのご質問にお答えすると、テキストの編集は可能ですが、CSSでは難しい場合があります。私は通常、::beforeまたは::afterクラスでcontentセレクターを使用します。

https://www.w3schools.com/cssref/sel_before.asp

もしテキストを編集する機能がなかった場合、専門家ではありませんが、次のようなことを行うでしょう。

まず、「all tags」というテキストを非表示にします。

summary.tag-drop-header .name {
    font-size: 0;
}

次に、追加したいテキストをcontentで指定する新しいCSSクラスを作成し、前の設定を上書きするためにfont-sizeを指定する必要があります。

summary.tag-drop-header .name::after {
    content: "LFX Tools";
    font-size: 15px;
}