Zeronoiseテーマ

:discourse2: 概要 Zeronoise は、明確な色アクセント微妙に区別されたコンテンツエリアに焦点を当て、快適な読書体験を目指しています。
:eyeglasses: プレビュー Discourse Theme Creator でプレビュー
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/zeronoise
:open_book: Discourse テーマは初めて? Discourse テーマの利用に関する初心者ガイド

このテーマをインストール

機能

こんにちは Meta の皆さん!私は、明確な色アクセント微妙に区別されたコンテンツエリアに焦点を当て、快適な読書体験を目指した Discourse 用のテーマを作成しました。

デスクトップ版では、デザイン上の階層を高めるため、トピック作成者のアバターをタイトルの左側に移動させました。

セリフフォントを扱うのも楽しかったです。最終的に「Playfair Display」がテーマにキャラクター(へへ)を与えてくれました。

もう一つ面白い点は、テーマのヘッダーが黒なので、テーマ設定を通じてロゴのいくつかの要素(色反転、色相回転、明るさ)を調整できることです。

楽しんでいただき、使用し、フォークしてください :100:

設定

名前 説明
ロゴの色反転
ロゴの色相回転 ロゴの色を変更する度数を指定します。不明な場合は 0 のままにするか、「css filter hue rotation」で検索してください。
ロゴの明るさ ロゴに追加する明るさの量を設定します(暗くしたい場合は負の数を設定してください)

クレジット

@ruidovisual によって作成されました


:discourse2: 当方でホストされていますか? テーマは、Standard、Business、Enterprise プランで利用可能です。

「いいね!」 51

わあ!素敵なテーマですね!多くの要素は正直に言えば Material Theme に組み込まれるべきですが、どちらのテーマも素晴らしいです。よくやりました!:+1:

「いいね!」 2

このテーマ、実際によくできているね。自分のウェブサイトでぜひ試してみたい。

「いいね!」 4

新しいトピックはコンポーネントですか?

「いいね!」 2

正直に言って、これは私がこれまでに見つけた中で最も美しいテーマの一つです!本当にありがとうございます :slight_smile:

一つだけお手数をおかけして恐縮ですが、@ruidovisual さんのご助力をいただきたいのです :slight_smile:

  • 私はこれらすべてにおいて完全な初心者なので、私の無知をお許しください。ファイルをフォークしてカラーテーマを変更することはできました。フォントを変更したいのですが、変数 SCSS 内に独自のフォントファミリーをインポートすることで可能だと確認できました。
  • 困っているのは、タイトルや見出しなどに使うフォントと、本文に使うフォントの 2 つをそれぞれ設定する方法がわからないことです。

もしお力添えいただければ大変助かります。これは完全に範囲外のことかもしれませんし、大変恐縮ですが、ぜひご教示いただければ幸いです :slight_smile:

「いいね!」 5

こんにちは、Karthikk さん!テーマがお気に召していただけて嬉しいです : )

最も簡単な方法は、body 要素に font-family を定義することです(common.scss で行うのがベストだと思います):

body {
  font-family: 'あなたのフォントファミリーの名前', [フォールバック];
}

ご自身でフォントを追加しているのか、Google Fonts から選んでいるのかわかりませんが、Google のカタログからファミリーを選ぶことをお勧めします。

[フォールバック] は、選択したフォントの種類に応じてフォールバックに置き換えてください。font-family のフォールバックについては、こちら で詳しく確認できます。

タイトルや見出しのフォント変更については、もうすでにお分かりいただいていると思いますが、念のため申し上げますと、インポートするだけでなく、variables.scss の 116 行目 で宣言する必要があります。

お役に立てれば幸いです!良い週末をお過ごしください : )

「いいね!」 7

テーマのカスタムコンポーネントのことでしょうか?その場合、答えは「いいえ」です。position: fixed で配置されています。mobile.scss の 36 行目 をご覧ください。

良い週末をお過ごしください。また、ご辛抱いただきありがとうございます。:slight_smile:

「いいね!」 4

とても素敵なテーマですね!zeronoise をベースに、Discourse 用の新しいテーマをすぐにでも作りたいと思います。
共有していただき、ありがとうございます!

