ヘッダーの後にカラフルなバナーを追加

[Joe_Nguyen (Joe_007)]

こんにちは、コミュニティメンバーの皆さん！

ヘッダーの下にカラーバナーを追加しようとしていますが、今のところ成功していません。さまざまなCSSやHTMLコードを試したり、カスタムコンポーネントを作成したりしましたが、バナーはヘッダーの一番上に表示され続けています。以下のようなものを達成したいと考えています。

これに関する経験や提案があれば、ぜひご協力いただけると幸いです。

ありがとうございます！

[Lilly (Lillian Louis)]

こんにちは、@Joe_Nguyen さん

below-site-header プラグインアウトレットを使用して、次のように実行できます。

ステップ 1: テーマまたはテーマコンポーネントの common-head に以下を追加します。

<script type="text/x-handlebars" data-template-name="connectors/below-site-header/header-color-bar">
  <div id="color-bar">
  </div>
</script>

ステップ 2: 同じテーマまたはテーマコンポーネントの common-css に以下を追加します。

#color-bar {
  background-color: #13d83d;
  height: 30px;
}

注: 高さを調整したり、色プロパティを好きなものに変更したりできます。

これで完了です

[Joe_Nguyen (Joe_007)]

@Lillyさん、ありがとうございます！

[Lilly (Lillian Louis)]

ローカルインスタンスではなく、リポジトリのテーマコンポーネントとして設定する方法を確認したい場合は、私のリポジトリをここにコピーできます。

GitHub - Lillinator/header-color-bar

数日中にリポジトリを削除する可能性があります。