「新しいトピック」ボタンのスタイルを「返信」ボタンに合わせる

サポート
1

「返信」ボタンのスタイルが気に入っています。これは /admin/customize/colors（カラーパレット/選択）で定義されている「セカンダリ」色です。

image
image694×920 133 KB

この動画で示されているように、「新規トピック」ボタンも「返信」ボタンと同じスタイルにしたいと考えています。

2

返信ボタンの CSS を取得し、そのプロパティを投稿追加ボタンに適用してみてください。

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

以下を追加してみてください。

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

次に、:hover（ホバー状態）用の CSS を追加する必要があります。

  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

適切な色を正確に選んでください。*** を希望の色に置き換えてください。

Discourse に CSS を追加する方法:

CSS の任意の部分でこの作業を行うことができます。

3

素晴らしい回答です！本当にありがとうございます！

もう一つ CSS のアドバイスが欲しいのですが、この 2 つのコードをどのように最小化するのが最適でしょうか？

ヘッダーの [+ New Topic] ボタンの色を変更

このヘッダーのボタンは、(+ New topic) button on all pages Theme によって追加されています。

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

カテゴリページとタグページにある [+ New Topic] ボタンの色を変更

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

最小化？翻訳が確信が持てず、申し訳ありません。これを組み合わせてみてください：

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

または

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

id（new-create-topic）が存在しているようですが、それがどれほど一意かはわかりません。これを使ってみてください（確認はしていません）。

実際には多くの選択肢があります。

以下を使用してください：

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

これらの組み合わせを自由に…

5

コードを短くしようとしていただき、ありがとうございます。あなたが提案してくれたようないくつかの組み合わせを試してみたところ、次のような結果になりました（＋印に注目してください）。

hoverstate

今は、2 つのコードスニペットのままにすることにしました。すべて完璧です！@Stranik さん、改めてありがとうございます。

6

アイコンのホバー時に CSS が設定されていませんでした：

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

もしかしたらその通りかもしれません。ローカルで試して確認する方が簡単な場合もありますね。:slightly_smiling_face:

さまざまなオプションを試し、組み合わせることも安全に行えます。創造性を発揮できる余地は十分にあります。頑張ってください！