サイドバーの上ではなく、メインコンテンツの上にバナーを配置できるようにする

コードで攻撃する前に、サイドバーの下ではなく、ページコンテナ内にバナーを配置することは可能かどうか、ただ知りたいだけです。

「いいね!」 3

プラグインアウトレットの場所テーマコンポーネントを見て、どこに簡単に要素を追加できるか確認できます。

ただし、それは独自のコンポーネントを作成する場合や、このコンポーネントをフォークする場合にのみ役立ちます。

「いいね!」 2

プラグインのアウトレット設定を追加するPRを開きました。これにより、次のように表示できます。

@tshenry 時間のある時に試して、マージしていただけますか? DEV: plugin outlet setting for sidebar, prettier by awesomerobot · Pull Request #15 · discourse/discourse-versatile-banner · GitHub

「いいね!」 6

この度は誠にありがとうございます。また、素晴らしいお仕事 @awesomerobot さん :slight_smile:

「いいね!」 3

素晴らしいですね :star_struck: @awesomerobot、ありがとうございます!

PRをマージしました!

「いいね!」 4

テスト済みで、スムーズに動作しています!

「いいね!」 3

完璧に動作します!:+1:

「いいね!」 3

ちょっとしたメモです。このコンポーネントは、デスクトップ表示でヘッダーの下のトップマージンに隙間を残しているようです。また、有効になっていないビュー(例:「メンバー向けに表示」が無効になっている場合)では、ナビゲーションバーの上にも目立ちます。

再現するには、デスクトップビューでカテゴリまたはトピックリストページに移動し、コンポーネントが有効な場合と無効な場合を比較してください。トップマージンが約25px拡大します。これは、バナーがメンバー向けに有効になっていないビューでも確認できます(一時的に、共通CSSのmain-outlettop-marginコレクターを追加しました)。

「いいね!」 2

[引用=“Lilly, post:8, topic:280280, username:Lilly”]
このコンポーネントは、デスクトップ表示でヘッダーの下の上のマージンにギャップを残しているようです
[/引用]

モバイル表示でも同様の現象が見られます。このTCを無効にするとギャップが解消されるため、原因は間違いなくこの中にあるはずです。

「いいね!」 2

FYI、バナーの書式設定のためにこれを共通CSSに追加できます。私も同様のものを使用して、一時的に汎用バナーを修正しています。

// * 汎用バナーの上部マージンのオフセットを補正 *

#main-outlet {
  margin-top: -25px;
}
「いいね!」 2

既存のトピックに4件の投稿がマージされました: Versatile Banner