多用途のバナー

カスタマイズ テーマコンポーネント
,
257

残念ながら、このコンポーネントを複数回インストールしても機能しません。現時点での最善の選択肢は、Marketplace を通じてカスタムソリューションの構築を専門家に依頼することでしょう。

最近はこのコンポーネントに関するバグ報告への対応に時間を取られていましたが、今後1〜2年以内に大規模な改修を行う予定です。それによって、さらに高い柔軟性が実現できることを願っています。

「いいね！」 4
258

コンポーネント設定を使用して、特定のページでのみバナーを表示しています。しかし、CSS に以下の2つの不具合が見つかりました。

  • バナーが表示されないべきページでも、上部に余白（margin）が追加されてしまう
  • ページ読み込み中にバナーがスタイルなしで表示されてしまう

これらの問題を回避するため、.banner-box {display: none;} を宣言し、その後に表示すべき特定のページに対してのみ表示を指定しています。

「いいね！」 2
259

こんにちは @tshenry さん
アイコンを大きくすることは可能でしょうか？

「いいね！」 1
260

デスクトップユーザーとモバイルユーザーで異なるグラフィックを提供する方法について、これはより一般的なFAQになるかもしれませんが、知りたいです。

「いいね！」 1
261

これらのグラフィックはどこに表示したいですか？ デスクトップ/モバイルの状態に基づいて条件付きで表示する方法は確かにありますが、どのようなアプローチを取るかは、何をしようとしているかによって異なります。

「いいね！」 1
262

クリスマスメッセージをグラフィックを含めて表示するために、versatile banner を使用しています。versatile banner のコンテキスト内でこれを実行できるようにしたいと考えています。

「いいね！」 1
263

なるほど、その場合、Versatile Banner の「content」設定のいずれかに以下のようなものを追加できるかもしれません。

<div class="xmas-banner-image"></div>

そして、メインテーマまたは新しいコンポーネントに CSS を追加します。ここでは、LINK_TO_MOBILE_IMAGE を実際の画像リンクに置き換えることができる例を示します。

.mobile-view .xmas-banner-image {
  background-image: url("LINK_TO_MOBILE_IMAGE");
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.desktop-view .xmas-banner-image {
  background-image: url("LINK_TO_DESKTOP_IMAGE");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

CSS の調整が必要になりますが、これで開始できることを願っています。

「いいね！」 3
264

非常に良いですね。CSSで解決する必要があると感じていました。たたき台を提供していただきありがとうございます。

「いいね！」 3
265

Discourse Assign プラグインと連携して、「/latest?assigned=」を具体的にターゲットに使用したいと考えています。これにより、「すべて」、「自分」、「なし」に割り当てられたトピック用のボタンを追加できます。

しかし、これは機能しません。「/latest」が機能するため、「?」が原因だと推測しています。これらのページ/ビューに対してのみこのバナーを表示するには、どうすればよいでしょうか？

また、「/latest」のみを選択した場合でも、バナーはホームページにも表示されます。これを防ぐにはどうすればよいですか？ ホームページの表示チェックボックスの設定を見落としていました。

最後に、アイコンをクリック可能にする方法はありますか？ アイコンの下のテキストのみがクリック可能なようです。

「いいね！」 1
266

これらはより複雑なカスタマイズであり、別のコンポーネントに追加する必要があります。ウィジェットの1つを再オープンして動作を調整する方法の例は次のとおりです。Versatile Banner - #158

アイコンについては、CSSソリューションをハッキングすることもできると思います。列コンテンツ設定にアンカー要素を追加し、画像をオーバーラップするようにスタイルを設定できる可能性があります。

「いいね！」 3
268

どうもありがとうございます！これで自分で解決できると思います。

「いいね！」 2
269

テーマを有効にする前に、汎用的なバナーをプレビューする方法はありますか？ :thinking:

公開する前にどのように見えるかを確認したいのです（そして、恥ずかしい間違いを見つける前に） :slight_smile:

「いいね！」 2
270

変更用に開発用ドロップレットを保持しています。月額5ドルで、何か問題が発生した場合に、何かを壊す前に確認できます（笑）。

ローカルホストでも同じことができると仮定します。それなので、VMを作成して月額5ドルを節約します（笑）。

「いいね！」 5
271

なるほど、それは思いつきませんでした :thinking:

そして、今日の発表に加えて、まさにそれをRaspberry Piで実行するかもしれません :smiley:

「いいね！」 5
272

検索バーコンポーネントの上にこのバナーを機能させた人はいますか？

msedge_63vMBwf0P8
msedge_63vMBwf0P81736×822 172 KB

今のところ、検索バーの下にしか配置できませんでした :sneezing_face:

「いいね！」 1
273

テストサイトに両方ともインストールしており、Versatile Banners の swap default positioning 設定をオンにすることで、位置を入れ替えることができます。これであなたも解決できるのではないでしょうか？

Versatile Banner and Search
Versatile Banner and Search1080×1237 178 KB

「いいね！」 2
274

うーん…これは奇妙ですね…検索バーコンポーネントの設定だと思いますか…検索バーにはサイトヘッダーの下にチェックを入れています。

chrome_OiidorSbez
chrome_OiidorSbez1920×871 114 KB

検索バーの設定は何ですか？

「いいね！」 1
275

below-site-header を検索バナーで使用すると、「デフォルト位置の入れ替え」設定で、汎用バナーを上または下に切り替えることができます。

検索バナーのプラグインコンセントを above-main-container に設定すると、スワップをオンにしてもオフにしても、汎用バナーは常に一番上に表示されます。

（変更はページをリフレッシュすると表示されます）

「いいね！」 4
276

フォーラムを立ち上げたばかりで、まだホストプランを利用しています。
このバナーは気に入っていますが、一つ質問があります…

ダークモードとライトモード（つまり、異なる配色と異なる背景画像/色）を実装したいのですが、設定を見落としているか、何か方法がありますか？

「いいね！」 4
277

テーマコンポーネントを2回インストールし、1つをLight、もう1つをDarkと名付け、LightコンポーネントをLightテーマに、DarkコンポーネントをDarkテーマにそれぞれアタッチしました。:+1:

ただし、Lightコンポーネントはdefault dark mode color scheme idが設定されている場合、カラーパレットが切り替わりません。そのため、100%完璧ではありません。

「いいね！」 1