おしゃれなテーマを作成中… 上流に送る価値はあるか?

こんにちは!

先月、お気に入りのフォーラムが Discourse に切り替わりました。ほとんどはアップグレードでしたが、見た目について人々は不満を訴えました*。そこで、それを修正することにしました。そして、大規模なスタイル変更を行うことになりました。今、それを正式なテーマにして上流にマージするかどうか、またはそれは非現実的かどうかを決定しようとしています。

他のフォーラムの人々も代替テーマとして気に入るかもしれませんが、マージするのがどれほど難しいかはわかりません。私がやったことは、Discourse の通常のテーマデザインからかなり逸脱しています…それは魅力の一部であり、困難の一部でもあります。

まだ進行中ですが、いくつかのスクリーンショットを以下に示します。

複数のカラーパレットを比較的簡単に作成して切り替えられるように設計されており、これまでに 3 つのカラーパレットがあります。

デイモード:

ナイトモード:

心地よいグレー:

スレッド投稿は 4 種類あります:通常(グレーに青いヘッダー)、管理者/モデレーター(緑)、スレッド作成者(シアン)、現在ログインしているユーザー(紫またはピンク)。すべて簡単に変更できます。

エディタのプレビューとグリッピーは、「現在のユーザー」スタイルに一致します。また、スクロールバーはページテーマに一致します。タイムラインもスクロールバーのように見えるようにスタイル設定されています。

トピックリストは可能な限り 1 行の行を使用し、タイガーストライプになっています。ヒートマップ要素は炎のように見えます。

ユーザー/通知メニュー:

埋め込み投稿のネストがより明確になりました:

ユーザー情報カードとリンクプレビュー:

今のところ、大きなスタイルシートのオーバーライドと、色を定義する小さなスタイルシートだけです。しかし、テーマが上流で受け入れられる可能性がある場合、正式な Discourse テーマに変換できます。

「いいね!」 13

素晴らしい、ユニークですね!

(すべてのテーマショーケースには、チャットボットをフィーチャーすべきです ;))

「いいね!」 5

ああ、えーと、これはまだ途中ですが、これまでにできたものを試したい方がいれば…ブラウザのスタイルシートオーバーライドを使ってローカルで試すのが一番簡単です。

  1. まだインストールしていない場合は、Stylus をインストールしてください。
  2. Discourse サイトを開いた状態で、Stylus アイコンをクリックします。
  3. 「Write style for」の下で、「this-site.tld」をクリックします。
  4. テーマのタイトルを追加します。
  5. 下のリンクにある対応する CSS ファイルの内容を貼り付けます。他のファイルはこれに依存するため、理想的にはまず style.css ファイルから行うのが良いでしょう。
  6. 保存します。
  7. 他のファイルについても、1 つずつテーマとして繰り返します。
  8. ベーステーマと他のテーマの 1 つをオンにします。他のテーマはオフにします。

サーバーサイドでインストール可能なテーマに変換するかどうか、まだ検討中です。私がこれを作成したフォーラムでは、管理者は Sam’s Simple Theme の別のインスタンスをインストールし、その上にスタイルシートオーバーライドとしてこれをドロップしました…これは機能しますが、理想的ではありません。

「いいね!」 1

参考までに、デフォルトのテーマについて人々が不満に思っていた点、つまり私が修正しようとした点を以下に示します。

  • あまりにも地味。
  • 空白が多すぎる。
  • 一度に画面に表示される情報が少ない。情報密度を高くすることを求めていた。
  • タイムラインウィジェットの開始日/終了日のように、ページ要素がクリックできるかどうかが不明確な場合がある。
  • 投稿、埋め込み投稿、引用のように、ページ要素が互いに関連しているかどうかが不明確な場合がある。構造を示す視覚的な手がかりが不足していると考える人もいた。
  • ページ要素間の視覚的な分離が不足している。すべてが1つの連続したドキュメントに印刷されているように見えた。
  • 人々は特に1行のトピックリスト行とタイガーストライピングを要求した。

そのため、よりコンパクトで、よりカラフルで、より立体的に、より明確な視覚構造を持つものを選びました。単一の連続したドキュメントではなく、カードのスタックのようなものです。基本的に、最近人気のあるフラットミニマリストスタイルとは逆のものです。

ミニマルなテーマは、実用的で、アクセスしやすく、ニュートラルであるため、デフォルトとして適しています。しかし、それ以外のものを望む人々のために、私は何か…違うものを作りました。:sweat_smile:

「いいね!」 3

これはすべてまだ進行中ですが、チャットウィジェットのサポートを追加し始めました…

「いいね!」 1

素晴らしい出来栄えです。気に入りました。

「いいね!」 1

素晴らしいテーマです!

テーマ作成者グループに追加しましたので、Theme の下にテーマのトピックを作成できます。これにより、人々はボタンを押すだけで自分のインスタンスにインストールできるようになります。

「いいね!」 8

ありがとうございます!

しばらく風邪で寝込んでいましたが、もうほとんど治ったので、近いうちに通常のテーマを作成するプロセスを開始できることを願っています。単なるスタイルシートの上書きではなく。

「いいね!」 3

やれ、GitHubで手に入れろ!!

「いいね!」 2

これはどこまで進みましたか? この素晴らしい作品が共有されないままにならないようにしてください。

「いいね!」 1

ちなみに、デフォルトテーマというのは、それを元に構築するためのものなのです。

クリック/タッチターゲットがその理由の一部です。親指で特定のコントロールを操作しようとするときに、スペースの利点を過小評価しないでください!

「いいね!」 1