Pyx’s Modern Theme は、Air テーマのフォークであった私の旧テーマ darkpixlz’s Modern Theme の後継です。旧テーマは約2500行のコードで多くの問題を抱えていたため、書き直しました!
スクリーンショット
背景画像なしスタイル
特徴
- 背景画像の有無にかかわらず、モダンなユニボディデザイン
- Discourse コアおよび多くのプラグインをフルサポート
- すべてのモダンなコア機能をサポート
- カスタマイズ可能な背景画像
- プラグインがプロフィールでユーザーの背景画像を読み取れるよう
--user-bg-url プロパティを追加
- 多くの設定と選択肢
プラグイン
ほとんどのコアプラグインをサポートすることを目指しています。以下に、網羅的ではないいくつかのプラグインのスクリーンショットを示します。
リポジトリへのすべての貢献を歓迎し、(おそらく)同日中にレビューします。コメントやアイデアはありますか?こちらに返信してください。問題が発生しましたか?GitHubのIssueを作成してください。追跡しやすいためです。
私はすべてのスタイルをFirefoxのみでテストしていることに注意してください。Chromiumに問題がある場合は、報告をためらわないでください。モバイルは数回ごとにチェックされており、一般的にサポートされています。
今回はこれで終わりです。テーマをお楽しみください!
「いいね!」 15
<image redacted>
うん、これは私の見落としだった。コンポーネントがこういう方法で画像を追加できることを忘れていた。修正がプッシュされた 
<image redacted>
これは意図した動作だと思う。ただ、バナーが閉じているときだと少しおかしく見える気がする。できることを考えてみるよ。
Monikas
(JustMonika)
5
<redacted>
アダプティブなスケーリングを追加できるかどうか気になっています。右側にサイドバーコンポーネントを配置したいです。
CSS
/* ユーザーのアバター幅を取得し、広告コンテナの最大幅を設定 */
/* 広告コンテナのスタイル */
#list-area {
display: flex; /* Flexboxを使用して広告を配置 */
flex-direction: column; /* 広告を縦に表示 */
gap: 0; /* 広告画像間の間隔を除去 */
padding: 0; /* コンテナのインセットを除去 */
margin: 0; /* 広告コンテナの周囲に余分な外枠がないことを確認 */
max-width: 812px; /* 広告コンテナの幅を最大812pxに制限(アバター幅: 48px) */
}
/* 広告リンクのスタイル */
.banner-ad {
display: block; /* 広告コンテナをブロック要素にする */
width: 100%; /* 広告コンテナが100%の幅を占めることを確認 */
max-width: 100%; /* 最大幅を超えないようにする */
margin: 0; /* 広告コンテナ間の間隔を除去 */
}
/* レスポンシブな広告画像のスタイル */
.ad-image {
width: 100%; /* 画像が親要素の全幅を占めることを確認 */
height: auto; /* 画像の元の縦横比を維持 */
max-width: 100%; /* 画像がコンテナの最大幅を超えないようにする */
display: block; /* 画像下部の空白問題の修正 */
margin: 0; /* 画像周囲の余分なスペースを除去 */
}
/* レスポンシブデザイン:大画面と小画面での広告表示を調整 */
/* 幅が768px未満のデバイスでの広告表示を調整 */
@media (max-width: 768px) {
#list-area {
padding: 0; /* モバイルデバイスで余分なインセットがないことを確認 */
}
.banner-ad {
width: 100%; /* 小画面で広告が全幅を占めることを確認 */
}
.ad-image {
width: 100%; /* 画像がコンテナの幅に適応することを確保 */
height: auto; /* 画像の縦横比を維持 */
}
}
/* 非常に小さなデバイス(例:縦長モードのスマートフォン)での広告画像をさらに調整 */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* 画像がスマートフォンの画面幅に適応することを確保 */
max-width: 100%; /* 大きすぎないよう最大幅を100%に設定 */
height: auto; /* 画像の縦横比を維持 */
}
}
<redacted>
「いいね!」 1
明日、サイドコンポーネントを確認します。広告についてはテストできないため約束できませんが、一般的なスケーリングについては修正できるはずです。
「いいね!」 1
多くの修正と、カテゴリ編集ページおよびその他の管理者エリアのサポートを含むアップデートがプッシュされました!
@Monikas サイドボタンの問題もこれで修正されたはずです。
「いいね!」 2
申し訳ありませんが、今週は体調を崩すことが多く、他にもやるべきことがありました。投稿ストリームをきれいにし、多くのバグを修正し、コンポーザーをフロートさせました!
「いいね!」 1
また、テーマページが古いバージョンに元に戻り、多くの問題が発生していることに気づきました。意図したとおりに表示されるように再追加されると思うので、そこでの修正に労力はかけません。
以下のようなレイアウトは可能でしょうか?
このテーマの美しいレンダリングなどと同様に、以下のようにリーダーボードのサイドバーなども含めることはできますか?
皆さん、こんにちは。最近のアップデート不足をお詫びします!レビューキューとDockerマネージャーのサポートを追加しました。
「いいね!」 1
皆さん、こんにちは。
更新が遅くなり申し訳ありません。先週、タイトルの変更を依頼しましたが、実際にはフォローアップしていませんでした。ローカルサイトでテーマを同期しようとしたところ、ポートの競合について知りました。8時間後、私のホムラボ全体がProxmoxに移行しました。これに加えて、個人的なプロジェクトで過ごした1週間(4000 LOCのフロントエンドとバックエンドを文書化するのは簡単ではありません)を考慮すると、あまり自由な時間がありませんでした 
tl;dr: テーマは「プレビュー」段階を終了しました!
ほとんどのサイトで機能し、適切にスタイル設定されると確信しています。この新しい段階では、ここではバグレポートを受け付けません。今後はGitHubの問題を提出してください。
フィードバックをお待ちしています。どんなフィードバックでも歓迎です。遅いかもしれませんが、継続的なサポートに感謝します :3
「いいね!」 1
Den
(Den)
16
いつもながら素晴らしい出来栄えです、ありがとうございます!
「いいね!」 1
皆さん、こんにちは。
数日間、サイト上部に表示されていた非推奨の警告についてお詫び申し上げます
。修正が完了しました。すべて通常通りに戻るはずです。
さらに良いニュースです!テーマを再度書き直しました。これにより、巨大なcommon.scssファイルではなくなりました。いくつかのマイナーな修正を行った以外は、見た目は変わらないはずです。お楽しみください :3
「いいね!」 3
DevTeVe
(DevTek Ve)
19
テーマはとても気に入りましたが、残念ながら使用を妨げる「アーティファクト」がいくつかあります 
- 「プロフィール」ページには、ヘッダーの後ろに「コンテンツにスキップ」という小さなボタンがあります。
- 別のカラーパレットを選択しようとすると(ユーザーとして、プロフィールで)、ドロップダウン選択が上記で言及した「コンテンツにスキップ」ボタンの近くに表示されます(それでそこにあることに気づきました)。
「いいね!」 1
DevTeVe
(DevTek Ve)
20
@darkpixlz フィードバックが理解しにくいかもしれないと思ったので、動画を録画しました 