# 在标题后添加彩色横幅

**URL:** <https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481>\
**Category:** Development\
**Created:** [2023 年10 月 17 日 05:03 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481 "2023-10-17T05:03:07Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

作者： ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
发布日期： [2023 年10 月 17 日 06:05 UTC](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481/2 "2023-10-17T06:05:57Z")

</div>

你好，@Joe_Nguyen 👋

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

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

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

```

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

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

```

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

这样就完成了 🙂

 ![color-bar](https://global.discourse-cdn.com/meta/original/4X/5/6/3/563ba55035574c213bd38f7e99370a26b3dc35b4.png)

---

_[View the full topic](https://meta.discourse.org/t/add-a-color-banner-after-the-header/282481)._