在标题后添加彩色横幅

[Joe_Nguyen (Joe_007)]

您好，社区成员！

我一直在尝试在标题下方添加一个彩色横幅，但到目前为止还没有成功。我尝试了各种 CSS 和 HTML 代码，甚至创建了一个自定义组件，但横幅一直出现在标题的顶部。我的目标是实现类似下图的效果：

如果您有这方面的经验或任何建议，我将不胜感激。

谢谢！

[Lilly]

你好，@Joe_Nguyen

这是使用 below-site-header 插件插槽执行此操作的方法。

第一步：在主题或主题组件的 common-head 中放入以下内容：

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

第二步：在相同主题或主题组件的 common-css 中放入以下内容：

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

注意：您可以根据需要调整高度和更改颜色属性。

这样就完成了

[Joe_Nguyen (Joe_007)]

谢谢 @Lilly！

[Lilly]

如果您想了解如何将此设置为存储库中的主题组件，而不是在本地实例中，您可以复制我的存储库：

GitHub - Lillinator/header-color-bar

请注意，我可能会在几天内删除该存储库。