特定のトピックの背景をどうやって変更できますか?

Background of topic color change のスレッドからの議論を続けます。

こんにちは、特定のトピックの背景をどのように変更できますか?

「いいね!」 1

それか。私はコーディングができません。特定のサブカテゴリのトピックの背景をカスタマイズするためのCSSコードは何ですか?

お返事ありがとうございます!

「いいね!」 1
.category-support .topic-post {
    background: red;
}

は以下のようになります。

カテゴリ固有のクラスは <body> タグ内にあります。


最初の投稿のみをハイライトしたい場合は、以下のようにします。

.category-support .topic-post:first-child {
    background: red;
}

トピックリストのカテゴリ固有のトピックの背景を変更したい場合は、リンク先のトピックがその方法を示しています。

.category-support.topic-list-item {
    background: red;
}

は以下のようになります。

「いいね!」 4

ありがとうございます :+1:
ぜひ試してみます!

色ではなく画像を追加することはできますか?

別の質問ですが、特定のサブカテゴリの背景をカスタマイズするにはどうすればよいですか?
よろしくお願いします。

こんにちは、

カテゴリ設定を使用して、カテゴリに背景画像を設定することもできます。

「いいね!」 1

はい、うまくいきました :+1:。しかし、ページを公開すると、背景が白のままになります :point_down:

公開ページの機能は非常に限定的です。
例えば、YouTube動画のプレビューが表示されません(動画バナーのみ表示)。画像カルーセルを作成できません(すべての画像がページの下に次々と配置されます)。
ここから、以下の質問があります。公開ページの機能を自分で改善することは可能ですか、それとも公開ページを改善するための既製のコードはすでにありますか?
この問題については、別の投稿を作成した方がよいでしょうか :thinking:

公開されたページはトピック自体とは別にスタイルを設定する必要がありますが、公開されたページにはそれぞれIDがあるため、CSSで調整することが可能です。例:

.published-page {
  &.testing-published-page.topic-276.foo {  /*これは私のページIDで、topic-title+topic-ID+category-slugで構成されています*/
    background-color: #c4ddc4;

    .published-page-header {
      background-color: #facccc;
    }

    blockquote {
      background-color: #facccc;
      border: 5px solid #fb7878;
    }
  }
「いいね!」 1

お返事ありがとうございます。大変助かります。

公開されたページが元の投稿のデザインを自動的に引き継ぐようにコードを作成することは可能でしょうか?

返信ありがとうございます!
この機能について思い出しました。この機能は、特定のカテゴリ内のすべてのトピックの背景を設定します。セクション全体の背景をカスタマイズせずに、投稿エディターで特定の投稿の背景をコーディングできますか?

より具体的なテキストの例を示していただけますか?そうでないと、わかりません。

topic-title = kody-css-dlya-nastrojki-oformleniya-temy
category slug = staff
topic id = image

公開された私のページはこちらです:point_down:

ブラウザのインスペクターでページのディテールを確認しましたか?

いいえ、理解できないからです。
これは、次のような意味ですか?:point_down:

ブラウザからIDを取得しました :point_up_2:
image

CSSのスキルはまだスニペットやちょっとした調整に限られているため、基本的なことを教えるのには最適な人物ではありません。:slightly_smiling_face:

お役に立てそうなガイドがいくつかあります。

「いいね!」 1

もう一つ質問してもいいですか?あなた以外誰も答えてくれないような気がします。ボタンをこのように点滅(フレア)させるにはどうすればいいですか?
Button-whatsapp gif

これが私のボタンコードです

[data-theme-button2] {
    display: flex;
    justify-content: end;
    a {
        padding: 10px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 1px solid #004E7D;
        color: #004E7D;
        font-weight: 600;
    }
}

Discourse固有のヘルプはここで入手できますが、CSSトリックについては別の場所に行く必要があります。私はGoogleとhttps://css-tricks.com/を使用しています。

「いいね!」 4

こんにちは。情報ありがとうございます:raised_hands:
コーディングを理解するよりも、専門家を雇う方が良いと思います。ボタンのコードの問題を解決する必要がありました。At this time, I needed to solve the issue with the button code.

「いいね!」 2

CSSの修正やそれ以上のことで誰かを雇う必要がある場合は、#marketplaceに投稿するか、私に個人的なメッセージを送ってください。

「いいね!」 2