「いいね!」 5

素晴らしいテーマですね。個人的な「気に入ったテーマ」リストの上位です。 :slight_smile:

もし、ウィザードで選択したフォントとオプションで同じものにできると、さらに興味深くなると思います。

「いいね!」 4

@ruidovisual さん、こんにちは。

テーマがすごく気に入っています。

紫色を赤色に変更することは可能でしょうか?赤色のバージョンをリリースしていただくことはできますか?

自分でも試してみたのですが、その結果、テーマの効果が失われてしまい、赤色にもなりませんでした。:grin:

「いいね!」 2

@ruidovisual 解説ありがとうございます!おかげでフォントの変更方法を理解できました。

今はテーマのライト版とダーク版を自分で作りながら遊んでいます。CSS を極力使いたくないため、カラーパレットを活用しています。

ほぼすべてを調整できたのですが、以下の 2 つの要素だけがうまくいきません。

  1. 投稿の下部にあるステータスバーは、あなたのテーマでは特別なエフェクトがかかっていますが、カラーパレットでは制御できません。これを CSS で調整するにはどうすればよいでしょうか?どの部分を対象にすればよいですか?

  2. 個別のカテゴリビューで全トピックの上部にあるバーは、パレットで色を設定しても白のままです。

お手伝いいただければ幸いです :slight_smile:

追伸:参考までに、私が使用しているカラーパレットです。

「いいね!」 1

素晴らしいテーマですね。

一つ質問です。「ボックス型」のカテゴリーで動作させた方はいらっしゃいますか?ランダムな形になり、テキストが白いままで表示されてしまいます。

「いいね!」 1

非常にクリーンでモダンです。コミュニティが生み出すテーマは最高です!

「いいね!」 1

こんにちは、このテーマは素晴らしいですね。
ただし、中国語のフォーラムではスタイルにいくつか問題があるようです。

zeronoise テーマ

デフォルトテーマ

「いいね!」 3

おそらく中国語の文字に関するフォーマットの問題でしょう

「いいね!」 2

まず、この美しいテーマを @ruidovisual さん、本当にありがとうございます。コミュニティフォーラムで約2ヶ月間使用しています。

一つ質問があります。モバイルでナビゲーションドロップダウンを削除することは可能でしょうか?

よろしくお願いします。

「いいね!」 1

このテーマをありがとうございます。今のところ気に入っています!これまで見た中で最も快適なディスコーススタイルの1つです :slight_smile:

問題は1つだけです。カテゴリで一括操作を実行すると、チェックボックスが表示されないため、複数のトピックを選択できません。これは本当に困っており、この問題のためにテーマを定期的に使用できません。修正できますか? <3

「いいね!」 1

これは中国語の文字とは関係なく、「box」設定のcategory styleの問題です。

.badge {
  &-category-bg,  /* <------ bad!! */
  &-wrapper.bullet &-category-parent-bg,
  &-wrapper.bullet &-category-parent-bg + &-category-bg {
    border-radius: 50%;
    width: 9px;
  }

これを解決するには、テーマコンポーネントとして適用してください。

.badge {
  &-wrapper.bar &-category-bg,
  &-wrapper.bar &-category-parent-bg,
  &-wrapper.bar &-category-parent-bg + &-category-bg {
     border-radius: 0%;
  }
  &-wrapper.box &-category-bg,
  &-wrapper.box &-category-parent-bg,
  &-wrapper.box &-category-parent-bg + &-category-bg {
    border-radius: 0%;
    width: 100%;
  }
}
「いいね!」 3

テーマは気に入っていますが… ;)\n\nこの印刷ビューを修正または手伝っていただけますか。使用できません。\n- タイトルは小さくする必要があります\n- 影付きの境界線は表示されないようにする必要があります\n\n

\n\nまた、トピックの選択も機能しません\n\nCleanShot 2022-11-20 at 00.12.18\n\nまた、このテーマのフォントをグローバルに変更するにはどうすればよいですか?

大変素晴らしいです、どうもありがとうございます。

今からデプロイします。近いうちにさらに貢献できることを願っています :slight_smile: